Mobile app concept

Chow

Contributions

UX/UI , User Research, Journey Mapping, Wireframing, Visual Design

Timeline

Jun - Jul 2021 ( 3 weeks)

Hero image (3) (1).png
A simple, intuitive and refreshing experience to find places to eat in town
Sub image hero.png

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 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

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

Research 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 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.

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

Design Iterations

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.

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.

Final screens

Mobile screen mockups
Article Page
Restaurant images
Onboarding screens
Restaurant Information screens

Illustrations from @catalyststuff

Visual styles header.png

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.

CHOW STYLE GUIDE (2)
Image (7)
Image (2)
Image (3)
Image (5)
Image (4)

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.