Website Design for a Food Concept

Creating a unique digital presence for a create-your-own mochi ice cream shop.
Homepage screen introducing create your own mochi ice cream shop
Context
Mochi Mochi is a food concept where people are able to customize their own mochi ice cream. The dough, ice cream filling, and toppings can be selected to create a unique, one-of-a-kind mochi ice cream.
The founder plans to start an in-person store in Philadelphia. In order to secure the dough and the ice cream filling from suppliers, he wants to create a website to illustrate the food concept and to market the potential success of the business. I was tasked with designing the entire website to bring the food concept into reality.
Timeframe
6 weeks*
‍*After 6 weeks, I revisited the designs to make further improvements.
Role
UX/UI Design
Visual/Branding Design
Team
Client (CEO)
Word Press Developer
Logo Designer
Tools
Figma
Photoshop
Relume Library
Wordpress
Webflow (Re-developing in Webflow)
Problem to solve
How might we create a website that effectively communicates the food concept ‘create-your-own mochi ice cream’ to both potential customers and business partners?
Solution preview
Through distinctive imagery, specific messaging & interactive features, Mochi Mochi's website successfully communicates its unique food concept to both customers and potential business partners.
Jump to final design  ↓View Figma prototype
screens of mochi mochi final design
Market Research
Before diving into designing, I first conducted market research to test the business concept.
I asked myself following questions:
  • Is there potential for Mochi Mochi food concept to work?
  • There are various types of ice creams – rolled ice cream, regular ice cream, ice cream sandwiches, but not a customizable mochi ice cream – will this concept work?
Product Market Fit
There was no direct competitor in Philadelphia – no ice cream shop that specializes in ‘create your own’ mochi ice cream.
Primary competitors were other ice cream shops in Philadelphia. They all had clear brand identity and targeted specific customer need. But none offered customizable mochi ice cream.
List of primary competitor logos
Secondary competitors were mochi ice cream brands outside Philadelphia. These brands did not have store front, supplied to grocery shops, and were online-first (only Mochi Doki had physical store). None offered customizable mochi ice cream.
List of secondary competitor logos
Consumer Analysis
Young working professionals are health conscious, interested in innovative flavors, and willing to spend on snacking.
  • Millennials through Gen Z enjoy new foods as well as customizing orders. 1
  • Snacking has increased since pandemic. 2
  • Mochi Ice cream market is on the rise with increased interest in innovative flavors. 3
  • Healthier snack options with portion control has been on the rise. 3
Sources
1. Glanbia Nutrionals, Food Technology Magazine
2. Business Insider, Fortune Business Insights
3. Entreprenuer.com,Verified Market Research
USer persona
Target audience is quite diverse as it could be anyone interested in trying a new food concept and any suppliers interested in partnering up.
User Persona Type 1: Anyone Interested in the Food Concept
icon drawing of young adults and working professionals
Young Adults & Working Professionals
Goal
  • To find new snack items to try.
  • To affordably & easily purchase new snack items.
Need
  • Understanding the Mochi Mochi food concept easily by navigating the website.
mother and daughter icon
Children & Parents
Goal
  • Parent: To affordably & easily purchase new snack items to satisfy child’s cravings.
  • Child: To convince parent to buy snacks.
Need
  • Both: Understanding the Mochi Mochi food concept easily by navigating the website.
User Persona Type 2: Anyone Suppliers Interested in Partnering
hand shake icon
Local Ice Cream Shops
To supply the ice cream filling.
Goal
  • To partner with local business to advertise own brand and to make profits.
Need
  • To easily navigate the website to understand the food concept and be persuaded by its business potential.
supplier icon
Large Scale Suppliers
To supply the mochi dough.
Goal
  • To spot potential business and marketing opportunity in new, growing brands.
Need
  • To easily navigate the website to understand the food concept and be persuaded by its business potential.
Feature prioritization
Having defined business & user goals and identified target audience, CEO and I listed all relevant features and prioritized them for the MVP.
Listing all features in the order of priority.
table for feature prioritization
Organizing the must-have & should have features into the website’s navigation.
info architecture of nav bar
⚠️ Challenge: Negotiating the 'Nice to have' Customer Survey Feature
CEO wanted to include survey as another main CTA in the navbar. I pushed back and convinced him having one main CTA (one main goal) will be more effective in gathering user’s focus and interest. Therefore, we settled on having the survey available as a link in the footer.
Feature Highlight 1: Sign Up for Free Mochi Ice Cream
Feature Highlight 2: Mochi Customizer
Users need to interact and see how mochi ice cream customization works. While not available for online order, the mochi customizer replicates the in-store process of choosing ice cream filling, dough, and toppings.
Referenced how restaurant, such as Sweetgreen, Chipotle, & Cold Stone allow users to customize their orders on their on their websites.
sketch of mochi customizer
⚠️ Challenge: What happens after the user interacts with the mochi customizer?
Because online order was not within the scope, we brainstormed creative solutions to connect online interactivity with physical store visits. Ultimately, we decided on sending mochi creation illustrations via email, redeemable for free mochi ice cream upon in-store visits. Sorting out how these illustrations will be created posed further brainstorming.
Mid-fidelity wireframes
Designed mid-fidelity wireframes with dual focus: streamlining sign-up flows to target potential customers and crafting compelling narratives to engage potential business partners.
mid fi wireframes
Visual design
Utilizing rounded logo & typography along with bright colors communicates the playful, fun, & creative nature of Mochi Mochi.
The logo, featuring flowing letters with playful characters in the 'o' and 'i', reflects the customizable nature of the brand. Bright, warm colors such as yellow, blue, brown, and beige, along with orange accents, coupled with brushstroke textures, evoke a sense of creativity and fun while highlighting the 'create your own' aspect of the customizable mochi ice cream concept.
UI Design Style Guide for Mochi Mochi
Usability testing
Using specific imagery, improving interaction, streamlining copywriting & navigation to clearly communicate the unique food concept.
After multiple rounds of feedback & working sessions with the client, I conducted 5 usability testings with the the final selected designs. During the zoom facilitated usability testings, I asked feedback on following:
  • Visual design and identity of the website
  • Ease of sign up flow
  • Interactivity of mochi customizer
  • In all, does the website communicate what the brand mochi mochi does?
