Foodly.
Mobile app & website
2024
A social platform to share culinary experiences, whether that is home-cooked meals, restaurant outings or takeaway dishes. It is a space to gain meal inspirations and a simple way to document a personal food journal.
Project Overview
A social platform to story-tell and connect with the local foodie community using simulated uploading data and social features.
Users can view posts from the community as well as create their own content to story-tell their culinary experiences.
-
Adobe XD (prototype), Adobe Stock, Pinterest
App Objectives
Share user experience through picture and/or video posts
☕
Expand user network through exploration of other individual’s posts
☕
Provide inspiration of food ideas or restaurants and/or cafes to visit
☕
Target Users
The foodie community, especially 40-50 year olds mothers or fathers with a household to feed
User Aims:
→
→
→
Get cooking inspiration
Discover recommended restaurants and/or cafes
Connect with their foodie friends
1
Research
Figuring out the next meal is often a headache for parents who need to feed their children.
They have to find food that their children enjoy without being repetitive, emphasising the need for a variety of recipes. Parents also have to balance nutrition value while choosing ingredients and recipes.
Five one-on-one interview sessions were held to understand user’s experiences with current storytelling software and websites.
USER INTERVIEWS
INTERVIEW SAMPLE QUESTIONS
↳
▶
▶
▶
What type of existing stories spark your interest?
How likely are you to sign up to a new platform?
What inspires you to write a story with your content?
FINDINGS
↳
60%
only signed up to new platforms that they found interesting
80%
enjoyed browsing stories that involved personal experiences
100%
would write stories with their upload
100%
write stories to document the moment
📍
📍
Common User Needs
Simple and straightforward process to sign-up
Social feature to connect and share with family and friends
Browsing option - explore page
2
SCENARIOS
Two scenarios were developed from the interviews, highlighting laptop and mobile use.
User: Maria
↳
SCENARIO 1
Device: Laptop
Maria is a 46 year-old mother that works full-time. After her 9-5, she has to go straight to the kitchen to start cooking dinner, or get takeaway to feed her family of four. Maria is not the most passionate in cooking and struggles to satisfy her two daughters who are both picky-eaters, as they always complain about their boring and repetitive meals.
On her lunch break one day, Maria came across the ‘Foodly’ website when searching for food ideas to plan ahead for dinner time. She saw that there were many foodies engaging on the website and continued to browse further.
Maria came across stories of different food content such as meal-preps, trying new cuisines and new restaurants in the community etc. She wanted to engage with the other user that uploaded a post of their Mexican meal for dinner, and was prompted to create an account or log in. Maria did not hesitate to follow all the prompts to create an account, and signed up to ‘Foodly’. After joining the platform, Maria successfully got in touch with the user and got the recipe for the delicious Mexican meal.
After getting the recipe, Maria went to the kitchen and checked that she had all the ingredients to make the Mexican meal that night. She then happily went back to work as she did not have to stress about what to make for dinner.
User: Chloe
↳
SCENARIO 2
Device: Mobile
Chloe is a 40 year-old housewife and a big foodie. She is always scrolling on her phone looking at cooking videos or new places to eat at while munching on some snacks. One morning after coming back from brunch, she received a link to a post in ‘Foodly’ from her friend. Chloe opened the link and saw a post of a big Christmas banquet that received many likes and comments. She browsed through Foodly, found the platform very exciting, and immediately signed up.
As Chloe really enjoys sharing her life especially delicious food, she quickly shared her first content on ‘Foodly’ shortly after creating an account. Her very first upload was of her brunch meal that morning, accompanied with a story detailing her experience at the restaurant and the food itself.
Chloe is very excited to use Foodly to document the food she has enjoyed, and has told her other foodie friends about this platform so they have an outlet to share with each other.
3
USER INTERACTION FLOW
SITE MAP
↳
4
WIREFRAMES & ITERATIONS
Low and high fidelity prototypes were developed based on the site map
PAPER PROTOTYPES
↳
Concept 1: Simple icons with minimal description
Desktop
Mobile
Concept 2: Visual focused
Desktop
Mobile
HIGH-FIDELITY ITERATIONS: MOBILE
↳
CREATE ACCOUNT
Prototype 1.0
Problem from usability tests:
no hints for password requirements
splash screen was overwhelming with different texts
Prototype 2.0
hint was added for password requirement
splash screen was redesigned for a simple and minimalistic look
harsh outline of UI were changed to light colours, drop shadow was added
Problem solved:
HOME
Prototype 1.0
Problem from usability tests:
the buttons on the menu tab was too spaced out from each other
the tab looked ‘squished’ as it was not appropriately aligned
Prototype 2.0
Problem solved:
menu tab was re-sized and re-aligned, a small dot was added under the icon to indicate the screen that the user is on
harsh outlines were changed to light colours and the label ‘Activity’ was removed to minimise text on screen
CREATE POST
Prototype 1.0
Problem from usability tests:
interface was visually unappealing as there were too many elements on the screen
the position of the photos/videos section was difficult for the user to review what they have added
Prototype 2.0
Problem solved:
position of the ‘caption’ and ‘image’ section was changed
user would first select the photos before moving to the ‘create post’ screen, separating the two sections
icons from ‘add photos/videos’ section were removed
HIGH-FIDELITY ITERATIONS: DESKTOP
↳
SPLASH SCREEN
Prototype 1.0
Problem from usability tests:
minimised look due to the content within the shape
Prototype 2.0
Problem solved:
a ‘full screen’ look
log in and create account options were removed from the splash screen, this will be on the next screen when the ‘get started’ button is clicked
HOME
Prototype 1.0
every element had harsh outlines and made the interface look messy
the search bar did not have a suggestive label to prompt user to use the tool
Problem from usability tests:
Prototype 2.0
Problem solved:
hash outlines were removed, drop shadow was added
the search icon was moved to the left, and a suggestive label was added to the search bar
UPLOADING CONTENT
Prototype 1.0
Problem from usability tests:
layout was messy and UI were not appropriately aligned and sized
a ‘minimised’ look due to having many elements on the screen
Prototype 2.0
Problem solved:
user would first upload the image before moving onto the ‘create post’ screen, separating the two sections
‘add photos/videos’ icons were removed
harsh outlines were changed to light colour and drop shadow was added
rectangles were resized to have appropriate spacing between each element
background overlay was changed to a higher opacity to minimise noise
Final Design
LOGIN
HOME PAGE
ADD STORY: SIMULATED CAMERA
UPLOADING CONTENT
REFLECTION
📌
The feedback received from the usability tests were implemented in the final design. Throughout the design and prototyping process, the limitations on Adobe XD made it challenging to create a seamless flow and minimise the number of screens made at the same time.
The final design saw a big improvement in user satisfaction as it was more aesthetically pleasing, and had a much better flow.