Eatery 2.0 (Pt. 4)
Redesigning Search Cells
The problem — The previous search results were hard to read and words often cut off if it exceeded the cell. It was also not clear what users could search for or why results popped up.
Expanding menu vs. tapping to go to eatery page
For the same reason we kept the “Guide” (now “Menus”) feature, I chose flow B: it enables users to quickly compare menus. It also lets users keep track of eateries they are interested easier. Our research showed that food items were the deciding factor in choosing an eatery. Expanding the menu would let users pick a place with their search item after looking at the rest of the menu.
Making search cells more readable and clear
Because users are most interested in their search item. I decided to take out the images and focused on search results. Only items meeting their search will appear in the cells with the search term bolded so users know why it showed up. The top half of the card reflects the home feed eatery cells for consistency.
If users search for an eatery, a preview of the menu of up to three items will appear.
Final search cell design
- Search cells only show items that fit the search criteria. Users can find exactly what they are looking for without excess information.
- Users can tap “show full menu” to expand and see the rest of the menu.
- Words that fit their search will be bolded, so users know why that item is showing up.
- Search bar text: “Search” → “Search for an eatery or food item”
- Card displays proximity and opening / closing times.
Improving and placing the map
In the first version of Eatery, the map lived inside the eatery page and enabled the user to only see where a single eatery was located.
However, the map didn’t have much functionality. The two buttons on the bottom were unclear as well (one to center on your location and the other on the eatery).
I saw an opportunity to use it to give eateries discoverability.
The next problem was placement. The PM had been pushing for a map feature because he saw that a lot of other apps had it, and wanted it to be prominent in Eatery as well.
However, our user research had shown that most students knew how to get to places on campus already, and I disagreed that it was important enough to be its own standalone feature.
I initially thought about placing the map on top of the “sort by location” page when doing explorations of the sort functionality. However, once we changed to filters I realized that the map could be used as a way to represent the cell list view visually. This way, users can browse eateries while visually seeing its location.
(Further designing of the map was done by the other designer on the team.)
Navigation: Creating a tab bar
After getting a sense of what each page and feature would entail, we decided that implementing a tab bar made the most sense. There were enough features that a top navigation no longer made sense and, if needed, there would be room for additional features in the future.
- “Eateries” tab to browse, filter, and search eateries. Users can switch between a map and list view by tapping the top right, as they are just different ways on displaying the same information.
- The “Menus” tab would be used to compare different dining hall menus.
- Users can check their meal plan in the “Balance” tab.
Final New User Flow
Visual Style Guide
Visual guidelines for the previous version of Eatery were lost or non-existent. I created one in order to achieve consistency designing and developing throughout the app.
I also wanted to make a more cheerful experience in finding what food options are available, and updated the blue to a brighter hue.
Next Steps
We are always looking for ways to improve Eatery. After releasing Eatery 2.0, we will continue improving it with feedback from our users.
