Case Study 1: Redesigning a Responsive Website

Context

Type

Project

Role

UX/UI Designer

Duration

6 Weeks

Tools

Figma

Project Brief

Key Issues

• Confusing Navigation: The layout made key actions difficult to find.
• Poor Mobile Experience: The site was not optimized for mobile use.”
• Accessibility Gaps: Color contrast and layout created barriers for some users.

Challenges

• Limited Brand Access: No official brand guidelines or assets to work from.

Solutions

• Streamlined Navigation: Simplified site structure for quicker access to key info.
• Visible CTAs: Redesigned buttons and layout to surface key actions.
• Improved Contrast: Updated colors to meet accessibility standards.

Research

Research Methods

Competitor Analysis

Competitors like Salt & Straw lead with flavor storytelling, brand heritage, and social impact.

Secondary Research

• 80% expect seamless online ordering.
• 68% want a clear, interactive menu with dietary details.
• 75% value an intuitive store locator with filters.

Market Trends

• 60% of ice cream searches happen on mobile.
• 55% prefer customizable digital menus.
• Cross-device consistency is expected.

User Interviews

Method

I tested the site with 5 participants to see how easily they could find key information.

Market Trends

• 60% of ice cream searches happen on mobile.
• 55% prefer customizable digital menus.
• Cross-device consistency is expected.

Quotes

"I'd like to see what flavors are available without clicking through too many pages." - Tiffanie

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

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

Ideate

How Might We

• How might we simplify the menu for quicker selection?
• How might we make locations and hours easier to find?
• How might we make key CTAs more visible and accessible?

Feature Set

Explore Flavors

Easily browse flavors with detailed descriptions and seasonal availability.

Find Locations

Quickly locate nearby stores 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 like ordering.

Site Map

Streamlined 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 a cleaner layout with clear sections and subpages to reduce clutter.

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

Usability Testing

Method

I tested the site with 5 participants to see how easily they could find key information.

Findings

Participants felt the About page lacked impact, with key info like the Ice Cream for Everyone initiative, Girl Scout partnerships, and local product sourcing 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

Applied brand-aligned visuals, typography, color, 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 unclear and not obviously clickable.
• Blue brand color lacks contrast on white background.

Homepage (After)

Improvements:
• Moved Order Now and Menu buttons 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 the 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.