Refining the SeafoodWatch search experience
The initial SeafoodWatch search app was a success, but we were noticing a few usability issues with the search experience. This was an exploration that led to refinements to the search experience.
Exploring the problem
The project manager further explained that users find the search being anchored to the top of the recommendation after a seafood has been selected confusing, and requested we change the way the page offers the user to ‘search again’.
Existing behavior: Landing on the group overview, group of recommendations, or the final recommendation, the page automatically scrolls the user down so that only part of the page is visible.
This is problematic, because on a slow browser or connection, this results in the page automatically scrolling the user down to a waypoint after the user has begun orienting themselves in the page. This disrupts the user as they are starting to explore the page.
Furthermore, when browsing with fast connections/browsers, the scroll happens almost instantly, resulting in the user not having a context cue that they can scroll up to return to search.
Additionally, this creates a large area of wasted space at the top that we are either scrolling past, or that contains redundant information. Expecting the user to know, without any context cues, that they can scroll back up in order to get back to search can also cause confusion.
The Seafood Watch Recommendation Search App is masked within the structure of the Seafood Watch website, and I think this is where some of the confusion and redundancy starts to set in. The app itself, has a consistent experience.
When we look at the app in context with the website, we start seeing both redundancies and inconsistencies.
The user flow starts at “Seafood Recommendations”, “Seafood Search”, or “Sushi”, (depending on where you start your search) to “Tuna Overview” (in the instance where there is a group with a description)—or “Tuna Recommendations” (In the instance where there isn’t), then “Tuna, Albacore”
This is repeated again in the title either above, to the right, or below the picture of the fish, with a slightly different variation. “Tuna”, “Tuna / All Recommendations for Tuna” and “Tuna, Albacore”
Removing the search component and the scrolling behavior from the top of the app, this issue becomes even more visible because of the proximity of the headlines to each other.
A possible solution is to brand the entire experience “Recommendation Search” - Which then allows it to stay consistent to the Seafood watch branding, and allowing the app give the user context cues for where they are. This highlights a few new problems.
The Group overview page has no information beyond a description, and a call to action to go view the recommendations. In the instances where the user lands on a group page, they, have to actively click to get to the Recommendations page that lists them all and allows you to drill down to a single recommendation. Furthermore, having removed the search bar from the top, there is no clear way to navigate within the app itself. You can easily go from Group->Recommendations->Individual recommendation, but there is no obvious path to backtrack or search again, beyond going back up to primary navigation.
Moving search to the bottom
This is the simplest solution the requires the least ammount of refactoring. It also leaves the current experience mostly intact.
- None of the other consistency issues are addressed. Having the search at the bottom disrupts the existing experience, and users may abandon the page before they reach it.
Moving search to the sidebar
This would require significant refactoring of the entire experience, primarily because the only place where there is a sidebar that could have an integrated search is in the multple recommendation overview page. Both the Group Overview, and the Individual Recommendation are designed as a single column display. This approach allows us to address a few other issues.
- This approach allows us to remove the “group” page alltogether, and combine it into the recommendation search. When available, the Group information should be presented together with the recommendations in the recommendation search. Finally, we can bring the sidebar back into the individual reccomendation page, giving us a space to search again, or return to the recommendation results for that type of fish. This approach fixes a lot of the consistency issues we’ve explored, and also allows us to simplify and streamline the search experience.
- This is a broader fix that requires more resources than what may be available short term.
Refining the experience
Redesigning the “Group” layout allows us to leverage the existing information and populate the group recommendations, while also allowing us to surface more information to the “Refine your search” experience.
Finally, the individiual result layout also allows us to introduce a place to either return to the recommendation results, or to search again within the app.