Mobile app concept
UX/UI , User Research, Journey Mapping, Wireframing, Visual Design
Jun - Jul 2021 ( 3 weeks)
A simple, intuitive and refreshing experience to find 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.
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 behaviours 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
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
3 rounds of design iterations
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 with a change of scenery and the perfect opportunity for socialising.
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 in one platform.
Turning insights into decision drivers
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 organised 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.
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 colour 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 personalised suggestions in the app.
Curated content with strong imagery
Chow appreciates that striking imagery leads to higher engagement levels amongst 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.
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.
Illustrations from @catalyststuff
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 learner 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 colour 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.