top of page

Foodie App

Date: June 2023

Duration: 3 months

Team: Independent project

Screenshot 2024-04-08 at 16.08.25 (2).png

Tools: Figma, Zeplin, Miro, Mobbin, WebAIM, Lookback

Iphone 14 - 1 (1).png

Project Overview

Foodie is an app that connects you to places to eat. This platform makes it easier to build restaurant lists, share with friends and discover new places.

Project Overview

Problem Statement

Restaurant lists or places to eat are always out of date with recommendations and we tend to research on social media for reviews or go with recommendations from friends.

I realised that I had trouble keeping track of any recommendations I received or having a place to share lists and organise them in an effective way. When I got recommendations I often try to keep them on a notes app, however I was unable to categorise them and eventually I would just end up relying on my memory. I think that designing an app that would solve this problem can be a fantastic solution to enhance people's methods of building restaurant lists.

Challenges

  1. An app to help connect people with new restaurants and places their friends or people around them are visiting.

  2. An app that helps with building lists of restaurants that can be saved easily and in one place.

Design Process

To find the best solution, I focused on the Design Thinking approach for solving this problem. Following the order of emphasise (research), ideation, prototyping, testing, and iteration.

Research Phase

For this research, I used a mixture of quantitative and qualitative methods to understand how users used restaurant apps. I created surveys and in-depth interviews to better understand the tools available in the current market, the user behaviours and the user needs.

The goal was to understand how the participants use digital tools to discover and keep track of restaurants, focusing on their methods of list building and organisation.

Research Questions:

  • What are the primary needs and motivations driving users to digitally explore restaurants?

  • How do users behave in terms of discovering, organising, and tracking restaurants using digital tools?

Ideation
Key Findings

I interviewed 5 participants who used restaurant list building apps frequently (at least once a week), focusing on the digital tools they used, their restaurant list building tool and most useful features.​

Screenshot 2024-04-23 at 23.24.56.png

I sorted out the qualitative research from the participants into an affinity map.

Competitive Analysis

To further understand what users are looking for, and also what is already available on the market, I compared the main competitors in the restaurant app space, looking at their key features to see the strengths and weaknesses and how I can use this to solve any pain points in my app. This competitor analysis looks at direct and indirect competitors, I think that looking at both restaurant-specific and list building apps is a good way to understand the features users interact with and look for.

 

Findings:

Yelp, Zomato, and FourSquare offer personalised recommendations, images, and integrated social sharing. They emphasise collaborative list-building and incorporate navigation and user-generated content.

 

Google Maps focuses on navigation and maps integration, while Google Docs and Apple Notes, are not tailored for restaurant recommendations, and they offer basic note or document formats. To design an effective restaurant app, it's crucial to prioritise personalised experiences, social sharing, collaboration, and navigation features.

Screenshot 2023-08-22 at 18.31.55 (2).png
Constraints: Reviewing Scope of the Project

At this stage of the project, I realised the scope of the project, and rather take on too many features it would be best to focus on features for restaurant list building as opposed to personalised recommendations and user generated content.

Case Study - Google Maps

To focus my research more towards building restaurant lists, I wanted to take a further look into Google Maps, and there are a combination of maps and list features I think would be interesting for the Foodie app. 

Frame 5 (2) (1).png
Key points

Pros:

  • customisation and personalisation aspect - where the user can create lists that reflect a certain event or general mood

 

Cons:

  • 3 items or places on one page makes it difficult to see an overview of your list - it would be a pain point for the user to keep scrolling to get through to the end of the list.

Other thoughts:

  • Giving more options such as exporting as different formats may also be a useful way of sharing lists.

  • continuity within the design, as it follows the same theme and colours is great - however not particularly exciting to use - I think for an app specialising in restaurant list-building, it will require more colour.

Case Study - Apple Notes App

IMG_7084.PNG

After looking at the features in the Apple notes app, which is more specific to list building and creation, there are some features to highlight.

  • easy to view interface - it is simple fufilling the basic functions of having a list

  • an option that allows you to tick off and mark rows.

  • toolbox at the bottom allows you to draw, add images, add a table and edit the colour and size of the font - creates a more personal aspect that I will consider adding into my final design, with a more "scrapbook" feel.

User Personas

The app will target young professionals and see how I can address these goals and needs. Creating a persona has allowed me to explore these different use cases of the app. 

Angelina

image.png

Age: 28
Gender: Female
Occupation: Marketing Professional
Location: New York City

Angelina is a 25-year-old marketing professional who recently relocated to a vibrant city. Her unwavering passion for food and her curiosity drive her to explore restaurants in the city.

She uses her phone daily and would like to find a way to easily organise her lists.

Goals and Needs:​

  1. Easily organise restaurants by cuisine, ambiance, and personal ratings to streamline decision-making.

  2. Discover diverse cuisines from around the world effortlessly through the app.

  3. Archive and categorise recommendations from various sources with ease for quick reference.

  4. Curate lists tailored to special occasions like celebrations or romantic dinners.

  5. Share dining experiences on social media with photos

  6. Quickly locate nearby cafes for coffee or brunch outings.

