Lisa's Hot Sauce

Responsive Website UX Design Case Study

Lisa's Hot Sauce Logo
Featured Image showing several screens of Lisa's Hot Sauce responsive website

What is This Project About?

Developing a responsive website for Lisa’s Hot Sauce, a gourmet hot sauce company, to enhance its online presence and sales. The project aims to create a user-friendly and visually appealing website that effectively conveys the brand’s story and product offerings.

Team Roles

Cat Hahn – Lead UX Designer/Researcher

Tommy Gunn – Creative Director, Brand Strategy

A mockup of the mobile version of Lisa's Hot Sauce homepage
A mockup of the Shop page of the mobile version of Lisa's Hot Sauce

My Responsibilities

  • Lead research to understand user needs and market gaps
  • Define the problem in the market
  • Empathize with users through interviews and surveys
  • Create wireframes and ideate solutions
  • Build interactive prototypes
  • Conduct usability studies to gather feedback
  • Finalize the product for launch
A mockup of the mobile version of Lisa's Hot Sauce homepage

The Problem

Lisa’s Hot Sauce needed a strong online presence to reach a wider audience and increase sales. Without a website, customers struggled to discover and purchase their products. This limited the brand’s ability to share its unique story, showcase offerings, and provide a convenient shopping experience.

The Goal

Design and develop a responsive e-commerce website for Lisa’s Hot Sauce to provide an intuitive user experience, communicate the brand’s story, and showcase product uniqueness. The website aims to enhance user engagement with compelling visuals, simplify navigation and checkout to reduce cart abandonment, and increase online visibility through SEO. Additionally, it should facilitate both online and in-store purchases for customer convenience.

Project Phases

Understanding The User

  • User Research
  • User Personas
  • Competitive Analysis

Starting The Design

  • Paper Wireframes
  • Digital Wireframes

Refining The Design

  • Design System
  • Mockups
  • High-Fidelity Prototypes
  • Accessibility Considerations

Going Forward

  • Takeaways
  • Next Steps

Understanding The User

User Research
User Personas
Competitive Analysis

User Research: Summary

To create User Personas for Lisa’s Hot Sauce, I surveyed 30 hot sauce enthusiasts in Facebook culinary groups. The survey revealed user habits, preferences, pain points, and desired features for an e-commerce website. I also analyzed demographic data, noting the growing interest in gourmet hot sauces among millennials and food enthusiasts.

Key Insights:

  • Product Information & Authenticity: 82% prioritize knowing the story and ingredients.
  • User Reviews: 68% value reviews and ratings.
  • Desired Features: Easy navigation, filtering by heat level and ingredients, and personalized recipe suggestions.

User Research: Pain Points

One

No Online Store

Establishing an online store will expand market reach, enabling national and international sales, driving revenue, and enhancing brand visibility.
Two

Customer Accessibility Issues

The mobile-friendly site will offer seamless shopping across devices with user-friendly navigation, search functionality, and a secure checkout process, overcoming physical store limitations.
Three

Unknown Brand Story

The website will highlight the story of Kyle McCann naming the business after his late mother, Lisa, and donating profits to diabetes research.
Four

Limited Information and Resources

Detailed product pages with descriptions, ingredients, usage suggestions, and a blog with recipes, tips, and testimonials will be included.

User Persona #1: Sierra Martinez-Lopez, 28

Sierra is a young professional and culinary explorer who seeks unique, bold-flavored hot sauces without artificial additives. She values authenticity and sustainability but finds it difficult to find brands that transparently share their stories and ingredient sourcing. Limited availability of such products in local stores hinders her culinary creativity and makes her skeptical about new brands.
User persona profile for Sierra Martinez-Lopez. The profile includes a photo of Sierra, a 28-year-old female from Austin, Texas, with a middle-class income and no kids. It highlights her goals, psychology, pain points, purchasing motivation, shopping habits, culinary preferences, and occasions for hot sauce use. Sierra values authenticity, quality, and tradition in food products. She enjoys trying new culinary experiences, hosting gatherings, and cooking. Her pain points include difficulty finding genuine hot sauces without artificial additives and concerns about brand authenticity.

User Persona #2: Greg Thompson, 46

Greg is a family-oriented grilling enthusiast who is often disappointed by inconsistent hot sauce quality and flavor. He needs a versatile hot sauce that enhances various dishes without overpowering them. With limited access to gourmet sauces in stores and affordable online options, Greg struggles to find a reliable brand that meets his high standards and enhances his grilling experiences.
User persona profile for Greg Thompson. The profile includes a photo of Greg, a 46-year-old male from Orem, Utah, with a mid to upper-mid income, married with 2 kids. It highlights his goals, psychology, pain points, purchasing motivation, shopping habits, culinary preferences, and occasions for hot sauce use. Greg values family, tradition, and convenience. He enjoys outdoor activities, barbecuing, and family gatherings. His pain points include inconsistent quality and flavor in hot sauces, difficulty finding complementary sauces, and limited availability of gourmet sauces in local stores.

