top of page

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

PersonalMark_01-03.png

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

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.

Diagram of Insights 4-5
designt_ideate.png

Ideate

version1.png

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

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

Option Selector - Desktop
Option Selector - Mobile
bottom of page