Eatery 2.0 (Pt. 2) — Making Information and Functions Easy to Find
The Eatery Page
The problem
The visual design made it hard for users to see what functions were available and quickly locate information.
Organizing information
The information on the Eatery page was not clearly divided. The Eatery name, meal option, and first menu header looked like one item while the gray in the menu looked like dividers.
In order to help differentiate the information, I explored a card style so users could clearly differentiate eatery details, functions, and the menu.
Additionally, the “favorite”, “share”, and “map” functions all did not look very tappable, as they were just icons overlaid on an image in the top right corner. This resulted in them being overlooked and seldom used.
Favoriting an eatery
I explored different places the favorite button could live. In the end I chose option F because the star icon next to the eatery name made it clear that the user was favoriting the eatery itself. It was also in a position where it was more noticeable, whereas options B, C, and D were still overlooked in user testing.
Sharing an eatery’s menu
I also explored different ways people could share a particular eatery’s menu. Out of these explorations, placing the share icon on the menu card (option D) made the most sense, as it made it clear what the user was sharing — that eatery’s menu.
Getting directions
I also explored ways users can get directions. I initially liked the idea of putting a map preview on the eatery page (option D) so that users could quickly see where an eatery was located, and if they need directions they can tap it to go to the map page.
I then realized that actually listing the building the eatery was located in and giving the option to get directions (since most people know where buildings are on campus) would be a much better alternative. This led to option E — which is the one I chose to go with.
Dining hall meal time selection on the menu card
Dining hall eatery pages have the choice of seeing the breakfast, lunch, or dinner menu. I explored ways to change this as well.
I chose to explore options A and G further.
I chose option F. User research showed that users used the app when they were ready to eat, so it makes sense to show the menu currently being served. There are rarely cases where the users will want to compare meal types within in the same dining hall. (i.e. lunch vs. dinner). I also added what times the dining hall served each meal, so people would not go to find the dining hall closed.
I then explored how users can change the meal type.
I chose option E. The three meal time options will slide out when tapped, and the serving time below will change to “choose a meal time”. The menu already showing will gray out so users won’t get confused.
Final eatery page design
- Broke down different categories of information into a “card” style so they can be differentiated.
- Added icons so users can identify operating hours and location easily at the top.
- Added what building the eatery is in. Most users know campus buildings, and this way, users can see where they have to walk to without using a map. However, in case they do need map directions, they can tap the “get directions” button.
- Put the favorite star button next to the eatery name, so users know they are favoriting the eatery.
- Placed the share button on the menu card, so the users know that they are sharing the eatery menu.
- Took out the gray in the menu section, so the menu looks cohesive and separate from other details.