Starting The Design

Paper Wireframes
Digital Wireframes

Paper Wireframes

Desktop Homepage:

Here are some paper wireframes for the desktop homepage of Lisa’s Hot Sauce:

  • Full-width Hero Section: Visually showcases products at the top.
  • About Section: Introduces the brand below the fold.
  • Product Cards: Feature images, descriptions, and fire ratings.
  • Blurb Section: Provides additional details.
  • Social Media Reviews: Embedded reviews build trust.
  • Dynamic Slider: Showcases YouTube and podcast reviews.
  • Footer: Includes a newsletter subscription box, navigation links, social media buttons, and payment method badges.
A scan of paper wireframes of the homepage for Lisa's Hot Sauce website. Home page has a large fullwidth image with bold title and subtitle with a button above the fold, and below the fold are a tiered layer cake format wireframe of several sections and a footer.

Mobile Homepage:

For the mobile version, I designed a single-column layout for a seamless, user-friendly experience:

  • Hero Section: Prominent at the top.
  • About Section: Positioned just below the fold.
  • Product Cards: Displayed in a vertical list with clear fire ratings.
  • Additional Sections: Blurb, embedded reviews, and YouTube/podcast slider stacked vertically.
  • Footer: Simplified subscribe box, navigation links, and social media buttons for mobile responsiveness.
A scan of paper wireframes of the homepage for Lisa's Hot Sauce website. Home page has a large fullwidth image with bold title and subtitle with a button above the fold, and below the fold are a single column format wireframe of several sections and a footer.

