WhatsGood
Product Practice #1
This is not a real product. This is a design exercise for an idea that I’ve had. If you are interested to talk to me about work, email me at hello@carlconsing.com or view more of my work at carlconsing.com.
Concept
Whenever I eat out at a restaurant by myself or with others, many of us pull out our phones to check out Yelp reviews for what to order. However, because we have to process all the photos and mixed reviews, it can take over several minutes to figure out what are the best items to order. Especially when we are waiting in line for our turn to order or when we are at a restaurant with a large group of people, we may only have a couple of minutes to figure out what to order. This is when it would be extremely useful to be able to just glance at a list that ranks items on a menu from best to worst.
Primary Objective: The quickest way to find the best items on the menu
Explore
Design
Search view
The first screen you see when you open the app is the search screen. By default, it will show you restaurants nearby if you have your location turned on.
- User can search for restaurants by location or type of food. This allows the user to find the menu of a place they are interested in.
- Each restaurant displays the photo of its popular item, the restaurant name, address, total number of ratings of all its items, and total number of reviews of all its items. The ratings and reviews give the user a signal on what restaurants are popular. Tapping on a restaurant takes the user to the menu screen.
Menu view
The menu screen is the primary screen of the app. This is where users will go to figure out what to order. The goal is to give users just enough information for them to make a quick decision on what to order.
- Each item displays a photo curated by an editor, name of item, top review as voted by users and the item’s like count. Items are ranked by likes to quickly give the user an idea of what’s good or popular. User can tap on an item if they would like to dive deeper and read additional reviews on the item.
- User can tap on the like count to like the item. The simple action of tapping an icon to give feedback allows users to participate without having to write anything or even think of a rating. Less friction will lead to more data to be collected.
- User can view additional info for the restaurant by tapping on the info icon which displays an overlay above the menu. By hiding the info by default, the menu screen is left uncluttered until the info is needed.
- User can add an item if it is missing. The location of this action may need more testing since the user must scroll to the end of the menu to find the button. Another idea would be to add an icon on the nav bar instead.
Info Overlay
Additional information of the restaurant is hidden until needed. This allows the user focus on the menu. The user simply taps the info icon on the top right of the nav bar to pull up the info overlay.
- User can get directions to restaurant. This will open up the user’s preferred maps app. This is useful when the user is away from the restaurant and is ready to go there. No need to open another app to search for the location.
- User can call restaurant to get more info or make reservations.
- User can visit the restaurants website.
- User can see if the restaurant is currently open and also get its hours of operation.
- User can close the info overlay by tapping outside it
Item view
The item screen allows users to read more reviews or interact with the item.
- Only one photo will be displayed as curated by an editor. Users will be able to submit photos to the team but it will not be public unless chosen. One good pic of each item should be sufficient to get an idea of what the item looks like.
- Name of item has the largest font size on the screen. The name of the restaurant and price of item are secondary info and thus have a lower contrast.
- The like count will change from dark grey to red to indicate if it has been liked by the current user. User can tap on the like count or heart icon in the toolbar below to like the item.
- User can sort reviews by best (most favorited review) or most recent. This brings the most helpful reviews to the top.
- Reviews are tweet-sized (limited to140 characters). This is less intimidating than writing lengthly reviews to invite more users to write reviews.
- The favorite count gives an indication on which review is most helpful. User can tap on the star icon to fav the review. The count turns from grey to yellow to indicate that the user has liked the review.
- The toolbar gives the user three primary actions: write a review, like the item, save the item. Having the buttons in a toolbar gives the user quick access to the actions rather than having to scan the screen for them.
- Share sheet allows users to share a link to a web view of the item.
Tab Bar
- See “Search screen” above.
- Best tab shows the most liked items nearby at different restaurants. User can also search by type of food to see what’s the most liked in the category. This is especially useful when user is not at a specific restaurant but wants to find something good to eat.
- Saved tab shows the items that the user has saved. This allows users to save items when browsing different menus and come back to them later on. It can save time when deciding where to eat.
- Me tab shows the user’s profile which may include items they’ve liked or reviewed.
Other Things to Consider or Design
Registration system: App can start off using Facebook login for its registration, however, user can still access most of the app without signing in.
Submit photo of item: Possibly allow users to tap and hold on the photo on the item page to bring up a photo submission sheet. Creating more friction for this feature is intentional since we do not want submitting photos to be a primary feature.
Menu filters: Allow users to filter a menu by types of food (e.g., appetizers, chicken, beef, seafood, dessert)
Views for Best, Saved and Me tabs: see descriptions above.
Starting screen: Wouldn’t it be cool if the app can detect what restaurant the user is at and automatically opens up with its menu.
App icon: something cool!
Color scheme: The primary color is a little bit lighter than Yelp’s red but maybe a different color should be used to differentiate the product.
Web view for items: Needed to allow people to view items when shared outside the app.
Reservations: Giving users a way to make reservations from the app would be useful.
Tools Used
- Rhodia dot grid notebook for sketching
- Balsamiq for wireframing
- Sketch for hi-def mockups
- InVision for prototyping
- Marvel for prototyping
Prototype
Click here to play with a prototype on your device or browser.
I’m looking for work! If you’re hiring and want to talk to me, you can email me at hello@carlconsing.com. I’d also love to hear any feedback for my designs. You can check out my other work at carlconsing.com and follow me on twitter @cmconsing.
P.S. I’d love a Dribbble invite if anyone has one to give out.
