Pantri.app
Food recipe social media
Timeline
July - October 2022
My Role
- Research - UX Design
- Research - Usability Testing
Team
1 Product Manager
2 Front-end Developers
1 Back-end Developers
Team
Web and mobile interactive prototypes
First MVP to be launched by Q4, 2022
Mobile version to be launcher by Q1, 2023
This project is a 3-month collaboration working with developers and project manager for a early-stage social media startup.
I was recruited into the team after the manager had a rough idea of the problem space, and we worked together to figure out design solutions and all the details.
During the process, I have been working closely with developers: actively receive feedback of each version of design, provide Figma tutorials to front-end developers and work with them for edge cases and design iterations.
PROBLEM
How to inspire people working from home what to eat in a daily routine so that they get more inspiration and save time
The COVID-19 pandemic has fundamentally altered our relationship with food: what we’re eating, where we’re eating, why we’re eating the way we are and even when we’re eating. Not surprisingly, people are also spending more time on social media since the start of the pandemic. Taken together, the pervasive use of social media has also changed how people are exposed to food.
DESIGN PHASES
Design process starting from investigation
After joining the team, I had a meeting with the project manager, to express my ideas of practicing the design system. We both agreed that we need to learn more about the market as well as actual users before we start with any design solutions. I then had a meeting with all the developers and had a small lecture of how the design system works:
DESIGN PROCESS
Agile working in a cross-functional team
With PM’s help, we set the weekly sprint within the team. Every week we would have a group meeting, with each team member updating the progress and answering/solving any questions. I would also have a separate meeting with project manager once a week, to better understanding my tasks and stay on track. Through all the process, I have been communicating and collaborating a lot with the whole team:
RESEARCH METHODS
Research goals:
- Discover which platform would be appropriate for food inspiration community
- Analyze how people are influenced by existing online food platforms
- Examine how people who wfh eat for daily routine
- Identify what content does people expect for food inspiration
MARKET RESEARCH & COMPETITIVE ANALYSIS
What are the existing systems
Conducted by OnePoll on behalf of California Figs, the survey found that:
- 85% of people said they've experienced cravings for a food they've seen on social media.
- 53% of people were inspired to try a recipe after seeing it on their feed or timeline - how respondents are affected by what they’ve seen on social media
Bingo! We need a social media for food recipe
USER INTERVIEW
Hear users’ needs directly
After having the basic idea in mind, we started the user interview session, with is mainly led by the PM. We were hoping to narrow down the user needs that we could like to build for this social media
10 WFHers
Interviews led by PM
DESIGN SOLUTION
Pantri
Social Media Web Application themed around cooking recipes in which users can post, comment, like recipes and follow their favorite users.
Food hub community
- A feed of posts (recipes) in chronological order that users are able to browse in an infinite scroll fashion
- Users are able to create their own post in a clean, easy-to-look-at interface of instructions on how to submit a post
- Users are able to follow their favorite users, allowing users to filter feed catered to their followed users
- Users are able to search for a post (e.g. chocolate chip cookies)Users are able to like and comment on a post
- Users are able to customize their profile page with a profile picture and a bio
Recipe preparation
Title
Categories
Servings
Cook Time
List of ingredients
Cooking directions
Descriptive texts
Cooking images
Brainstorming & Wireframe Design
LO-FI DESIGN
Several iterations of design
Two meetings during a one-week sprint
- Individually with the PM to check in progress
- Meet with the whole team to receive feedback
Final low-fi design
DESIGN GUIDE
Coral for food colors
Red and yellow are the chief food colors, evoking the taste buds and stimulating the appetite. Both red and yellow are also effective at grabbing attention. So we choose to use a mix of red and yellow, which is similar to coral color. Besides, we choose teal color for some buttons, etc.
HI-FI DESIGN
Home Page
On the left side bar, users could browse account info, and check quick category options for inspiration.
Cooking Posts
Users could browse posts, and unfold any post for detailed instructions.
Notifications & Profile
Anyone who liked or commented on your posts will be shown here. Users could easily check their following/follower list and change bio.
Create new post
By scrolling the steps horizontlly, users won’t be overwhelmed by the long layout.
NEXT STEPS
Design is never done
Launch the first MVP before 2023
Work on back end developing
Graphic design for edge cases
Animations and illustrations
Design more features for further version
Collection board for users... etc.
REFLECTION
Agile working and developer handsoff
Agile working
Stay on track, as well as being flexible
Hands off with PM & Developers
Keep usability and feasibility in mind the same time
Focus on the main goal
Based on the research, not intuition
