Omnom App
Local food exploration case study
But I don’t want to eat a burger. I could eat a burger anywhere. I want to taste something local. How can I find it? We’ve been walking for about two hours now. I wish it were easier.
I remember this conversation with a friend of mine some time ago. It was my friend’s idea — I’ll make an app to explore local food; it should be easier to learn more about the local cuisine while traveling.
George is а 30-year-old developer who travels a lot. He loves cooking, follows many food blogs, and is curious about tasting local food everywhere he goes. When my friend is abroad, he can’t find user reviews for specific local meals and their preparation in place. The last time he was in Thailand, he wanted to find locally prepared Tom Yum Soup, but he spent more than an hour roaming around the town and only found some pizza stands.
He asked me to help him with the design, and my role was to create the overall User Experience, including the UI, from the beginning to the end.
Let’s save some time for George and help him experience a seamless and joyful journey every time he goes abroad.
Kick-off!
Gaining empathy
My starting point was to try and learn more about the emotions and motivation while traveling, to gain empathy, and understand the entirety of the experience through secondary user research. I found some interesting facts and details about the psychological impact of traveling on human behavior.
After reading many articles, I pinned some of the most exciting chunks I found.
Then I moved forward and surveyed potential users. It included nine simple questions and 48 participants. The questionnaire helped me gain more quantitative data about the travel experience to build a solid foundation for the further steps of the process.
To observe and collect information directly from the context of the problem, I stepped forward, talking with users about their experiences.
Survey
I started with questions that provided crucial demographic information. The demographic data was helpful when I started developing the personas.
The most exciting part began when the clear patterns started to emerge. When I started sharing the questionnaire, I picked people who loved traveling and did it a lot. I intended to filter the audience early in my research as I was limited by time and couldn’t afford to invest much of it for larger-scale findings.
The results drew a clear picture of my personas. As it is most affordable for people from Bulgaria, Macedonia, England, and Portugal, nearly all travel mainly across Europe. They ate in local restaurants, most of which spent between €200 and €600.
Interviews
To tackle the issue directly, I talked with users about their experiences.
Conducting interviews with different people presented a chance to dig deeper, gain quantitative and qualitative data and gain a more in-depth perspective on the user attitude and experience.
Insights Discovery
At first, I didn’t have a clear view of the user goals and motivation. After taking notes of their experiences, I could sum up the primary user pain points and order them in terms of priority.
Who am I designing for?
Based on the data I collected, I created representations of two primary user types. The personas did not depict specific people but synthesized versions of the observations and analyses of all the people who took part in the survey and the user interviews.
Empathy Mapping
To visualize the user’s needs and behaviors, I created empathy maps. They helped bridge the gap between the personas’ thinking and feeling habits.
Competitive Analysis
Being competitive in an already mature market was not easy. We wanted to build something simple and valuable. I focused on what was missing from the existing apps. I tried to avoid overlapping their features.
I continued the discovery phase with a usability heuristic analysis. I used Norman & Nielsen’s rules of thumb for good interaction design to learn more about competitors and understand where their strengths and weaknesses lay.
The following usability analysis focused on apps with similar features that helped users explore the best places to eat when traveling abroad.
Heuristic Evaluation
I selected the following areas as most important for the evaluation:
- Searching
- Exploring user rates
- Venues exploration
- Adding new rating
The evaluation considers different NNG usability heuristic principles that apply to the selected areas and overall experience.
Ranking system throughout the evaluation process.
I ranked each of the findings according to the five-stage progression as follows:
- Positive — Results in a beneficial effect on the user’s ability to perform their given task
- Cosmetic Issue — Affects the appearance and should be fixed only if time permits.
- Minor Issue — This hinders the user’s navigation ability and should be set when possible.
- Major Issue — Frustrates or confuses users and requires repair as soon as possible.
- Catastrophic Issue — Prohibits users from performing their given task and requires immediate modification.
TripAdvisor
TripAdvisor, the world’s largest travel site, enables travelers to unleash the full potential of every trip. With over 600 million reviews and opinions covering the world’s largest selection of travel listings worldwide — covering approximately 7.5 million accommodations, airlines, attractions, and restaurants — TripAdvisor provides travelers with the wisdom of the crowds to help them decide where to stay, how to fly, what to do and where to eat. TripAdvisor also compares prices from more than 200 hotel booking sites so travelers can find the lowest price on the hotel that’s right for them.
Positive Findings:
- Flexibility and efficiency of use — A clear and straightforward search screen where a user could easily search for a specific venue or location and see recent searches or suggestions.
Negative Findings:
- User control and freedom — I have a strange profile photo set and cannot change it or upload a new image. — Major issue
- Aesthetic and minimalist design — Too many colored details match the links’ look but don’t lead to anything after tapping. — Major issue
- Aesthetic and minimalist design — Too many typography styles increase the cognitive load. — Cosmetic Issue
- Recognition rather than recall — “Write a Review” button is not prominent enough and looks similar to less critical features. — Major issue
- Flexibility and efficiency of use — Too many features that look the same in the app’s information hierarchy increase the interaction cost for novice users. — Minor issue
Foursquare
The Foursquare City Guide app helps you discover new places with recommendations from a community you trust. Over 50 million people use Foursquare City Guide and Foursquare Swarm each month across desktop, mobile web, and mobile apps.
Positive Findings:
- Aesthetic and minimalist design — Clean & simple home screen.
- Aesthetic and minimalist design — Consistent graphics and colors.
- Recognition rather than recall — A single bold CTA floating button for writing a review leaves no room for distraction.
Negative Findings:
- Aesthetic and minimalist design — Too many colors and graphics on the search screen increase cognitive load. — Major issue
- Flexibility and efficiency of use — Too many features that look the same in the app’s information hierarchy increase the interaction cost for novice users. — Minor issue
Eatwith
Eatwith helps to explore the social eating experience that is right for you. It is the world’s largest community for authentic food experiences with locals in over 130 countries.
Positive Findings:
- Aesthetic and minimalist design — Clean & simple home screen.
- Aesthetic and minimalist design — Consistent graphics and colors.
- Flexibility and efficiency of use — Small number of features and options keep the overall experience straightforward for novice users.
Negative Findings:
- Recognition rather than recall — Unclear information architecture hierarchy for listing important information. Emphasizing photos instead of more important visual elements. — Cosmetic Issue
Reframing the problem assumption
I started the project with a solution in mind, but the research and the competitive analysis finding changed the direction of the process. I went for quantity rather than quality. I did a brainstorming session in which I listed all of the assumptions, and at this stage, I considered only the ones that were relevant to the findings.
I liked the jobs-to-be-done approach, so I chose to populate the sheet with user needs as a situation, motivation, and the expected outcome in the form of a list.
Content strategy
After reshaping my assumption about the best solution, I needed to map the experience and spend some time forming the app’s information architecture. The personas and job stories summary helped me gradually clarify the overall look and feel. Resorting to card sorting was the best way to find out how to organize the sections, and the user flows.
Card sorting
Based on my list of job stories, I wrote 24 tasks and was really careful about the sentence structure and the verbs I used. I wanted to avoid creating repetitive tasks that might affect the users’ decisions and ruin the groupings.
Mapping the experience
Several classifications ran through each user group. The card sorting results led to the formation of the search, map, meals, and settings as the main sections of the app.
With the card sorting results in mind, I created a basic map of the product, drawing a simple structure of my solution.
Usability testing
Hey, thank you for your time. I appreciate it! I told you about the app I’m working on, and now I need to test a prototype with you. It won’t take much time; I want to see if the app is working as I intended. I’ll ask you to complete just three tasks, and that’s all.
Prototype
So let’s say you’re in Rome and just ate the most delicious pizza ever. You want to rate the meal using the app. How would you do it?
Now imagine you want to know if the meal you are going to try if it’s too spicy? How would you verify this information?
The last one is straightforward. If you plan a trip to France next month and you need to discover up to three traditional meals, how would you find and save them?
After you bookmarked them, where do you expect to see the list with your bookmarks?
Thank you very much! You helped me a lot! It is essential for me to receive feedback early on and to try to validate my assumptions. Take a beer! Or Toblerone?
Summary
My primary goal was to validate whether the users understood the idea and whether the service was meaningful. The notion might have initially excited me, so I needed to test if my assumptions were correct.
Goals
- Could the users find a way to rate a meal?
- Was the Meal screen features easy to find?
- Was the Bookmark feature easy to use?
- Was the “Review” flow a seamless and straightforward experience?
- Were all the flow steps clear?
- Were four steps too many?
- Was it easy for the users to return when they went to the wrong screen?
- To look for unexpected behavior.
- Be careful about nonverbal signs.
Outcome
- All participants found the “Write a review” CTA button.
- All participants passed the first three steps from the “Rate” flow.
- Most of the users were confused about the fourth step.
- They were puzzled about what the venue pin meant.
- They spent a lot of time on that screen, and if I were not there to assist them, they would most likely give up.
- Nearly half of the participants found out the meal recipe quickly.
- The other half were misled by the icon and named it a “menu icon.”
- One participant said — “When I don’t know what to do, I always click on the dots.”
- Nearly all participants learned how to bookmark a meal and where to check the list afterward.
- Most of them went directly to the significant search field in the middle.
- Some of them said that four steps were too many for them.
- They all tried to swipe left or right on the first step from the “Rate” flow.
- One participant started scratching her head when she landed on the fourth step of the flow.
- None of them knew what the “locate on map” icon meant.
Next steps
After I analyzed the results, I moved forward and created a more detailed, high-fidelity prototype, fixing the initial problems.
Validating hypothesis
Trade-offs
It was not an easy task. I had to go back and forth many times as the process was not linear. I didn’t find the single best decision as there were many solutions to the uncovered problems. I strived to tackle the challenges by relying on real users’ feedback through usability testing.
Reshaping the MVP scope
- Four-step review flow was too long. Three steps were better. The extra details from the last step would be linked to an “add more details” button.
- No venues. Nobody cared about the places where the meals were prepared.
- No recipe. “Will you start writing about the ingredients of a recipe when you’re in a restaurant? I won’t.” All of the users thought the same thing.
- No comments. Sometimes someone might want to leave an angry comment about something, but I decided to use a 1/10 rate scale system for the first version.
- No filters.
- No upvote or downvote. Unsure of how the users would use the app, I chose to test that feature at a later stage.
- The map should be more prominent. I would place it at the bottom navigation.
- The search should be even more apparent. The search input field would be in the center of the home screen.
- “Rate” was too specific and unclear. The “write a review” CTA button switched to a “Did you like it?” button.
- I removed “Show all” below every home screen section. I needed something more descriptive about those buttons.
User Interface
Colors
I strived for a clean and straightforward style as possible and prominent call-to-action buttons and links, so I picked a light grey color as a background and nearly black for the text. In some places, I need to highlight minor details, but as the red accent is too much, I included one slightly darker grey option in the scheme.
Layout
To keep consistency across all screens, I strictly followed a custom grid layout so I could quickly build new pages with the same feeling and similar structure. All elements lie on 25 columns, and each of them is 15pt wide. I believe this is the best column width, so the design doesn’t feel too bold but keeps a specific style.
Vertical rhythm
The vertical rhythm is just as important as the grid layout, so I carefully picked the right size to build the typography structure on it. The Body Text style lies on a 24pt-high-baseline, but as using 24pt or 12pt for the vertical rhythm baseline height would make the look too bold and rough, I decided 6pt is a better option.
Typography
I included nine styles in the following type scale to present the content, meals, and rates as clearly and efficiently as possible. The bright green bar marks the leading, and the light grey lines in the background show the 6pt vertical rhythm.
It contains reusable categories of text, each with an intended application and meaning.
Iconography
I wouldn’t be able to create a consistent and seamless experience without the right set of icons. I needed just a small number of symbols, so I decided to draw them myself. By building visually distinct icons, I tried to communicate the core idea and intent of the app in a simple, bold, and friendly way.
They are all built on 4pt wide stroke and have no rounded corners. I followed the Font Face style as strictly as possible to maintain consistency.
