Omaha Steaks Product Cards
With my time at company, a critical project involved the Omaha Steaks' product cards. This was a unique challenge as the design ultimately accounted for every pixel of space on the display, business requirements such as the product SKU, and included the information most necessary for users to make a purchasing decision.
Role: UX Designer
Tools: Figma, UserZoomGO
Mixed-Method Study
To develop a sense of empathy, a two-part study was conducted with approximately 20 users. The study started with an unmoderated usability study and ended with a focus group discussion for both desktop and mobile environments. It was divided into 4 group sessions (60 minutes each), talking to a mix of loyal customers and ideal customers.
Empathize
Unmoderated Usability Study - User Journey
Who did we talk to?
-
Users who:
-
Purchased within 6 months
-
Purchases Omaha Steaks 2+ times per year
-
Buys for self and someone else
-
Goal
The objective of this test was to understand the main components of a product card and identify points of frustration of the current designs.
Define
Problem Statement
Omaha Steaks has a unique challenge with its product cards due to the amount of information necessary for customers to make a purchasing decision and details essential to internal partners.
POV #1
First-Time Customer
A customer that wants to try Omaha Steaks for the first time needs the ability to easily scan products and shop the website because they are unfamiliar with the experience.
POV #2
Returning Customer
A returning customer that is looking to rebuy, buy gifts, or try new products needs to quickly compare packages and products because there is a large selection.
Insights
1. Customers felt the website was a clunky experience due to differing product card heights
2. Customers found it difficult to compare packages
-
Expressed a desire for a more guided way to compare the most important pieces.
3. Customers rely more on list items than imagery to compare and differentiate packages
4. Customers identified the following as essential to comparing packages:
-
Price / Savings Message
-
Package Contents
-
Ratings / Customer Feedback
5. Different numbers on the cards caused confusion and they felt the information was unreliable.
6. Customers were willing to sacrifice one extra click/tap into a quick view in exchange for a simplified, more organized package card display with a "preview" of featured items in the list.
Ideate
THINGS TO NOTE
Version #1
-
Originally designed by a third version vendor.
-
Heavily relied on individual imagery to convey the contents of the package
-
Caused uneven card heights amongst other products
-
-
Customer was only able to tap on each circle to learn about the quantity and type of item
-
Interacting with anything except for the images instanced a quick view panel to the right
THINGS TO NOTE
Version #2
-
A dynamic list was added to the bottom of the Package Card
-
The photo corresponded with the bolded list item
-
Did not solve for uneven card heights
-
-
An additional button was incorporated above the Add-to-Cart on Element Cards
-
Circle images were removed and images were displayed in a rectangle carousel formal
-
This design was a hybrid of the company's original product card (prior to Version #1) and their new branding
PROBLEM FRAMING
How might we?
How might we ______ ______________ ?
[verb]
[issue]
The journey through Version #3, the Final Version, started off with How might we?'s to help guide new iterations.
-
How might we display all of the information without overwhelming the user with loud text?
-
How might we convey important contents of a package?
-
How might we fix the height inconsistencies?
-
How might we neither cover up nor minimize the imagery?
-
How might we accommodate for all different types of products?
THINGS TO NOTE
Version #3 (the Final Version)
-
The list is abridged and the top five to six items are highlighted.
-
Solved for inconsistent heights
-
Accompanied by a Quick View panel functionality to display contents of the package alongside its imagery
-
-
The Add-to-Cart and Select Size & Quantity is combined into one button.
-
When interacting, it displays an option selector which allows users to choose their desired size and quantity.
-
-
Streamlined the image carousel by making each image the same size.
-
The height allows the card to be seen in one view (above the fold).
Low Fidelity Mockup
Initial mockup and brainstorm of content grouping
Package Card Functionality
1. Universal styling of information, utilizing Law of Proximity to group content
2. Abridged list showcases enough items to entice a customer
3. Streamlined image carousel and size to ease focal point of the card
4. "Quick View" leads to side panel to display more information
Elemental Card Functionality
1. Like the package card, the universal styling of information
2. Instances a panel where users could select their desired size and quantity to add to cart
-
The original Add-to-Cart and "Select Size & Quantity" combined into one
3. Imagery for non-package products provided more of an opportunity to emphasize the imagery
