Molly Moon’s Ice Cream
Molly Moon's is a Seattle-based ice cream shop known for locally sourced ingredients, unique flavors, and strong community values.
Context
Type
Bootcamp Project
My Role
UX/UI Designer
Duration
6 Weeks
Tools
Figma
Project Brief
Overview
As part of my UX Academy bootcamp, I designed a responsive website for Molly Moon’s Ice Cream to enhance the user experience across devices, improve accessibility, and make call-to-action buttons more clear and effective.
Pain Points
• Confusing layout/navigation
• Poor mobile responsiveness
• Low visibility of key actions
• Accessibility issues
Goal
• Streamline navigation
• Enhance mobile responsiveness
• Boost CTA visibility
• Improve accessibility
• Organize footer content
Research
Define
Ideate
Design
Prototype
Test
Research
Research Methods
Competitor Analysis
Key competitors like Salt & Straw, Tillamook, and Ben & Jerry’s stand out through flavor storytelling, heritage, and social impact.
Secondary Research
• 80% expect seamless online ordering and storytelling.
• 68% want a clear, interactive menu with flavor details and dietary options.
• 75% value an intuitive store locator with filters.
Market Trends
• 60% of ice cream searches are mobile.
• 55% prefer customizable digital menus.
• Seamless integration across devices is expected.
User Interview Findings
Explore Flavors
Users want easy access to the menu with detailed flavor descriptions.
"I just want to see what flavors are available without clicking through too many pages." - Tiffanie
Find a Location
Users value a simple and accurate store locator.
"It should be simple to find the closest store, especially when I’m on the go." - Amanda
Check Store Hours
Users need clear and accessible store hours for each location.
"It’s frustrating when you have to dig around to check if a shop is open." - Ken
Define
User Persona
Based on research, I created Sophia Greene, an ice cream fanatic who loves exploring new flavors.

Click here to view the full user persona in Figma.
How Might We
• How might we simplify menu organization for quicker selection?
‍
• How might we make store locations and hours easier to find?
‍
• How might we ensure key CTAs are visible and accessible?
Ideate
Feature Set
Explore Flavors
Easily browse flavor options with detailed descriptions and seasonal availability.
Find Locations
Quickly locate nearby stores with an interactive store finder.
Check Store Hours
View up-to-date hours for each location at a glance.
Visible CTAs
Clear, easy-to-spot buttons guide users to key actions effortlessly.
Site Map

Streamlined site map for quick access to flavors, locations, hours, and ordering.

‍Click here to view the full sitemap in Figma.

Desktop UI Kit
• Nav Bar
• Footer
• Location Card
• Primary Button
• Secondary Button
• Ice Cream Flavor

Click here to view the full desktop UI kit in Figma.
Mobile UI Kit
• iOS Status Bar
• Nav Bar
• Footer
• Location
• Ice Cream Flavor
• Primary Button
• Secondary Button

Click here to view the full mobile UI kit in Figma.
Design
Low-fidelity Wireframes

Created lo-fi wireframes with a clean layout, clear sections, and subpages to reduce clutter.

‍Click here to view the full lo-fi wireframes in Figma.

High-fidelity Wireframes

Developed hi-fi wireframes with brand-aligned visuals, color, typography, and clear UI elements.

‍Click here to view the full hi-fi wireframes in Figma.

Prototype
Prototyping
Added interactions for key sections, interactive carousels for photos, and smooth transitions to improve UX on desktop and mobile.

Click each device photo to view the full prototype.
Usability Testing
Usability testing revealed missing company valuesAdded the Milk Fund to the navigationIncluded sections for community impact and local products on the About Us page
Iterations
Based on usability testing feedback for the Molly Moon's project, I made several iterations to improve the site’s structure.
‍
• Included the Milk Fund page in the navigation for better visibility.
• Created a dedicated section for community impact under "Our Community."
• Added a section for local products under "Our Products."
Before

Click here to view the full lo-fi wireframe in Figma.

After

Click here to view the full hi-fi wireframe in Figma.

Final Design
‍Click here to view the full final design in Figma.
Homepage (Before)
Key Issues:
• 'Order Now' CTA not visible above the fold
• Seasonal flavor photos unclear and not obviously clickable
• Blue brand color lacks contrast on white background
Homepage (After)
Improvements:
• Buttons: Moved Order Now and Menu above the fold for visibility.
• Seasonal Flavors: Added carousel with labeled flavors for clarity.
• Color: Introduced dark grey for better contrast and accessibility.
Flavors (Before)
Key Issues:
• Inconsistent alignment: Some sections center-aligned, others left-aligned.
Flavors (After)
Improvements:
• Left-aligned tabs for consistency and readability.
• Redesigned tab buttons to indicate active filter.
• Updated navigation to prioritize important links.
Locations (Before)
Key Issues:
• Inconsistent alignment: Some sections were center-aligned, others left-aligned.
• Address and hours not within the fold, harder to find.
• Cluttered layout made navigation confusing.
Locations (After)
Improvements:
• Created location cards with name, address, phone, hours, Google Maps, and Yelp links.
• Listed all location cards on a single page for easier access.
Footer (Before)
Key Issues:
• Footer cluttered with store list, hours, seasonal flavors, and mailing list.
• Seasonal flavors repeated in footer.
Footer (After)
Improvements:
• Added email subscription section above the footer.
• Included five main footer categories with subpage links.
• Moved social media icons to the footer.
Milk Fund - Mobile (Before)
Key Issues:
• Large white gap between hero photo and body copy.
• Excessive text with no clear structure, overwhelming users.
Milk Fund - Mobile (After)
Improvements:
• Closed the gap between hero photo and body copy.
• Added accordion for additional topics.
• Improved donation form for better appeal and accessibility.
Next Steps
• Conduct additional testing to ensure a smooth user experience across devices.
• Explore more ways to optimize navigation and key actions for users.
Case Study 04 >
LinkedInResumeEmail