top of page

Product Cards

An overhaul that listens to customers and establishes a design system.

mock.png
Overview

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 at Omaha Steaks

UI Design, Interaction Design

HANDOFF

From UX, To Developers

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.

uni-spec.png

IMPLEMENT

How was this 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.

TEST

Let's test again

 Unmoderated Usability Study

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

Objective

Test the updated product cards against the original Legacy product cards to gauge ease of product comparison and preferred design.

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

Problem Framing

How might we ________  __________?

[verb]

[issue]

The journey to Version #3, the Final Version, started off with HMW's to guide new iterations.​ So, how might we..

  • display all of the information without overwhelming the user with loud text?

  • convey the most important contents of a package?

  • fix the height inconsistencies?

  • accommodate for all different types of products?

Current Design - 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​

ins123.png

DEFINE

The Problem

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. In this case, there were two personas to consider: new vs. returning customers.

User Journey

userjourney

IDEATE

Time to Design!

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

Who We Talked To

  • Purchased within 6 months

  • Purchases Omaha Steaks 2+ times per year

  • Buys for self and someone else

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

pckg-qv.png
version 1.png

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

EMPATHIZE

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.

v3.jpg

Version 3 (The Final Version)

  • The list is abridged and the top five to six items are highlighted.

  • Solved for inconsistent heights​

    • The height allows the card to be seen above the fold

  • Quick View panel functionality to display contents of the package alongside its imagery

  • Button CTA dependent on the type of product

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

ins-45.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.

Frame 8002.png

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

  • pc-nobg.avif

    Broken into 6 steps, this part established the universal styling. It made adjustments to the current height, column, row, and padding styles. 

    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

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

    • Remove unnecessary information

    • "Ship to" section

    • Social Sharing

    • Update design of Sticky buttons

    Step 8

    • Remove image carousel

    • Update Elemental Bullets

    • Add elemental images​

    • Item Size location & style

    • Item Quantity location & style

  • Select CTA - Option Selection.png

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

    Step 9

    • Product Card instance

    • Quick View display

    • Product Detail display

    Step 10

    • Matched universal styling (as defined in Part I)

    • Complete implement of Quick Views throughout the website.

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

  • Images were displayed in a rectangle carousel formal

version 2.png
bottom of page