Case Study 02:

Research Methods

Competitor Analysis

Key Competitors:
• Salt & Straw
• Tillamook
• Ben & Jerry’s

This analysis highlighted how these brands excel in showcasing their unique values, such as Salt & Straw’s creative flavor storytelling, Tillamook’s focus on heritage and quality, and Ben & Jerry’s emphasis on social impact.

Secondary Research

Key findings:
• Digital engagement: 80% of users expect seamless online ordering and storytelling from food brands.
• Menu Accessibility: 68% expect a clear and interactive menu with detailed flavor descriptions and dietary options.
• Location Finder: 75% value an intuitive store locator with filters like hours, distance, and special offerings.

Market Trends

Key Findings:
‍• Mobile Optimization: Over 60% of ice cream shop searches are conducted on mobile, highlighting the need for responsive design.
‍• Customization Options: 55% of users prefer digital menus that allow customization, like adding toppings or choosing cones.
‍• Integrated Experiences: Consumers expect seamless integration of ordering, menu browsing, and location finding across desktop and mobile.

User Interview Findings

Explore Flavors

Users want quick access to the menu with detailed descriptions of current and seasonal flavors.
“I just want to see what flavors are available without having to click through too many pages.” - Tiffany

Add song to playlist

Finding nearby shops is a top priority for users, who value a simple and accurate store locator.
“It should be simple to find the closest store, especially when I’m on the go.” - Amanda

Learn more about the artist

Users need clear and accessible store hours for different locations.
“It’s frustrating when you have to dig around to check if a shop is open.” - Ken

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

Based on user persona insights and the feature set, I created a streamlined site map. Research helped structure the layout for clarity and easy navigation, ensuring users can quickly find key sections like the flavors menu, store locations, hours, and the Order Now button.

‍Click the image to view the full sitemap.

Desktop UI Kit

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

Click the image to view the full desktop UI kit.

Mobile UI Kit

• iOS Status Bar
• Nav Bar
• Footer
• Location
• Ice Cream Flavor
• Primary Button
• Secondary Button

Click the image to view the full mobile
UI kit.

Design

Low-fidelity Wireframes

For my lo-fi wireframes, I created an initial mockup based on insights from the user persona and site map. The wireframes feature a simple, intuitive layout with clear sections like the flavors menu, store locations, hours, and Order Now button. I split cluttered pages into subpages to improve organization and reduce visual overload, helping visualize the website's structure before moving to high-fidelity designs.

‍Click the image to view the full lo-fi wireframes.

High-fidelity Wireframes

For my high-fidelity wireframes, I added colors, typography, and graphics to enhance the design. I refined the layout for a cohesive experience aligned with the user persona and brand identity. The wireframes now include realistic elements like buttons, icons, and images, with cluttered pages split into subpages for a cleaner, more user-friendly flow.Click the photos to view the full hi-fi wireframes.

‍Click the image to view the full hi-fi wireframes.

Prototype

Prototyping

For prototyping, I added interactions for key sections like the menu, locations, store hours, and CTAs and incorporated interactive carousels for photos to reduce clutter. These updates introduce smooth transitions, enhancing the user experience on both desktop and mobile.

Click each device photo to view the full prototype.

Usability Testing

During usability testing with five participants, I received feedback that important pages were missing, including the Milk Fund page and sections for community involvement and local products. Users emphasized that these elements are key to Molly Moon's identity. In response, I added the Milk Fund page to the navigation and created dedicated sections for community impact and local products, improving the site's completeness and user experience.

‍Click the image to view the full lo-fi wireframe.

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."
‍
‍Click the image to view the full hi-fi wireframe.

Final Design

‍Click here to view the full final design.

Homepage (Before)

Key Issues:
• The 'Order Now' CTA is not visible above the fold, making it harder for users to take immediate action.
• The seasonal flavor photos is unclear, as users don’t realize they’re seasonal or clickable until they hover over the photos.
• The blue brand color lacks sufficient contrast against a white background

Homepage (After)

Flavors (Before)

Key Issues:
• Inconsistent alignment: Some parts of the page were center-aligned, while others were left-aligned.

Flavors (After)

Improvements:
• I made the 'Order Now' and 'Menu' buttons more prominent by positioning them above the fold for better visibility.
• I created a carousel section for the seasonal flavors, complete with labeled flavor names to make them stand out and easily identifiable.
• I introduced dark grey as a secondary color throughout the entire website to improve contrast with the brand blue and enhance accessibility.
• I left-aligned the tabs to improve consistency and readability.
• I also redesigned the tab buttons to clearly indicate the active filter and updated the navigation to prioritize the most important links.

Locations (Before)

Key Issues:
• Inconsistent alignment: Some parts of the page were center-aligned, while others were left-aligned.
• The location address and hours were not placed within the fold, making them harder to find.
• The cluttered layout made navigation confusing

Locations (After)

Improvements:
• Created cards for all locations, including the location name, address, store phone number, hours, Google Maps, and Yelp links.
• Listed all location cards on a single page, removing the need to switch tabs or open new pages.

Footer (Before)

Key Issues:
• The footer showed the full list of all stores and their hours, seasonal flavors, and the mailing list, which felt cluttered and unnecessary.
• Seasonal flavors were already highlighted in the fold of the website, making their repetition in the footer redundant.

Footer (After)

Improvements:
• I gave the email subscription its own section right above the footer for better organization.
• Included five main categories in the footer: Shop, Find Us, About Us, Get in Touch, and Follow, with their respective subpage links.
• Moved the social media icons from the navigation to the footer.

Milk Fund - Mobile (Before)

Key Issues:
• Large white gap between the hero photo and body copy text, disrupting layout flow.
• Excessive text without a clear, organized structure, making it overwhelming for users.

Milk Fund - Mobile (After)

Improvements:
• Closed the large gap between the hero photo and body copy for a smoother flow.
• Added an accordion for other topics (Our Impact, Nonprofit Growth, MoonCrew Involvement, and How You Can Help) to allow users to expand for more information.
• Enhanced the donation form to be more visually appealing and accessible.