Eat Around
Project Overview
Eat Around is a platform built with a mobile-first approach. It offers all the information a traveling food enthusiast needs, combining location-based recommendations and a detailed recipe list.
The goal was to design a fast and easy tool for people that love to discover culinary places around the world. And additionally offering a large library of recipes for everyone to recreate the delicious meals. This project was solely design based in which I took on the role of UX and UI designer.
Challenges
The most challenging part of creating Eat Around was to combine two very large content sections that are usually found as separate applications or platforms.
On one hand, having a location-based recommendation system for the different restaurants and places with a map option and location tracking. And on the other hand including a recipe section for the whole community to browse through and interact with. It was very important to carefully research and build different components to prevent the app from being too complicated and cluttered.
UX
- User Research/Interviews
- User Personas
- User Stories/Flow
- Testing
- Wireframing
UI
- Mood Board
- Interface Design
- Style Guide
- Mockups
Tools Used
- Sketch
- Invision
- Usability Hub
- Unsplash
- Icons8
- Sketch App Sources
Design Process
The design process of Eat Around was structured by the principles of the Design Thinking methodology. Using this iterative process was a great help to focus on a user-centered approach during each step and to optimize the interface through multiple rounds of designing and testing.
Design Thinking
Research Phase
User Research
The first step of the research was to compare already existing applications and platforms in the travel and the cooking niche to get a better understanding of already existing concepts. Looking at the structure, strengths and weaknesses and the design principles used for those applications, I collected and analyzed my findings in a Competitive Analysis.
With that information, I mapped out the general flow for Eat Around and conducted multiple interviews with participants from different countries and backgrounds. The interviews gave me valuable information and insights on travel and cooking habits, preferences and the experience of different restaurants as a traveler. These insights were documented and used to create User Personas as a guideline for the design process.
User Personas
These User Personas are showing an excerpt of the interview’s insights and are mainly focussing on the highlights and pain points of culinary exploration and cooking.
This information was particularly valuable to create an application optimized and adjusted to the user’s needs and to improve pain points of other applications and experiences.
Defining The Flow
To then translate all the gathered information into a practical flow, I created User Stories and User Flow Diagrams. The combined Flow Diagrams of all the different scenarios and features are the structural core and map out all the necessary screens and elements for the application.
User Story 1
As a user, I want to be able to sign up/ login easily and get an understanding of the app’s overall function fast.
Entry Point: Welcome screen
Success Criteria: The user is able to sign up/login without problems and can easily navigate between the two home screens.
Steps:
- Tap Login or Sign up
- Enter information
- Login or Sign up
- Navigate between the two home screens
User Flow 1
User Flow 2
User Flow 3
Creating The Base
First Sketches
The first visualization of the screens was done in rough sketches. Going through the established flow and creating the whole set of Low-Fidelity-Wireframes for all the screens of the application. These excerpts are gathered ideas for the main screens of the app.
Usability Testing
To get feedback on the first, sketched wireframes I went through a round of usability testing, putting the prototyped screens in front of testers. Testing at this early stage helped a lot to find weaknesses of the general structure and flow, before moving on to refining the design.
The test results were analyzed and the pain points optimized. After that I created the refined and more detailed Mid-Fidelity-Wireframes, showing not only the rough structure of the app but the detailed layout of every screen. The first image below shows an excerpt of the usability test results and the second image shows a part of the Mid-Fidelity-Wireframes.
Testresults
| Issue | Error Rating | Solution |
|---|---|---|
|
Unclear how to access the map from
the home screen (by taping places button) |
3 |
Using ‚search‘ instead of ‚places‘ as button description. Use different colors and styles to emphasize the button. |
|
Unclear how to access the recommended place from the map |
2 |
Completing all the connecting paths on the map screen so the recommended place appears when taping on the location, which then turns dark. |
|
Unclear how to use the top bar, confusing saved icon with home icon |
1 |
Completing the connecting paths so the feature can be used. Use proper, recognizable icons. Use different colors that match the icons with different location types on the map. |
|
Unclear how to access directions from recommended place screen |
1 |
Emphasizing the label of the second section of the screen (directions). |
|
Unclear how to find a specific recipe, not wanting to go through the entire list to find one specific recipe |
1 |
Referring back to the saved recipe section or including the search field to type in name of a recipe if known. |
|
Trying to tap other recipes and places |
3 |
Prototype issue. Completing the connecting paths so all options shown are available to be taped. |
Mid-Fidelity-Wireframes
Visual Design
Mood Board
In this third main phase, the visual design (UI) phase I started setting the tone for Eat Around by creating a mood board. The mood board was used as a reference for color choice, fonts, design elements and the overall feeling of the design.
AB Testing
During the process of applying design choices and moving from a plain wireframe to the actual visual design, I used the method of AB testing. When having different design solutions for a screen or an element, participants were shown both versions and asked to choose. That way I was able to gather feedback from multiple sources to make an appropriate design choice.
Winner
70% of the testers preferred this design
30% of the testers preferred this design.
Home Screens
The main challenge for the visual design was to separate both sections of the app but still maintaining a cohesive feeling and theme.
To do that I used two complementary colors as main colors for the travel and the recipe section, as well as creating different icons with the same style to represent each section. The home area of the application is separated into two home screens, one for each theme of the app.
Search Options
To guarantee easy navigation through both sections of the app, the search functions for culinary places and recipes have the same structure. When looking for restaurants on the go, users can put in their search criteria and find a recommended place on the map. Choosing a restaurant takes the user to the information screen of that place. To look up a recipe, the user follows the same flow, putting in search criteria which unlocks a list of recommended recipes and after choosing one, leads to the information page of that recipe.
Finished Design
These mockups show some of the finished mobile screens in action as well as the responsive design for tablet and desktop format.
