FoodFriends

UX/UI Case Study

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.

The Research

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.

Making friends by sharing meals turns a meetup into a more relaxed set-up.
Most people are not quite extroverted enough to be willing to share a dinner with complete strangers.
Big groups make it difficult for everyone to engage.
Event organisers have a strong motivation to meet new people.
Event participants want to set preferences so they have a personalised experience of sharing meals.
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

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

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.

UI Design

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.