Foodly
[UX/UI Design]
[Social Website & Mobile App] [2023]
Overview
A social platform that connects the local foodie community through storytelling and social features, allowing users to explore posts, share food experiences, find inspiration, and keep a personal food journal.
Problem
Parents struggle to plan meals that are both enjoyable and nutritious for their children - this project provides a platform to help them discover recipes and meal ideas all in one place.
Softwares Used
Adobe XD
Adobe Stock
Theme
Food & Travel
Social
Project Duration
12 weeks
Stage 01 :
Who we are designing for
I conducted five one-on-one interviews to understand user experiences with storytelling platforms, then developed two scenarios highlighting laptop and mobile usage.
"I find that many apps ask a lot of questions for setting up an account which can be quite annoying"
"I share stories just to share fun and connect with my friends and family"
"I read and browse existing stories that are either inspiring or personal, and I can feel a connection to."
"I often write stories with my upload, but it is usually just a short one to describe the context and document the moment"
"I am quite likely to sign up because I like exploring new platforms and different features that it has"
"I often just sign up for a new platform if it looks interesting"
"I usually like to read and browse stories about other people's lives or new things that are happening"
"I often write stories with my upload, but it is usually just a short one to describe the context and document the moment"
"I find that many apps ask a lot of questions for setting up an account which can be quite annoying"
"I share stories just to share fun and connect with my friends and family"
"I read and browse existing stories that are either inspiring or personal, and I can feel a connection to."
"I often write stories with my upload, but it is usually just a short one to describe the context and document the moment"
"I am quite likely to sign up because I like exploring new platforms and different features that it has"
"I often just sign up for a new platform if it looks interesting"
"I usually like to read and browse stories about other people's lives or new things that are happening"
"I often write stories with my upload, but it is usually just a short one to describe the context and document the moment"
"I find that many apps ask a lot of questions for setting up an account which can be quite annoying"
"I share stories just to share fun and connect with my friends and family"
"I read and browse existing stories that are either inspiring or personal, and I can feel a connection to."
"I often write stories with my upload, but it is usually just a short one to describe the context and document the moment"
"I am quite likely to sign up because I like exploring new platforms and different features that it has"
"I often just sign up for a new platform if it looks interesting"
"I usually like to read and browse stories about other people's lives or new things that are happening"
"I often write stories with my upload, but it is usually just a short one to describe the context and document the moment"
"I find that many apps ask a lot of questions for setting up an account which can be quite annoying"
"I share stories just to share fun and connect with my friends and family"
"I read and browse existing stories that are either inspiring or personal, and I can feel a connection to."
"I often write stories with my upload, but it is usually just a short one to describe the context and document the moment"
"I am quite likely to sign up because I like exploring new platforms and different features that it has"
"I often just sign up for a new platform if it looks interesting"
"I usually like to read and browse stories about other people's lives or new things that are happening"
"I often write stories with my upload, but it is usually just a short one to describe the context and document the moment"
"I find that many apps ask a lot of questions for setting up an account which can be quite annoying"
"I share stories just to share fun and connect with my friends and family"
"I read and browse existing stories that are either inspiring or personal, and I can feel a connection to."
"I often write stories with my upload, but it is usually just a short one to describe the context and document the moment"
"I am quite likely to sign up because I like exploring new platforms and different features that it has"
"I often just sign up for a new platform if it looks interesting"
"I usually like to read and browse stories about other people's lives or new things that are happening"
"I often write stories with my upload, but it is usually just a short one to describe the context and document the moment"
"I find that many apps ask a lot of questions for setting up an account which can be quite annoying"
"I share stories just to share fun and connect with my friends and family"
"I read and browse existing stories that are either inspiring or personal, and I can feel a connection to."
"I often write stories with my upload, but it is usually just a short one to describe the context and document the moment"
"I am quite likely to sign up because I like exploring new platforms and different features that it has"
"I often just sign up for a new platform if it looks interesting"
"I usually like to read and browse stories about other people's lives or new things that are happening"
"I often write stories with my upload, but it is usually just a short one to describe the context and document the moment"
"I find that many apps ask a lot of questions for setting up an account which can be quite annoying"
"I share stories just to share fun and connect with my friends and family"
"I read and browse existing stories that are either inspiring or personal, and I can feel a connection to."
"I often write stories with my upload, but it is usually just a short one to describe the context and document the moment"
"I am quite likely to sign up because I like exploring new platforms and different features that it has"
"I often just sign up for a new platform if it looks interesting"
"I usually like to read and browse stories about other people's lives or new things that are happening"
"I often write stories with my upload, but it is usually just a short one to describe the context and document the moment"
"I find that many apps ask a lot of questions for setting up an account which can be quite annoying"
"I share stories just to share fun and connect with my friends and family"
"I read and browse existing stories that are either inspiring or personal, and I can feel a connection to."
"I often write stories with my upload, but it is usually just a short one to describe the context and document the moment"
"I am quite likely to sign up because I like exploring new platforms and different features that it has"
"I often just sign up for a new platform if it looks interesting"
"I usually like to read and browse stories about other people's lives or new things that are happening"
"I often write stories with my upload, but it is usually just a short one to describe the context and document the moment"
[Focus Group Interview Results]
Key findings in user behaviour
100%
Write stories to remember moments
80%
Enjoyed personal experience stories
60%
Signed up only to interesting platforms
Brief Requirements
User Needs
Mobile & Web Friendly
Available on 2 different devices
Use Adobe XD
Create both prototypes on XD
Easy Sign Up
Intuitive sign up process
Discovery Page
Find recommended dining spots
Connect Community
Social feature to share & connect
Perform 5 Tasks
Sign up & log in, upload / create / browse / share content
[Common User Needs from Qualitative Analysis]
Target Users
Foodie parents aged 40–50 managing household meals.
Maria, a 46-year-old full-time working mother, often struggles to plan enjoyable and varied dinners for her picky-eater daughters. Cooking feels repetitive, and takeaway becomes a frequent fallback.
During her lunch break, she discovers 'Foodly' while searching for dinner ideas. Browsing the platform, she sees food stories ranging from meal preps to new cuisines and local restaurant experiences. When she tries to engage with a user who shared a Mexican dinner post, she’s prompted to sign up. The process is simple, and Maria quickly creates an account and connects with the user to get the recipe.
After confirming she has the ingredients at home, Maria returns to work relieved, she no longer needs to worry about dinner that night.
Scenario 1: Maria
Device: Laptop
Chloe, a 40-year-old housewife and passionate foodie, often spends her downtime scrolling through cooking videos and exploring new places to eat. After returning from brunch one morning, she receives a link from a friend to a 'Foodly' post.
Opening it, Chloe sees a beautifully curated Christmas banquet with high engagement. Curious, she browses more posts and finds the platform inspiring and easy to explore, prompting her to sign up immediately.
Because she loves sharing food moments, Chloe uploads her first post, a photo of her brunch that morning, paired with a short story about the restaurant and the dishes she enjoyed. Feeling excited to document future meals and discoveries, Chloe shares 'Foodly' with her foodie friends, hoping they’ll join her and exchange inspirations.
Scenario 2: Chloe
Device: Mobile
Maria, a 46-year-old full-time working mother, often struggles to plan enjoyable and varied dinners for her picky-eater daughters. Cooking feels repetitive, and takeaway becomes a frequent fallback.
During her lunch break, she discovers 'Foodly' while searching for dinner ideas. Browsing the platform, she sees food stories ranging from meal preps to new cuisines and local restaurant experiences. When she tries to engage with a user who shared a Mexican dinner post, she’s prompted to sign up. The process is simple, and Maria quickly creates an account and connects with the user to get the recipe.
After confirming she has the ingredients at home, Maria returns to work relieved, she no longer needs to worry about dinner that night.
Scenario 1: Maria
Device: Laptop
Chloe, a 40-year-old housewife and passionate foodie, often spends her downtime scrolling through cooking videos and exploring new places to eat. After returning from brunch one morning, she receives a link from a friend to a 'Foodly' post.
Opening it, Chloe sees a beautifully curated Christmas banquet with high engagement. Curious, she browses more posts and finds the platform inspiring and easy to explore, prompting her to sign up immediately.
Because she loves sharing food moments, Chloe uploads her first post, a photo of her brunch that morning, paired with a short story about the restaurant and the dishes she enjoyed. Feeling excited to document future meals and discoveries, Chloe shares 'Foodly' with her foodie friends, hoping they’ll join her and exchange inspirations.
Scenario 2: Chloe
Device: Mobile
Maria, a 46-year-old full-time working mother, often struggles to plan enjoyable and varied dinners for her picky-eater daughters. Cooking feels repetitive, and takeaway becomes a frequent fallback.
During her lunch break, she discovers 'Foodly' while searching for dinner ideas. Browsing the platform, she sees food stories ranging from meal preps to new cuisines and local restaurant experiences. When she tries to engage with a user who shared a Mexican dinner post, she’s prompted to sign up. The process is simple, and Maria quickly creates an account and connects with the user to get the recipe.
After confirming she has the ingredients at home, Maria returns to work relieved, she no longer needs to worry about dinner that night.
Scenario 1: Maria
Device: Laptop
Chloe, a 40-year-old housewife and passionate foodie, often spends her downtime scrolling through cooking videos and exploring new places to eat. After returning from brunch one morning, she receives a link from a friend to a 'Foodly' post.
Opening it, Chloe sees a beautifully curated Christmas banquet with high engagement. Curious, she browses more posts and finds the platform inspiring and easy to explore, prompting her to sign up immediately.
Because she loves sharing food moments, Chloe uploads her first post, a photo of her brunch that morning, paired with a short story about the restaurant and the dishes she enjoyed. Feeling excited to document future meals and discoveries, Chloe shares 'Foodly' with her foodie friends, hoping they’ll join her and exchange inspirations.
Scenario 2: Chloe
Device: Mobile
Maria, a 46-year-old full-time working mother, often struggles to plan enjoyable and varied dinners for her picky-eater daughters. Cooking feels repetitive, and takeaway becomes a frequent fallback.
During her lunch break, she discovers 'Foodly' while searching for dinner ideas. Browsing the platform, she sees food stories ranging from meal preps to new cuisines and local restaurant experiences. When she tries to engage with a user who shared a Mexican dinner post, she’s prompted to sign up. The process is simple, and Maria quickly creates an account and connects with the user to get the recipe.
After confirming she has the ingredients at home, Maria returns to work relieved, she no longer needs to worry about dinner that night.
Scenario 1: Maria
Device: Laptop
Chloe, a 40-year-old housewife and passionate foodie, often spends her downtime scrolling through cooking videos and exploring new places to eat. After returning from brunch one morning, she receives a link from a friend to a 'Foodly' post.
Opening it, Chloe sees a beautifully curated Christmas banquet with high engagement. Curious, she browses more posts and finds the platform inspiring and easy to explore, prompting her to sign up immediately.
Because she loves sharing food moments, Chloe uploads her first post, a photo of her brunch that morning, paired with a short story about the restaurant and the dishes she enjoyed. Feeling excited to document future meals and discoveries, Chloe shares 'Foodly' with her foodie friends, hoping they’ll join her and exchange inspirations.
Scenario 2: Chloe
Device: Mobile
How the User Interacts
Visualising the user journey through the site map to show how users move through the platform's core features.
Stage 02 :
Design development
Using the site map, I created low and high fidelity prototypes for desktop and mobile, exploring two concepts supported by paper wireframes.
Concept 1:
Simple, icon-led navigation with minimal text
Concept 2:
Visual focused, image-driven layout
Desktop
Concept 1:
Concept 2:
Mobile
Concept 1:
Concept 2:
Desktop
Concept 1:
Concept 2:
Mobile
Concept 1:
Concept 2:
Desktop
Concept 1:
Concept 2:
Mobile
Concept 1:
Concept 2:
Desktop
Concept 1:
Concept 2:
Mobile
Concept 1:
Concept 2:
[Wireframe of Main Screens]
User Testing:
Design Evaluation
I ran think-aloud sessions with five participants to evaluate both design concepts and developed Prototype 1.0. Participants completed key tasks: signing up, posting, creating, browsing, and sharing, followed by a post-test survey.
I then conducted a time-to-task usability test with six participants, completing the same tasks on both devices, and refined the design into Prototype 2.0.
No password hints – required format unclear
Overwhelming plash screen – too much text, reducing clarity and focus
Added password hint – guides users on required format
Redesigned splash screen – simpler, minimal look with softened outlines and drop shadows for clarity
CREATE ACCOUNT
Mobile Prototype 1.0
Mobile Prototype 2.0
Improvements made:
Problem from Usability Tests:
Menu layout - misaligned, spaced too far apart, visually unbalanced
Resized and aligned menu tab – active screen shown with a dot
Cleaned interface – softened outlines and simplified by removing the ‘Activity’ label
HOME PAGE
Mobile Prototype 1.0
Mobile Prototype 2.0
Improvements made:
Problem from Usability Tests:
Cluttered interface - too many elements, reducing clarity
Photos/videos section – poorly positioned, hard for the user to review added content
Reorganised layout - caption and image sections clarified
Photo selection – separated from ‘Create Post’ and icons removed for a simpler interface
UPLOAD CONTENT
Mobile Prototype 1.0
Mobile Prototype 2.0
Improvements made:
Problem from Usability Tests:
No password hints – required format unclear
Overwhelming plash screen – too much text, reducing clarity and focus
Added password hint – guides users on required format
Redesigned splash screen – simpler, minimal look with softened outlines and drop shadows for clarity
CREATE ACCOUNT
Mobile Prototype 1.0
Mobile Prototype 2.0
Improvements made:
Problem from Usability Tests:
Menu layout - misaligned, spaced too far apart, visually unbalanced
Resized and aligned menu tab – active screen shown with a dot
Cleaned interface – softened outlines and simplified by removing the ‘Activity’ label
HOME PAGE
Mobile Prototype 1.0
Mobile Prototype 2.0
Improvements made:
Problem from Usability Tests:
Cluttered interface - too many elements, reducing clarity
Photos/videos section – poorly positioned, hard for the user to review added content
Reorganised layout - caption and image sections clarified
Photo selection – separated from ‘Create Post’ and icons removed for a simpler interface
UPLOAD CONTENT
Mobile Prototype 1.0
Mobile Prototype 2.0
Improvements made:
Problem from Usability Tests:
No password hints – required format unclear
Overwhelming plash screen – too much text, reducing clarity and focus
Added password hint – guides users on required format
Redesigned splash screen – simpler, minimal look with softened outlines and drop shadows for clarity
CREATE ACCOUNT
Mobile Prototype 1.0
Mobile Prototype 2.0
Improvements made:
Problem from Usability Tests:
Menu layout - misaligned, spaced too far apart, visually unbalanced
Resized and aligned menu tab – active screen shown with a dot
Cleaned interface – softened outlines and simplified by removing the ‘Activity’ label
HOME PAGE
Mobile Prototype 1.0
Mobile Prototype 2.0
Improvements made:
Problem from Usability Tests:
Cluttered interface - too many elements, reducing clarity
Photos/videos section – poorly positioned, hard for the user to review added content
Reorganised layout - caption and image sections clarified
Photo selection – separated from ‘Create Post’ and icons removed for a simpler interface
UPLOAD CONTENT
Mobile Prototype 1.0
Mobile Prototype 2.0
Improvements made:
Problem from Usability Tests:
No password hints – required format unclear
Overwhelming plash screen – too much text, reducing clarity and focus
Added password hint – guides users on required format
Redesigned splash screen – simpler, minimal look with softened outlines and drop shadows for clarity
CREATE ACCOUNT
Mobile Prototype 1.0
Mobile Prototype 2.0
Improvements made:
Problem from Usability Tests:
Menu layout - misaligned, spaced too far apart, visually unbalanced
Resized and aligned menu tab – active screen shown with a dot
Cleaned interface – softened outlines and simplified by removing the ‘Activity’ label
HOME PAGE
Mobile Prototype 1.0
Mobile Prototype 2.0
Improvements made:
Problem from Usability Tests:
Cluttered interface - too many elements, reducing clarity
Photos/videos section – poorly positioned, hard for the user to review added content
Reorganised layout - caption and image sections clarified
Photo selection – separated from ‘Create Post’ and icons removed for a simpler interface
UPLOAD CONTENT
Mobile Prototype 1.0
Mobile Prototype 2.0
Improvements made:
Problem from Usability Tests:
[Mobile Hi-Fidelity Iterations]
Tight UI - Content crammed within shape, lowers readability
Simplified layout - full-screen adopted for a cleaner interface
Reduced UI - Login/create account moved to next screen via ‘Get Started’ to reduce text
SPLASH SCREEN
Desktop Prototype 1.0
Desktop Prototype 2.0
Improvements made:
Problem from Usability Tests:
Interface – harsh outlines created a cluttered feel
Search bar – lacked a suggestive label, reducing discoverability
Softened UI - harsh outlines removed, drop shadows added for a cleaner, readable design
Search bar – icon moved to the left, suggestive label added to guide users
HOME PAGE
Desktop Prototype 1.0
Desktop Prototype 2.0
Improvements made:
Problem from Usability Tests:
Cluttered interface – misalignment and too many elements create a cluttered, minimised feel
Workflow – separated photo upload from 'Create Post' to improve clarity
Cleaned UI - softened outlines, adjusted spacing, darkened overlay to reduce visual noise
UPLOAD CONTENT
Desktop Prototype 1.0
Desktop Prototype 2.0
Improvements made:
Problem from Usability Tests:
Tight UI - Content crammed within shape, lowers readability
Simplified layout - full-screen adopted for a cleaner interface
Reduced UI - Login/create account moved to next screen via ‘Get Started’ to reduce text
SPLASH SCREEN
Desktop Prototype 1.0
Desktop Prototype 2.0
Improvements made:
Problem from Usability Tests:
Interface – harsh outlines created a cluttered feel
Search bar – lacked a suggestive label, reducing discoverability
Softened UI - harsh outlines removed, drop shadows added for a cleaner, readable design
Search bar – icon moved to the left, suggestive label added to guide users
HOME PAGE
Desktop Prototype 1.0
Desktop Prototype 2.0
Improvements made:
Problem from Usability Tests:
Cluttered interface – misalignment and too many elements create a cluttered, minimised feel
Workflow – separated photo upload from 'Create Post' to improve clarity
Cleaned UI - softened outlines, adjusted spacing, darkened overlay to reduce visual noise
UPLOAD CONTENT
Desktop Prototype 1.0
Desktop Prototype 2.0
Improvements made:
Problem from Usability Tests:
Tight UI - Content crammed within shape, lowers readability
Simplified layout - full-screen adopted for a cleaner interface
Reduced UI - Login/create account moved to next screen via ‘Get Started’ to reduce text
SPLASH SCREEN
Desktop Prototype 1.0
Desktop Prototype 2.0
Improvements made:
Problem from Usability Tests:
Interface – harsh outlines created a cluttered feel
Search bar – lacked a suggestive label, reducing discoverability
Softened UI - harsh outlines removed, drop shadows added for a cleaner, readable design
Search bar – icon moved to the left, suggestive label added to guide users
HOME PAGE
Desktop Prototype 1.0
Desktop Prototype 2.0
Improvements made:
Problem from Usability Tests:
Cluttered interface – misalignment and too many elements create a cluttered, minimised feel
Workflow – separated photo upload from 'Create Post' to improve clarity
Cleaned UI - softened outlines, adjusted spacing, darkened overlay to reduce visual noise
UPLOAD CONTENT
Desktop Prototype 1.0
Desktop Prototype 2.0
Improvements made:
Problem from Usability Tests:
Tight UI - Content crammed within shape, lowers readability
Simplified layout - full-screen adopted for a cleaner interface
Reduced UI - Login/create account moved to next screen via ‘Get Started’ to reduce text
SPLASH SCREEN
Desktop Prototype 1.0
Desktop Prototype 2.0
Improvements made:
Problem from Usability Tests:
Interface – harsh outlines created a cluttered feel
Search bar – lacked a suggestive label, reducing discoverability
Softened UI - harsh outlines removed, drop shadows added for a cleaner, readable design
Search bar – icon moved to the left, suggestive label added to guide users
HOME PAGE
Desktop Prototype 1.0
Desktop Prototype 2.0
Improvements made:
Problem from Usability Tests:
Cluttered interface – misalignment and too many elements create a cluttered, minimised feel
Workflow – separated photo upload from 'Create Post' to improve clarity
Cleaned UI - softened outlines, adjusted spacing, darkened overlay to reduce visual noise
UPLOAD CONTENT
Desktop Prototype 1.0
Desktop Prototype 2.0
Improvements made:
Problem from Usability Tests:
[Desktop Hi-Fidelity Iterations]
Stage 03 :
Final Design
I developed the final design by applying user-testing insights and design recommendations, ensuring the interface resolved usability issues and better aligned with user needs.
WELCOME TO FOODLY
HOME PAGE
ADD STORY
UPLOAD CONTENT
WELCOME TO FOODLY
HOME PAGE
ADD STORY
UPLOAD CONTENT
WELCOME TO FOODLY
HOME PAGE
ADD STORY
UPLOAD CONTENT
WELCOME TO FOODLY
HOME PAGE
ADD STORY
UPLOAD CONTENT
[Mobile Prototype]
WELCOME TO FOODLY
HOME PAGE
ADD STORY
UPLOAD CONTENT
WELCOME TO FOODLY
HOME PAGE
ADD STORY
UPLOAD CONTENT
WELCOME TO FOODLY
HOME PAGE
ADD STORY
UPLOAD CONTENT
WELCOME TO FOODLY
HOME PAGE
ADD STORY
UPLOAD CONTENT
[Desktop Prototype]
Stage 04 :
Reflection
I reflected on the final design, recognising how usability feedback and tool limitations informed key decisions and shaped the overall user experience.
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.