Wenjing Xie
UX designer

FoodFriends

UX/UI Case Study

Image alt tag

First, let me introduce you to FoodFriends :)

Foodfriends is a mobile app and a platform that helps people to create great eating experiences.

It lets the users discover terrific locations to eat, find some nice people and meetup over meals.

What was FoodFriends designed for?

Our social life has been moved to digital platforms so that we now share food pictures and “likes” - instead of sharing our table and having conversations with others while dining.

In 2019, 70% of New Zealanders eat dinner in front of the TV at least once a week; 35% do so daily. A British survey reveals a quarter of people think a cell phone is a suitable substitute for the real company when dining out. 

Nothing binds us together like food. Even the word ‘companion’ comes from Latin and means ‘with bread’. The goal of this project was to design a digital solution to bring people, both friends and strangers, to the same table and make connections through the sharing of meals and conversation.

Target Audience

  • The app targets people ages 18-35 who are travelling, studying abroad, or have just moved to a new place.

  • People who want to discover the social dining experience.

  • People who want to hang out with their friends and have a unique dining experience.

Target Outcome

  • Match users with similar interests and dining preferences.

  • Help introduce users to new friends over a classy meal.

  • Enable users to search, browse, match, and share.

  • Provide users with a rewarding social experience.

Target Actions

  • Sign up and build the profile.

  • Browse events and find people with similar interests and preferences.

  • Share events with friends.

  • Make connections with new people and break the ice.

  • Repeat usage.

My Role

User Research, UX/UI Design, Prototyping, Usability Testing

Timeline

4 weeks (Jan - Feb 2021)

Tools

Miro, Figma, Adobe Illustrator, Pen and Paper

The Research

Desk Research Counts

I took a different approach of conducting desk research only for this project which involved understanding, analysing and synthesising insights from pre-existing sources like research papers, journals, blogs, articles, etc.

It was a good way of starting out, especially when the focus of my research was new or unexplored to the New Zealand market. 

Also, I had a tight timeline for this uni project, desk research took relatively less time, which was an advantage. I was aware that the insights gathered were subject to the data and could be limited and biased.

Formulated the Research Questions

I listed the key questions I wanted to find out from the research and opened 100+ tabs on my computer looking for the answers:

  • What should be considered when motivating users to dine with strangers?

  • What are the users' goals?

  • What are the current problems with existing platforms?

  • What is the onboarding process?

  • What is the proper way to match the users?

  • How to collect users' information for the match?

  • How to help users break the ice?

  • What is the best way to collect user feedback after the match?

Insights

Through research on the current social dining landscape, I have found the problems of existing platforms.

I defined two types of users, the event organiser, and the event participant, as well as their primary goals and pain points.

Insight #1

Making friends by sharing meals turns a meetup into a more relaxed set-up.

Insight # 2

Most people are not quite extroverted enough to be willing to share a dinner with complete strangers.

Insight #3

Big groups make it difficult for everyone to engage.

Insight #4

Event organisers have a strong motivation to meet new people.

Insight #5

Event participants want to set preferences so they have a personalised experience of sharing meals.

Insight #6

Food quality is an important part of the meetup event.

“If you have a bunch of people sitting around a table in a conference room it can feel tense and unnatural – but if you put food on that table and it becomes a meal, it goes from being a meeting to a more relaxed set-up.”
Julia Turshen, chef and author

Competitive Analysis

The goal of doing competitive analysis was to identify problems and possible solutions to defining market opportunities and how to structure the overall strategy.

I began with those questions:

  • Who is currently trying to solve this problem?

  • How are they trying to solve the problem?

  • What is the main uniqueness of the business and products?

Meetup is a platform for finding and building local communities. People use Meetup to meet new people, learn new things, and find support.

Eatwith enables users to have the sharing table experience at a local host’s home, and a gorgeous authentic meal, over 110 countries and cities.

Facebook Event can be created by any Facebook user for free.

“It’s really hard to make connections in a big city, especially if you’re single.”
Kerstin Rodgers, chef and political activist
UX/UI Case Study

Proto-Personas - boost empathy

The very first step in building empathy is gathering information and insights about the users. When it comes to making personas, I am concerned about getting them wrong, because they are data-driven and require extensive research.

Proto-personas are like a quicker, more lightweight version of personas. Instead of new research, they are based on existing assumptions.  

I followed these steps:

  1. Collect ideas and information about the users.

  2. Cluster up all the information.

  3. Humanise the proto-personas.

  4. Clean up the information into easily-understood visuals.

I visualised the event organiser as a beer person who loves social, and the event participant as a sushi girl, who’s new to the city and a bit shy.

Proto-personas helped me to create “fictional” characters that represent real users to build an understanding of their needs and the goals they want to achieve.