Jump to final designs ↓View Figma prototype
1. Homepage Iterations: Choosing Appropriate Imagery & Improving Messaging
First Round : Pre-Launch Iterations
Issue: 3/5 users mentioned that mochi ice cream images look exactly like the general mochi ice creams sold at grocery stores.
Solution: Because actual product photography was not available, I searched for stock images that show variety of ice cream filling, dough options, and toppings.
before and after homepage iterations
Second Round: Post–Launch Iterations
Issues: Feedback on typography choice, inconsistencies in type scale, use of generic vector art, and lack of social proof were given.
Solution: Changed typeface from Merriweather to Sora. Condensed copywriting, included actual photos of Jordan and testimonials.
before and after homepage designs before and after homepage iterations
2. Contact Us & Take a Survey Iterations: Eliminating Distractions from the Main CTA
First Round : Pre-Launch Iterations
Issue: 2/5 users felt having both the sign up flow and contact us page were redundant. They serve same function of collecting users' interest & contacts.
Solution: Removed 'Contact Us' from the nav bar and placed inside footer only, allowing users to direct attention to just one call to action.
before and after sign up iterations
Second Round: Post–Launch Iterations
Issues: Inconsistent messaging on taking the survey confuses the users. 'Take a Survey' text links also conflicts with the main CTA (sign up for a free mochi).
Solution: Completely removed 'Take a Survey' links from internal page headers. Instead, revised messaging in Contact Us page to transition into taking a survey.
survey iteration screens
3. Mochi Customizer Iterations: Clarification on Labels & Opportunity for Engagement
First Round : Pre-Launch Iteration
Issue: 4/5 testers asked clarification on the labels – what it means to select 1 or 2 flavors. All 5 testers asked what happens after clicking 'I'm done'.
Solution: Clarified language to denote just 1 flavor and added a short explanation for the toppings.  Also included a confirmation message in green.
mochi customizer before and after
Second Round: Post–Launch Iterations
Issues: Small images made users squint to identity each flavors. 'Thank you' message after clicking on 'I'm Done' still fails to connect users to a store visit.
Solution: Larger images make it easier to identify different flavors. Pop Ups for topping & detailed thank you message appears, connecting users to a store visit.
before and after create your own screens
Final designs
Introducing Mochi Mochi, a create-your-own mochi ice cream shop, coming soon to Philly!
View Figma prototype
Creating Your Own Mochi Ice Cream with the Mochi Customizer
A Walk-through of the Entire Mochi Mochi Website
Check out the launched website*. Go to mochidelight.com →
Check out Figma redesigns. View Figma Prototype →
*After launching the website on WordPress, I revisited the designs to make further improvements.
Post-launch iterations as shown above. Currently re-developing the Figma redesigns on Webflow.
Further thoughts
Challenges I faced
  • Closely collaborating with a Wordpress developer, I first-hand experienced the importance of documenting designs for a seamless handoff. Consistency in my designs and in the language I use to document the designs was crucial. And communicating the documentation was even more important. We used Google meets or left short loom videos to ensure we were all on the same page.
  • Another huge part of my job as a designer was explaining my design decisions clearly and even pushing back on certain requests by the client. For example, the client wanted to include taking a survey as another CTA in the hero section as well as in the navbar. I had to push back, highlighting the importance of having one main focus and goal, which is to encourage users to sign up for free mochi ice cream.
  • Having a strong visual identity was vital for a new food concept like Mochi Mochi. I spent some time researching how popular ice cream brands establish themselves through logo, color, typography, messaging, and imagery. Applying best practices from the research, I aimed to create a cohesive and distinguishable brand.
Next steps
  • Following the website's launch on Wordpress (mochidelight.com), I revisited the designs to make further enhancements. Having received valuable feedback from design peers, I was able to make significant improvements. Ultimately, I have decided to rebuild the website on Webflow for easier long-term maintenance and full end-to-end control over the design.
  • Moreover, I'm currently researching how to implement QR codes in the email confirmation after user signs up for a free mochi ice cream. Additionally, I'm ironing out the technical details of the mochi customizer, including the creation of specific illustrations for each customized mochi ice cream variant.
Iterations of Homepage
homepage iterations
Initial drafts looked very different. Went through several iterations to improve typography, spacing, and balance.
See more of my case studies ↴
parksflyshop thumbnail

Agency work: 
Parks Fly Shop

Small preview image of Shoptimize case study, end to end mobile app concept

End to end mobile app:
Shoptimize

Small image preview of Starbucks case study, feature add concept

Feature add: 
Starbucks app

Small screen preview of ifu reduction project

Passion discovery: 
IFU Reduction Project

Back to home →
Thanks for stopping by!

Feel free to reach out at psoonsoo@gmail.com.Currently open to new opportunities! 

back to top icon