Scroll down for main content

Casey's Hot Sauce

UI/UX E-commerce Case Study

Profile - family-owned, small-batch, gourmet sauce manufacturer/distributor. Casey's Hot Sauce has been in business for years but never created their own online sales channel.

My Role

Research, ideation, brand development, visuals/iconography, and prototyping using Figma and Adobe CC.

Why

An e-commerce presence and modernized branding identity are needed. The client wants to improve customer engagement.

What

Develop UI/UX Figma wireframes and prototypes for potential handoff to engineers. Design new branding and identity.

How

For this client, suggested methods include a competitive audit, stakeholder interviews, task flow, and mood boards.

Task Flow

A basic task flow of adding a product to the cart, and proceeding through the checkout process, was a great way to show the user's main shopping task.

Casey's Hot Sauce task flow

Persona

Casey's Hot Sauce persona profile photo

Our ideal customer is a woman named Ava. Ava is in her 50’s and is married. She and her husband have doctoral degrees and work in a busy team, so she has limited time to shop. Ava lives in Nokomis, FL. Their family rarely spends on themselves. Cooking delicious meals for her husband and friends is her passion and main hobby - she considers herself a ‘foodie’ and likes to explore new recipes. Ava is somewhat familiar with Casey’s Hot Sauce.

Moodboard

Magnifying loupe icon
Casey's Hot Sauce Figma mood board
Moodboard to provide overall direction.

Style Guide

Casey's Hot Sauce Figma style guide
Magnifying loupe icon
Initial Style Guide to show the basic design system information.

Visual Design

A new logo was created which incorporates the new fonts and color theme. The classical and vintage, yet contemporary, desired branding was incorporated into a whimsical order-confirmation animation and system icons.

Logo

Casey's Hot Sauce logo - text with multicolor pepper icon

Animation

Casey's Hot Sauce Figma created order confirmation animation of delivery truck

Custom Icons

Iconography reflects the vintage old-world-roots of the brand while keeping a contemporary feel.

Wireframe

Prototype - Mobile

Casey's Hot Sauce Figma high fidelity prototype frames

Figma Frames LXB

View favorite snack bar animation of UX/UI prototype

Add Favorite LXB

View newsletter signup animation of UX/UI prototype

Newsletter Overlay LBX

View edit user profile animation of UX/UI prototype

Add Photo Overlay LB

View checkout flow animation of UX/UI prototype

Cart & Checkout LBX

The Figma interactive prototype and animated GIFs demonstrate work flow and key features.

Prototype - Desktop

Casey's Hot Sauce UX/UI Figma desktop prototype design
Magnifying loupe icon
The Figma desktop prototype uses interactive tab-content-display to communicate the business's 3 main priorities.

Final Outcome

Successes

Improvements

Key Takeaway

User-feedback surveys from production will be critical to growing and improving future iterations. Engagement through a forum and use of social media will benefit customer engagement and retention.