The Solution

What should the solution look like?

When I told everyone I was working on this project, they were asking “Hmm, what kind of people would like to dine with strangers? Why would they do so?” — The solution should be able to answer these questions. The purpose of the design process was to create a context that drives action and a good user experience.

How do I know if the design is successful?

  • Set the trigger of meeting new people.

  • Did I “cheat”? - apply default settings and automation.

  • Ease to use - make the process easy and smooth.

  • Be playful - the overall feeling should be young and active.

User Flows - building a flow with users in mind

User flows can make both designer's and users’ lives easier. Based on my research, event organisers have a stronger motivation to meet new people.

My focus here was to design a smooth flow for event participants so that they could be matched with people and connected over a shared meal. When I was mapping out the user flows, I thought about how the user would navigate through the app to achieve their goals so that I could design the screens in a productive way.

Primary User Stories:

  • As an event participant, I want to browse the event, so that I can choose from them and meet my FoodFriends.

  • As an event participant, I want to set my matching preferences, so that I can have a personalised experience of sharing meals.

Following the primary user stories, I created the high-level user flows. It gave an overview of each stage of the user’s process.

High-lever User Flows of both event organisers and event participants

High-lever User Flows of both event organisers and event participants

Wireframes

At the beginning of the design process, I created wireframes for gathering feedback from fellow classmates and the lecturer. The purpose was to test the user flow and reveal possible usability problems.

Some suggestions I got from them and I implemented in the design phase:

  • UX writing matters!

  • Apply default settings and add a placeholder for text input.

  • Give context about why certain information has been asked.

UI Design
UX/UI Case Study

Visual Language

Here comes to the juicy part- the design!

The target audience is the younger generation, and meetups over a shared meal should be fun and exciting. The goal of successfully designed visual elements should help create this unique experience and feeling for the users. 

Also, a strong visual language creates a personality for a digital product. A personality gives the product its own identity and allows it to be recognised in the overcrowded market.

Branding - the Logo

I changed the brand name from Eaterly (in the assignment brief) to FoodFriends. The name itself could explain what this platform is about. I decided to make a logotype and also use it as the app logo. 

I’ve tested different fonts and the one I chose was Lapsus Pro (it’s free for commercial use).

The smiling face logo was inspired by one of the very first emoticons :-)

Colour

I wanted to use colour for clear communication and minimise the number of colours used. The primary green and accent orange worked well together. The use of accent orange helped bring attention and build visual hierarchy. Most importantly, I checked the contrast ratio of the colours at the beginning of the design phase and they met the requirements of the Web Content Accessibility Guidelines (WCAG) 2.1.

Typeface

Poppins is a geometric sans serif typeface and it’s popular in digital product design. Each letterform being nearly monolinear gives it a rounded and cute look.  I’ve chosen Poppins to align with the tone, messaging, and branding of FoodFriends. I ensured sufficient contrast between the text and the background. I also considered spacing and weight to increase readability.

UI Components
User Testing

Insights

I really enjoyed conducting user testing. It's the path to users' heart.

Insight #1

Don't design against the user's mental model.

I designed a vertical slider, and it was very confusing.

(see User Testing Suggestion 1)

Insight #2

The onboarding process was fun and clear.

The illustrations and short descriptions helped onboard users well.

Insight #3

UX writing matters. The tone and voice are important.

This is something I really need to improve as a second language learner.

Insight #4

Users expect fewer clicks when completing a task.

Users expected the task to be completed with one click

(see User Testing Suggestion 2)

User Testing Suggestion 1

User Testing Suggestion 1

User Testing Suggestion 2

User Testing Suggestion 2

This is the exciting bit, isn't it?

How do I help users break the ice?

I've suggested some fun icebreaker questions and received positive feedback from some participants.

This feature needs more further testing with users.

Figma Prototype

Retrospective

This uni project marked my first 6 months of a complete career transformation. As someone who had 0 design background, it was an overwhelming journey, but still incredibly fun.

A well-known design quote says “Design isn’t finished until somebody is using it.” However, there is no ending point of a UX design. I need to embrace imperfection and work within the constraints. Time is always limited, so is the resource. I wish I had more time to try different research and mapping methods, and there is so much to explore towards design for behaviour change, which I haven’t covered much in this project.

In terms of the design part, I worked in an organised manner in Figma this time. I’ve applied the Atomic Design Methodology and had a clean canvas. It was efficient and satisfying. The user testing feedback was positive and people enjoyed using this app.

1
Baby Designer
8
Usability Tests
4
Iterations
100
Hours
"It takes 10,000 hours to master something, but the first 100 hours can help."
Felix Shin, chef and UX designer

Thank you for reading :)