Digital Wireframes

  • Fullwidth Hero Sections: Used across all key pages (Homepage, Product Pages, About Page, Contact Page, Shop Page) to capture attention with images and taglines.

  • Simplified Navigation Menus: Consistent and intuitive navigation on all pages.

  • Product Cards and Listings: Featured on the Homepage and Shop Page with images, descriptions, and fire ratings to highlight key products.

  • Fire Rating Indicators: On Product Pages and Shop Page to indicate heat levels.

  • Footer Design: Consistent across all pages with navigation links, social media buttons, payment method badges, and a newsletter subscription box.

    GroceryGlide Homepage

    Digital wireframe of the homepage for Lisa's Hot Sauce website. Home page has a large fullwidth image with bold title and subtitle with a button above the fold, and below the fold are a tiered layer cake format wireframe of several sections and a footer.

    Hover over image to scroll

    Shop Page

    Digital Wireframe for the Shop page of Lisa's Hot Sauce website by Cat Hahn

    Click image to expand

    Product Details Page

    Digital Wireframe for a Product Details page on Lisa's Hot Sauce website by Cat Hahn

    Click image to expand

    About Us Page

    Digital Wireframe for the About Us page of Lisa's Hot Sauce website by Cat Hahn

    Click image to expand

    Contact Page

    Digital Wireframe for the Contact page of Lisa's Hot Sauce website by Cat Hahn

    Click image to expand

    Refining The Design

    Design System
    Mockups
    High-Fidelity Prototype
    Accessibility Considerations

    Design System

    Design system for Lisa’s Hot Sauce. It features the main logo and its variations, with the tagline “Bold Flavors, Balanced Heat.” The design system includes primary and secondary color palettes, specifying hex codes. The main and alternative fonts are displayed, along with their type application. The bottom section showcases various branded icons and images, such as peppers, hot sauce bottles, and related graphical elements.

    Mockups

    Lisa’s Hot Sauce Homepage

    I collaborated with Creative Director Tommy Gunn, who provided high-quality branded imagery, product photos, and updated iconography. All images and icons, including the cart icon, were refreshed to align with the brand’s style. The mockup includes:

    • Hero Section: Fullwidth branded imagery with a compelling tagline.
    • Product Cards: Updated design with fire ratings.
    • Reviews Section: Genuine Facebook and Google reviews to build trust.
    • Media Reviews Slider: Includes YouTube and podcast reviews.
    • Footer: Enhanced with a newsletter subscription box and social media buttons.
    Mockup of Lisa's Hot Sauce homepage, featuring a large fullwidth header, an about section, a carousel of product cards, locations where customers can buy bottles of hot sauce in stores, podcast and Youtube reviews, social media reviews, and a footer.

    Hover over image to scroll

    Mockup of the Shop page for Lisa's Hot Sauce featuring a fullwidth hero slider, product cards, and locations to buy the products in stores.

    Hover over image to scroll

    Shop Page

    Above the fold, a fullwidth slider highlights each hot sauce with imagery of peppers, spices, and the bottle centered. A box to the side displays the product name, fire rating icons, and a button. The same product cards from the homepage follow the slider. Users can sort products by heat level when there are more items available.
    Lisa's Hot Sauce Shop Page Mockup

    Hover over image to scroll

    Product Details Pages

    Utilized Gestalt principles of scale and color to guide attention from the product photo to the product name, and finally to the Add to Cart button.

    • Information Arrangement: Carefully organized on product details pages.
    • 3D Product Details Box: Stands out to grab attention.
    • Accent Stripe: Pepper background covering 1/4 of the screen adds a vibrant pop of color.
    Screenshot of a product page for Lisa’s Hot Sauce. The product featured is “Piece O’ Habanero Heaven Hot Sauce” priced at $13.99. The page includes a product photo, a detailed description with heat level, ingredients, and suggested pairings. There is a 3D product details box with an “Add to Cart” button, SKU, category, and tag. Additional information about weight and dimensions is provided below. The right sidebar shows a recommended product. The footer includes navigation links, a newsletter subscription form, and social media buttons.

    Hover over image to scroll

    Screenshot of the About Us page for Lisa’s Hot Sauce. The page includes a banner with the text “About Us.” Below is “Our Story,” detailing founder Kyle McCann’s passion for creating habanero hot sauce, including a photo of peppers and a picture of Kyle and his mother. “Our Name” section explains the origin of the brand’s name in honor of Kyle’s late mother. “Our Values” highlights three key values: Unfiltered Spirit, Relentless Artistry, and Heat for Everyone. The footer contains navigation links, a newsletter subscription form, and social media buttons.

    Hover over image to scroll

    About Us Page

    Since users want to know the brands they buy from, I highlighted the story, values, and mission of the business. The page features:

    • Heartfelt Story: Founder Kyle McCann’s passion for creating the perfect habanero sauce and the positive feedback from social media.
    • Personal Touch: A picture of Kyle and his late mom, Lisa, with an explanation of the business name.
    • Z-Format Layout: Guides the eye down each section of the page for easy reading.
    Lisa's Hot Sauce About Page Mockup

    Hover over image to scroll

    Contact Page

    The contact page features a shorter banner hero similar to the About Us page. It includes:

    • Simple Form: For support and sales inquiries.
    • Contact Information: Easy access to support details.
    • FAQ Section: Accordion modules for easy navigation.
    • Store Locations: Lists where Lisa’s Hot Sauces can be found in physical stores.

    This layout ensures users have multiple ways to get in touch and find products in stores or online.

    Screenshot of the Contact page for Lisa’s Hot Sauce. The page includes a banner with the text “Contact.” Below is a simple form for users to fill out their name, email address, phone number, and message, with a “Send” button. The support and sales contact information is provided. Below this, there is a Frequently Asked Questions section with accordion-style dropdowns for each question. Further down, the page lists physical store locations where Lisa’s Hot Sauce is available. The footer includes navigation links, a newsletter subscription form, and social media buttons.

    Hover over image to scroll

    Accessibility Considerations

    One

    Annotations

    Using the Figma app Stark, I added annotations to the high-fidelity prototype to ensure intuitive navigation. These annotations help users, including those using screen readers, understand the sequence of elements on the site.

    Two

    Accessible Color Contrast

    I adhered to WCAG guidelines to select a color scheme that meets both AA and AAA standards for normal and large text, as well as for graphical objects and UI components. This ensures that the content is easily readable for users with visual impairments.

    Three

    Hierarchal Headings

    I utilized the Stark app to mark H1-H4 headings on the website and mobile site, maintaining a clear and accessible content structure. Proper heading hierarchy is crucial for screen readers to navigate and interpret the content efficiently.

    Going Forward

    Impact
    What I learned

    Takeaways

    Impact

    The new website for Lisa’s Hot Sauce has successfully attracted new customers, leading to significant online purchases, including a recent bulk order of 60 bottles. The enhanced online presence has boosted sales and brand visibility, demonstrating the effectiveness of the design and SEO in reaching a broader audience.

    What I Learned

    Through this project, I refined my skills in using Figma for design and conducting usability testing. I learned the importance of incorporating user feedback to make designs more accessible and user-centered. I also learned how to implement accessibility features such as annotation, hierarchal headings, and color contrast using the Stark app on Figma.

    I’ll learn even more if you hire me! 😉

    Like what you see?

    Let’s connect!