As a major food lover, about 60% of my mobile applications have something to do with food - finding restaurants, booking a table, recipe apps and so on. So Foodspotting, naturally, has a place in my lineup. As a user, I like the simple interface, but as a designer I noticed an opportunity to create a smoother flow to improve the UX.
The images below feature the app as it is now.
HIGH FIDELITY MOCKS
The following galleries outline and display the main interactions from the Home Screen.
The Home Screen can be refreshed by swiping down in a dragging motion (like Yelp's mobile app refresh). If there are more updated dishes, the screens will scroll right to accommodate the newer additions. Users can swipe left to scroll through suggested dishes.
The user will be able to mark the dish as “want to try” (star), “tried” (check mark), and “liked” (heart) with the buttons at the top of every main image.
When the user taps the main image, the About Dish module appears over the Home screen. Icons will indicate if the dish is spicy, vegetarian, etc. Comments appear below that & more images of the dish appear below the comments. When the user taps the “Write a comment” button, a text box appears with a character limit of 120 and a keyboard slides up. To enter the comment, the user taps “Go”.
The restaurant page slides in from the right when the user taps the restaurant name from the Home screen. To return to the Home screen the user will swipe right. The restaurant page will show the location on a map, the address (tapable & opens Apple maps), the phone number (tapable to call), and a link to the Yelp page which will open the Yelp app when tapped. More images of dishes from the restaurant will also appear below.
The consistent module at the bottom of the screen contains a Network button, a Spotted button, and a Profile button. When the Network button is tapped, the user will see the actions of the people in their network. When the Spotted button is tapped, the Home page will be accessed. When the user taps the Profile button, the user will see his/her actions.
When the Spotted button is held, the button will animate so that the smaller circle rotates clockwise to the 1 o’clock location and three new buttons appear: take a picture, create a post, and write a comment.