Case Study 02:

Research

Research Methods

Competitor Analysis

Key competitors like Salt & Straw, Tillamook, and Ben & Jerry's lead with flavor storytelling, brand 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

"I just want to see what flavors are available without clicking through too many pages." - Tiffanie

Find a Location

"It should be simple to find the closest store, especially when I’m on the go." - Amanda

Check Store Hours

"It’s frustrating when you have to dig around to check if a shop is open." - Ken

Define

Pain Points

• Confusing layout/navigation
• Poor mobile responsiveness
• Low visibility of key actions
• Accessibility issues

User Persona

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 flavors with detailed descriptions and seasonal availability.

Find Locations

Quickly locate nearby stores with with direct links to Google Maps and Yelp.

Check Store Hours

View up-to-date hours for each location at a glance.

Visible CTAs

Clear buttons guiding users to key actions

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.

Usability Testing

Participants felt the About page lacked impact, with key information like their Ice Cream for Everyone initiative, Girl Scout partnerships, and local product sourcing missing or hard to find.

Iterations

• 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 this lo-fi wireframe in Figma.

After

Click here to view this lo-fi wireframe 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

Interactions, carousels, and smooth transitions across desktop and mobile.

Click each device photo to view the full prototype.

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 are unclear and not obviously clickable.
• Blue brand color lacks contrast on white background.

Homepage (After)

Improvements:
• Moved the Order Now and Menu buttons to above the fold.
• Added a seasonal flavors carousel with labels.
• Introduced dark grey for better contrast and accessibility.

Flavors (Before)

Key Issues:
• Inconsistent alignment across sections.

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 across sections.
• Address and hours not visible above the fold.
• Cluttered layout made navigation confusing.

Locations (After)

Improvements:
• Created location cards with name, address, phone, hours, and Google Maps/Yelp links.
• Listed all locations on a single page for easier access.

Footer (Before)

Key Issues:
• Footer cluttered with store list, hours, seasonal flavors, and mailing list.

Footer (After)

Improvements:
• Added email subscription section above the footer.
• Organized footer into five main 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 unstructured text overwhelming users.

Milk Fund - Mobile (After)

Improvements:
• Closed the gap between hero photo and body copy.
• Added accordion to organize additional content.
• Improved donation form for better appeal and accessibility.

Next Steps

• Conduct further testing across devices to ensure a seamless experience.
• Continue optimizing navigation and key CTAs based on user feedback.