Oct 2020 – May 2021
Umami
Designing an end-to-end user experience interface for a native app centered around food content
Deliverables
High fidelity, native mobile app prototype
Your One Stop Shop for Food
Umami is a mobile app that enables a community of food lovers to socialize and explore their interests through blog posts and recipes. Users are able to share, comment, and rate each other’s posts, as well as save content and build groceries to bring some of this content to life.
Umami was a project worked on by my agency, Koi Fish Studios. As the lead designer, I met with the client on a weekly basis to work through strategy and multiple design sprint rounds. I worked with two other designers to collaborate on user research, end-to-end app design, and usability testing.
Designing Umami
Problem
The founder of Umami noticed a need for a social media platform that served the “niche” for food-related content – mukbangs, recipes, blog posts, foodies, and short videos. While this content lived on multiple popular platforms such as Instagram, TikTok, Youtube, and food blogs, we drew inspiration from apps such as Twitch to create a centralized platform where people could interact with food content and creators.
Doing Our Research
To identify pain points with people who search or create food content online, we conducted 8 user interviews — 3 for content creators and 5 for content consumers. We also conducted card sorting with these interviewees, plus 3 additional users for each user type to identify high priority features that should be included in the MVP.
The most interesting insights that we found were:
When searching for recipes, users will look at pictures and the ingredients list first.
Users like to engage with content by watching, reading, saving, sharing with friends and family. Most people do not comment on posts or engage with the creators themselves.
Small content creators find it difficult to find ways to monetize from their posts and turn it into a full-time job.
This is the results of the card sorting activity done on people who identified as “content consumers.”
This is the results of the card sorting activity done on people who identified as “content creators.”
Our Target User Personas
Based on these insights, we identified 3 types of users to target for Umami – the content consumer, the “For Fun” content creator, and the “Influencer.”
The Content Consumer
The “For Fun” Creator
The “Influencer” Creator
Design Challenges & Initial Design
The biggest challenge we ran into was competing with all of the different types of content available on other platforms — from stories, pictures, videos, blog posts, and recipes — and finding a way to add it all to Umami.
And after trying this, and realizing that our test users were getting way too confused and overwhelmed, we decided that the best solution for an MVP was just not to.
Instead, we decided to simplify the app down to just recipes and blog posts which we felt added most value for food content. Other types of posts could come later.
The left mock up shows the Explore page in our initial design. The right mockup shows the final Explore page after removing standalone pictures, short videos, and “bites.”
Wireframes
We explored our ideas and worked out our user flows through wireframes. This included a feed page, a “For You” page, an explore page, a Shopping List, messaging, notifications, account profiles, content creation, and post insights. We designed for best case scenario initially, and presented these wires to the client for feedback before designing high fidelity screens.
From there, we slowly cut down on the features that were unnecessary for a v1.
A couple of notable changes we made were:
removing standalone photos and short videos, and bites
omitting messaging and insights for MVP 1.0
changed formatting of account profiles to show content in a less space-consuming way
standardized the type of engagement methods to just likes and comments
Usability Testing Insights
After designing a first version of high fidelity screens of the app, we put them to the test in front of 5 content consumers and 5 content creators. On top of finding out that too many types of content was overwhelming for users, we discovered that:
Our interface looked too similar to Instagram
Users wanted additional features to search and explore content
Some of the actions indicated by icons, such as adding items to their Grocery List and editing ingredients in their Grocery List, were unclear.
Final Designs
The observations above, as well as other user insights not listed, guided our final designs for the app shown below.
Visual Branding
Home & Explore
Account & Notifications
Saving Content
Posting Content
Conclusion
Umami was a blast to work on! Through this project, I learned to strategize an app from end to end, delegate work to other designers, and push back on client requests when I know that they’ll sacrifice the quality of the app’s user experience.
Umami is launching in Singapore on the Google Play Store and iOS App Store in October 2021.