Challenges:

  • Angelina, as someone new to the city, finds it difficult to catalogue her restaurant excursions and recommendations.

  • Balancing her demanding work commitments with her exploration into new places to eat is difficult.

  • Wants to find a way to note down restaurants for different occasions

  • Also needs to save restaurants for potential client lunches and dinners

How the App Can Potentially Address Angelina's Needs:

  1. Personalised Lists: Users can create lists of restaurants, categorising and labelling them based on cuisine and ambience.

  2. Easy Recommendation Saving: Save and tag recommendations from various sources for quick access to suggested restaurants.

  3. Occasion-Based Collections: Create lists for different occasions to have suitable restaurant options for celebrations and gatherings.

  4. Visual Social Sharing: Share dining experiences on social media with enhanced visuals.

  5. Quick Bite Locator: Real-time map guides users to nearby restaurants for quick meals between commitments.

Concept to Low Fidelity

Screenshot 2024-04-29 at 15.09.17 (2).png

To analyse my research, I used affinity mapping to organise and put together ideas. Moving from feature prioritisation to paper sketches (using a design sprint method of Crazy 8's) to digital low fidelity prototypes, to test and iterate.​

Feature Prioritisation

I picked out some possible key features to work with:

  • Note taking style - users want a notes app style, and easy to use interface

  • Collaborative Lists - users want to be able to share recommendations and collaborate but also privately 

  • Multi-Criteria Filtering - This is important as users want to be able to organise their lists and find the restaurants easily

I put together this board on Miro to organise my research and use it for the first designs and low fidelity prototypes.

 

Link to board here

Prototyping
Usability Testing

Prototyping

Upon testing the flow in-person, there were 2 ways to go to lists and this was confusing for the user. Therefore in my usability study, I have solved this issue by changing the user flow for the main/home page as "Your Lists".

Foodie App - Research - Frame 1 (1).jpg
Foodie Prototype (1).jpg
Foodie Prototype 2.jpg
Foodie Prototype 3.jpg

First Low Fidelity Prototype

Styling Guide

For the colour selection I studied several food related apps to see their colours and what could impact appetite.

I went with warmer colours with the intention of the app to be inviting and fun for users.

Link to Styling Guide

Foodie Logo.png

I used canva to explore possible logos for the Foodie App. I have chosen this as I think it would go well with representing what foodie is about.

Frame 18.jpg

High-Fidelity Mock Up 

Screenshot 2024-04-29 at 13.08.49 (2).png

First high fidelity iteration of the Foodie App​

Testing

Testing

After reviewing accessibility of the app using WebAIM, I made some changes to the colour scheme to ensure it complied and passed Web Content Accessibility Guidelines (WCAG). I also reviewed all of my work to see how I could improve the feel and design of the app, following a closer look to the notes app simplicity I mentioned earlier.

Edit: Upon reviewing this, I would have done the WebAIM testing earlier - when I was creating the colour palette - as this would have saved time from redesigning the frames.

Before
Screenshot 2024-04-30 at 13.14.55 (2).png

First iteration of Foodie not passing WCAG 

After
Screenshot 2024-05-02 at 23.40.45.png

Second iteration of Foodie passing WCAG 

User Testing - Lookback
Screenshot 2024-05-06 at 23.16.48.png
Iteration

I tested the flow of opening a list > making a note > returning to the list > going onto maps function using Lookback.

 

Summary of insight and feedbacks:

User tested on Lookback with 6 participants.

  • 66% of participants found it difficult to return to the “your list” page

  • 33% could not find notes section straight away

I worked on improving the main flow of “Your Lists”> “Drinks”> add a note> “Your Lists”

To solve the issues with the flow of returning to the “your list” page, I added a breadcrumb “back to lists” for users to easily navigate back.

Second Iteration of the Foodie App​

Reflections

Reflections

  • Identified challenges: navigation and note-taking in restaurant list management.

  • Conducted comprehensive user research to understand dining habits and digital preferences.

  • Developed detailed user personas and journey maps, highlighting pain points and goals.

  • Prototyped various design concepts, iterating based on usability testing feedback - changed the colours to fit WCAG and "Your Lists" flow.

  • Balancing user insights with technical constraints and project timelines, strategic decisions were made, such as integrating a breadcrumb "back to lists" feature to enhance navigation.

The main challenge was to provide a solution for building restaurant lists where the user can easily save, scroll through and share lists and restaurants.

What I would do differently
  • make sure the aim of the project was more consistent as I also looked at lots of main features in broader apps during my interviews and research

  • think about the features earlier on - and keep referring to features prioritisation grid - I wanted to focus on too many

  • It is important to re-evaluate the project at each stage, to ensure scope was not too large especially for projects in the future as th timing constraints would come into play.

bottom of page