For more than five years, I’ve been a highly satisfied Yelp user who doesn’t go more than a day or two without turning to their mobile app. But now and then, the designer in me can’t help but notice places where the app could be better. Take the most recent iOS release, 7.2.1. There are loads of interesting features like contextual recommendations that may be missed because of minor design glitches. With modest adjustments, these flaws could be easily fixed; with more aggressive changes the overall app could truly shine. In this post I’ll review the two biggest 7.2.1 changes: the navigation and home screen. Afterwards my visual design partner, Becky Bochatey, and I will propose three alternative design directions that may improve the app and make it more compatible with iOS 7. Finally, you can choose which designs work best by voting in our Polar poll at the end of the post (takes a minute to load so you can also go to the Polar site.)
Yelp version 7.2.1 introduces a new tab bar navigation which improves discoverability of certain features but created user experience issues in these three areas: 1) information architecture, 2) interaction design, and 3) search. Image and details are provided below.
Information Architecture: Natural groupings emerge when looking at the tab bar and More content, however, the app fails to leverage these groups. Instead, the app silos content into different UI zones, without a clear mental model, making it difficult to scan and access items quickly. Also, the app’s content prioritization doesn’t seem inline with typical usage, e.g., Recents is placed in More but isn’t it used just as frequently, if not more, than Checking In, Adding Photos, and Adding Reviews?
Interaction Design: The tab bar uses two non-traditional interaction patterns. First, the More icon changes to an “x” after the user taps on this tab. Typically, users must simply switch to another tab to “close” the selected tab. Moreover, this design doesn’t have “< Back” when items are selected, thus users must start over via the More tab if they want to go back. Second, the middle tab introduces a multi-purpose item to support ratings, checking in and adding photos. These three features, while useful, may not be discovered because of the unfamiliar design.
Search: There are two places where users can initiate a Search: 1) near the top of the Home screen and 2) the tab bar. Although they work differently—the tab bar search will show the last search result—this is only evident through trial and error, making it challenging for users to remember where to go for what. Integrating these two search access points will streamline the user interface and make it easier for users to initiate new searches and find previous ones.
The Home Screen
The Home screen is significantly better than previous app versions: the category list has a much smaller footprint and the contextual content is both playful and relevant. And yet, there are still outstanding information organization and layout issues. For example, although Yelp has reduced the number of categories on the Home screen, categories still take up half the real estate. Wouldn’t it be more satisfying to show content instead of a category list?
Additionally, Yelp introduced a useful feature that may go unnoticed due to the layout. As you can see, below the categories it says, “What’s for lunch?” If it was 9AM, it might say, “What’s for breakfast?” and so on. Scrolling past the first category, users may see ideas for shopping, entertainment, and more depending on the time of day. Unfortunately, given the length of the scrolling list, these other categories may never be seen. Introducing a different layout could achieve the same design goals and easily resolve this discoverability issue.
Alternative Design Directions
To address the issues outlined above, Becky Bochatey and I created three alternative design directions. Some caveats before we proceed. First, this was a design exercise that we tackled on/off for about two weeks in our spare time. We worked on these in a fishbowl so we’re certain we haven’t nailed every possible Yelp concern. But we do feel that they’re a good starting point. Also, despite our best efforts, for all of the options we believe some level of new user education would be beneficial. Lastly, keep in mind that we were refining the existing design, not starting from scratch. The app could go in an infinite number of directions if we were to start with a clean slate but we chose to focus on the current design with the hope that some improvements might be implemented.
#1. Yelp Classic
Our goal for this design was to retain the general direction of the current app but make subtle usability and visual improvements. Images and details below:
- We retained the search field and category list at the top but adapted the category list’s visual design for iOS 7.
- For each contextual recommendation category, e.g., What’s for brunch, we introduced an inline swipe with “…” indicator so that users could see more categories without having to scroll far down the screen. In addition to enlarging the images for each recommendation, we also added the business hours.
- In the tab bar, we bubbled up Recents and placed About Me in More. (This might not fly with Yelp if they feel strongly about surfacing the About Me feature but we hypothesize that Recents is used very frequently and is deserving of a tab slot.) We were also bold and dropped the tab labels given that the icons are all standard and familiar.
- Instead of the 3-icon representation in the middle tab slot, this design has a more generic “+” to provide scalability and build on a familiar design pattern, e.g., Path and other apps use the “+” in a similar manner.
- When users tap on the “+” icon they will see a slightly lighter overlay than the current dark one and the “+” choices have larger tap areas. You’ll notice that we also added “Add Tip,” “Add Bookmark,” and “Add Business” so all “Adding” tasks are centralized.
- Lastly, we changed the More tab organization and behavior. Items are grouped as best we could according to functionality and users “close” the tab by simply choosing another tab. If a user chooses an item within More, it will have a Back arrow that returns to More.
#2. Yelp Minimalist
In an effort to put greater emphasis on the content—one of the key goals of iOS 7—for this option we tried to further minimize the app’s chrome. Images & details below:
- The primary way we reduced the app’s chrome was via the navigation. Instead of a bottom tab bar and top navigation bar, this direction concentrates all navigation in the top bar.
- The three main navigation entry points have distinct goals: 1) ways of viewing businesses, 2) ways of adding content, and 3) access to the user profile. The first one is controlled via a centered dropdown list similar to Google Circles; the second is accessed via the “+”; and the profile is accessed via the icon on the far left.
- In terms of the Home screen, we changed the category representation from a list to a more engaging visual grid which can display two additional categories. We were brazen and didn’t use the Yelp labels for these two extra categories – “ATMs” seemed like a more relevant option than “Banks”, and “Gas Stations” fit better than “Gas & Service Stations.”
- The contextual recommendations area also has less UI chrome. We dropped the “…” from the first version and instead use edges to convey that there are additional businesses.
- The “+” interaction for this direction is very similar to the one in the above Yelp Classic design.
#3. Yelp Pro
For this last direction, we tried to surface more content and more Yelp pro tools, e.g., Checking In, yet still keep the app streamlined. Images & details below.
- Similar to the previous direction, this one has 3 navigation elements: 1) the More sliding drawer for switching content views, 2) search, and 3) the “+” icon at bottom for adding content.
- Instead of just showing category names on the Home screen, this alternative shows category content accessible via tabs. The last icon on the right would bring up the full list of categories and tapping each would lead to a dedicated category page.
- Given the new category treatment, it made sense to move the contextual recommendations to the top of the Home screen. Additional recommendations can be accessed via swipe. We dropped the other recommendation categories, e.g., shopping, since users may navigate via category in the bottom section.
- Tapping on the “+” brings up alternative ways of adding content to Yelp. The closed state of the “+” bar also provides status updates from Yelp friends.
- Lastly, this option has a single access point for search which would show the last search as well as allow users to start a new search.
Which Yelp design do you think works best? Vote in the polar poll below (takes a minute to load so you can also go to the Polar site.):
That’s all for now – hope this was useful!