Mobile app concept
Chow
Contributions
UX/UI , User Research, Journey Mapping, Wireframing, Visual Design
Timeline
Jun - Jul 2021 ( 3 weeks)
A simple, intuitive, and refreshing experience to find new places to eat in town
What is Chow?
Chow is a food exploring platform that curates the best places to eat and drink in the city that users can easily find without navigating through different platforms.
They are also able to save their preferences to get a personalised experience and easily refer to them at a later time.
The problem
After I conducted some user surveys during the Discovery phase I uncovered that the majority of users doesn’t have a defined platform when looking for food places. The process of finding a place is somewhat scattered across different platforms, namely, Google and different social media apps.
The majority of users has a hard time deciding where to eat since some restaurants don’t have an updated menu and the images available online have really low quality.
How might we create a meaningful experience for people who are looking for places to eat?
What are the goals?
The primary goal was to design a streamlined mobile experience for Chow to get inspired and search for places to eat.
Eating can be a very visual experience for humans, the increased anticipation built up from interacting with a clean aesthetic and immersive images makes the experience way much more enjoyable.
This translates to a design solution that provides an intuitive and engaging experience for users.
Tackling the problem
At the start of the project, I came up with research questions that could guide my design process.
1. What are the common user behaviors and experiences with tasks that users experience around searching for food places?
2. What would users want to know when doing their research?
3. How are users currently navigating through their frustrations in order to reach their desired outcome?
Obtaining data from a selected group of users to probe their attitudes and preferences
User Interviews
Analyzing current solutions around helping users find places to eat and accessing strenghts and weaknesses of these solutions.
Analysing current solutions around helping users find places to eat and accessing strengths and weaknesses of these solutions
User testing on low, mid and high fidelity screens for direct input on how users use the application
User Surveys
Competitive analysis
3 rounds of design iterations
Turning research insights into decision drivers
💡 Insights
The majority of users saves eating out for special occasions
Dining out is more of a treat for users, Users feel that it removes the stress of preparing homecooked meals and provides a change of scenery and the perfect opportunity for socializing.
Menu and value for money matter the most when deciding where to eat
79% of users needed to see the menu before deciding where to go, this included prices, detailed descriptions, and images.
Going through different platforms to get information is frustrating
The majority of users get their recommendations from social media (38.2%) and google searches (29.4%).
They would prefer to have all the important information on one platform.
⚙️ New changes
Create curated lists of places to go depending on the occasion
Encourage users to explore new places by providing them with a list of great eating spots organized by the occasion, type of cuisine, or price range. Give users the option to create their own lists based on their preferences
Create detailed information page
Make information pages scannable so users can see the information that matters the most to them quickly.
Get everything in one place
Provide users with detailed information about the place so that they can make an informed decision without the need to dig deeper in other platforms
Mapping the experience
I mapped out potential user flows to get an eagle’s eye view of the app and get the experience right. I also used affinity mapping to organize the ideas and define the key features of the app.
Sketching and wireframing to get to a solution
To get high-level design ideas without thinking too much about the design patterns I quickly sketched a few wireframes. This helped me determine where the important features would fit in, it also helped me work out the overall information architecture of each screen.
These are a few things I had into consideration while doing the first wireframes:
-
Allowed sufficient space around images so they can remain the focus of attention
-
Using curvature in important elements such as buttons and images to put more focus on the content inside the container, also makes the UI more inviting and user-friendly.
-
Work on different placements for content and UI elements, to later test them with users.
Getting feedback
I went on to test my wireframes with users to gather important feedback to reduce usability flaws before I moved on to high fidelity wireframes.
I quickly made a prototype and tested some task flows with 35 users remotely, at the end they provided me with their feedback.
The tasks had an average of 85% completion rate.
The menu icons and text are confusing, I’m not sure where the explore and Wishlist buttons are suppose to take me to.
I don't know what ‘inspire me’ is suppose to do
It would be better if search filters where better organised because there are just so many options
Reconsider navigation menu
Design iteration: rethink the copy and iconography of the navigation menu, users need to know what each button represents as soon as they see them
Work on app copy
Design iteration: make information pages scannable so users can see the information that matters the most to them quickly.
Add icons to filters
Design iteration: add icons to filters for easier recollection, only show most used filters and have option to show more to not overwhelm user
Accessibility and final design features
-
UI elements that share the same functionality are consistent, this helps people with difficulty reading and achieves a more predictable experience.
-
I made sure the designs met Web Content Accessibility Guidelines and World Wide Web Consortium (W3C) accessibility standards by ensuring that all contrast ratios met AA and AAA color standards.
Getting started and personalising the experience
The onboarding helps users understand the purpose of the app and
To reduce new user registration fatigue, the app gives the option to sign up with social media platforms in just one click
Option to pick interests in order to get personalized suggestions in the app.
Curated content with strong imagery
Chow appreciates that striking imagery leads to higher engagement levels among users. People who love to eat out are easily inspired by beautiful pictures of potential dining activities.
The information architecture helps the platform to be perceived as trustworthy and valuable. It aims to quickly give specific audiences what they are looking for the more they interact with the platform.
Custom Search
Looking for a place to eat or simply looking for inspiration is made easy.
Chow allows users to customize their search by providing meaningful filters. It also gives suggestions so that they can find exactly what they are looking for, this reduces user frustration and possible bounce rates.
Visual styles and components
As wireframes gained fidelity, I established a visual system for Chow, including visual language and UI elements.
This system increased efficiency during the iteration of high-fidelity designs and helped maintain consistency across the platform resulting in a cleaner design.
I took care to allow the system to be somewhat flexible while I worked around the structure and content of the project.
 |  |  |
|---|---|---|
 |  |  |
Learnings and next steps
While designing Chow, I learned that the first ideas for the app are only the starting point of the process and that the whole creative process of app design is a journey. Usability tests and peer feedback influenced each iteration of the app and helped me make better-informed design decisions.
The most challenging part of the whole process was designing the design systems, I spent a lot of time working on the grids and color scheme.
Moving forward I would like to conduct another round of usability testing on the final wireframes to validate whether the pain points my users experienced have been fully resolved.