A cart drawer for transparent pricing and intuitive shopping.

 

The Project

Role | Responsibility

Title: Product Designer II, team of 2

Solving the problem of helping users understand multiline discounts and bundle building in addition to our UXR defined pain-point of needing more transparent pricing, we landed on developing a cart drawer as the best solution.

Tools

Figma, Figma Slides, Figjam, Google Meet, Jira

Scope

Competitor research, cross functional team critiques, design collaboration, lo-fi, mid-fi, hi-fi wireframes, prototyping

 

About Boost Mobile

The fourth largest wireless carrier, Boost Mobile is an Echostar company which has 6,700 employees globally with roughly 43,000 visitors daily to their website, www.boostmobile.com.

The Problem

Our UXR was reporting that our users were having several problems: one was that they were struggling to understand how discounts (specifically multi-line and bundle building) in addition to more transparent pricing.

A major distinction with purchasing devices and plans, which is different than all other online shopping experiences, is that a device and plan work together to add one single item to cart, each dependent upon the other. In addition to this, users will need to understand the immediate checkout price in addition to the monthly price. This creates a unique challenge when approaching the shopping experience, particularly on mobile, where a user needs access to a lot of information within a small screen in order to make informed and confident purchasing decisions.

How Can We Measure Success?

  • We will use our UXR research and solve for known pain-points.

  • We will use competitive research to help us make informed design decisions.

  • We will perform user-testing to ensure comprehension and ease of experience.

 

Discover + Define

When beginning with our user pain points in mind, my first idea was to create a flow for users who want to add multiple lines to their cart a way to do so that helps them ensure they are adding everything needed to create a full cart-item, in addition to displaying all applicable discounts when available.

This solved for creating ease for our users who know what they want, and allowed them to see their discounts applied in real time and allowed them the ability to edit either the device or plan, without wiping the entire item from cart if they wanted to edit.

but… can we do better?

While we agreed this flow is strides above our existing experience, we wanted to challenge ourselves to allow our users to be able to enter and exit their bundle-building experience naturally, creating a more natural shopping experience where we don’t trap our users, instead we allow them to explore and add organically, helping them to understand when cart items are incomplete, but also allowing them to shop in the way that is the most natural to them.

 

Enter, Cart Drawer

What if you could add, edit or delete cart items and know when items are incomplete from anywhere in your shopping experience?

Incomplete cart item

With our consideration of cart drawer, we allow our users to immediately understand an item has been added to cart, in addition to being able to identify that they may need to add a device or a plan in order to complete an item.

Users will see a omni-present cart while they are completing cart items, in this instance above, a users has added a device, yet still needs to add a plan.

Cart items can be collapsed and expanded to view their details.

Completed cart items have a menu, allowing the user edibility at any step along the way.

More Pages From the Guidebook