top of page

Omaha Steaks Product Cards

With my time at the 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.

designt_empathy.png

Empathize

Unmoderated Usability Study - User Journey

userjourney

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.

designt_define.png

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.

userclass-13.png

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.​

userclass-13.png

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​

insights-123.png
Diagram of Insights 4-5

​

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.

designt_ideate.png

Ideate

version1.png

THINGS TO NOTE

Version #1

  • Originally designed by a third party 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

version2.png

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

Mobile Mockup
Desktop Mockup
Package and Quick View
Elemental Card

Elemental Card Functionality

1. Like the package card, the universal styling of information 

​

2. Instances a panel (option selector) 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. Non-package products provided an opportunity to emphasize the imagery upfront

Option Selector - Desktop
Option Selector - Mobile
designt_prototype.png

Prototype

Interaction Specifications

Following the final product card design, I used Figma to help developers and stakeholders visualize the interaction between the product card and their corresponding quick view. Alongside this, the option selector modal was prototyped to specify the movement between selections. 

Objective

The objective was to test the updated product cards against the original Legacy product cards, gauging ease of product comparison and preferred design.

designt_test.png

Test

Unmoderated Usability Study

With a small group, each participant completed a high level shopping journey on the NextGen website and ended with a brief shopping task on the Legacy website. 

User Breakdown

  • 10 Participants

  • Prospective & Existing Omaha Steaks customers

  • Online Mobile Shoppers

What did users say?

"The contents of the varying packages was prominently displayed below each package header making it very easy to quickly scan the packages in each category to find one that suited me."​

​

"I could just see them [product listings] better on the first version [NextGen design]."

designt_implement.png

Implement

How did this get implemented?

The product card redesign was a big undertaking for the in-house development team as identified by stakeholders and the UX team. Thus, the designs were broken down into steps where each hand off was one step closer to the complete design.

​

Each step is equivalent to one (1) written ticket that was to be assigned to a developer. 

Part I: Product Card Reskin

Part I was broken into 6 steps. This part established the universal styling and made adjustments to the current height, column, row, and padding styles. 

Package and Elemental product cards

Step 1

  • Consistent Card Sizes

  • List View Grid Update (column/row padding)

  • Horizontal Scroll Module Grid Update (column/row padding)

Step 2

  • Universal & Base Style Updates

  • Name/Price/Shipping Badge Enhancement

Step 3

  • Image Carousel Display & Functionality on Packages (2+ items)

  • Elemental Image Display

  • Custom package Image Zone Display

Step 4

  • Short List / View More

  • Gradient on List

Step 5

  • Only One Parent Elemental CTA

    • "Select Size & Quantity"

  • Only One Child Elemental CTA

    • "Add to Cart"​

Step 6

  • Value Prop Flags on Parent Elementals

    • Product Card Updates​

    • Quick View Updates

    • Product Detail Page Update

Quick View - Package.png

Part II: Quick View Enhancements

Part 2, broken into 3 steps, involved enhancements made to the quick view. These steps removed unnecessary information, added image carousels, and used the universal styling component (completed in Part I).

Step 7 - Addressed in Step 1

  • Price Display

  • Name / SKU / item Detail Display

  • Badges

  • Value Prop tags

Step 8

  • Remove unnecessary information

    • Ship to

    • Social Sharing

  • Update design of Sticky buttons

Step 9

  • Remove image carousel

  • Update Elemental Bullets

    • Add elemental images​

    • Item Size location & style

    • Item Quantity location & style

Part III: Elemental Option Selector Enhancement

This enhancement introduced the option selector modal and experience on the respective products. This design walked users through their shopping decision for one product.

Step 10

  • Product Card instance

  • Quick View display

  • Product Detail display

Select CTA - Option Selection.png

Part IV: Elemental Quick View Enhancement

To complete the Product Card Reskin, the final part combined portions developed in Part I and Part III to implement the Quick View for elemental products.

Step 11 - Addressed in Step 1

  • Price Display

  • Name / SKU / item Detail Display

  • Badges

  • Value Prop tags

Step 12 - Addressed in Part IV

  • Option Selector Enhancement

To Developers, From UX – The Hand Off Files

Every step had their own respective hand off file where details were explicitly written. Developers were free to reach out with questions or concerns.

​

The example below shows a portion of Step 1's hand off file.

Step 1 - Universal Specs
designt_ideate.png

What's Next?

Often, our users are asked:

  • What features would you want from Omaha Steaks?

  • What changes would you make to the experience?

Here's what users had to say:

"... add a table to compare packages..."

​

"maybe a comparison feature"

​

"Compare packages option might be nice"

​

"Add a compare, sort and filter option to EVERY page!"

Comparison Feature

The Product Card Reskin is only the beginning of the journey to solve the Package Comparison difficulty. A comparison feature would help users find products across different pages to then compare. This would progress their shopping journey and assist in their purchase decision.

Filtering & Sorting

Alongside a Comparison Feature, filtering and sorting is a great way for users to isolate the options that meet their needs. Improved filter and sort capabilities would ease package comparison as users would be able to compare against products that are most intriguing.

So, How Might We?

  • How might we allow users to access the comparison feature on desktop and mobile?

  • How might we display the compare feature responsively?

  • How might we let users add products to the compare feature?

  • How might we permit users to perform the following functions from the compare feature?

    • Add to Cart​

    • Favorite

    • Remove

bottom of page