TELUS Cart Redesign

Summary: I redesigned the TELUS cart to support different products and services, and to reduce cart abandonment.

Responsibilities & Deliverables: Wireframes, Visual Design

Research Activities: Usability Testing, A/B Testing

Duration: 6 Months (Multiple releases), Shipped Mid 2018 - Early 2019

Overview & Problem Statement

TELUS has many products and services. However, the purchase flows of each product was inconsistent and did not funnel to the same cart. Because TELUS services are often “bundled” (ie. An Internet and TV bundle), this posed a huge pain point for customers and their ability to shop for anything, anywhere on the website.

I was responsible for designing a new cart structure that would be able to scale for multiple products and services in a singular cart experience.

Overall business and UX goals of the redesign

Pricing must be clear to customers
IA of the cart makes sense and is easy to scan
Cart should have the ability to cross/upsell different services and add-ons
Scaleable for new products
Improve checkout rates/Reduce cart abandonment

Auditing the cart

I did an audit of the cart to understand it’s core content. I was able to categorize everything into these main buckets.

Service (ie. Internet, TV) and applicable details
Upsell/Cross selling
Price Summary Box
Equipment
Channels
Add-ons
Gifts
Discounts

I grouped these categories into different sections. Each section had information, images and pricing pertaining to one service.

The idea is that as we start to add more services into the cart, they would be compartmentalized, with the hypothesis that this is the best way to organize the content

Extra complexity: understanding “bundling”

Bundling is combining 2 or more services to receive special discounts or gifts. The special discounts and gifts are based on what type of bundle you added and contract length.

Ideating

I ran a workshop with my product team (product manager, developers, QA & scrum master) to get everyone’s perspective and ideas on what the different states of the cart could look like. I posted the core categories on the whiteboard, breaking those further down into sub-categories. I had the team post up any gaps that needed to be explored in the redesign. From there, we all sketched and shared our ideas.

Using the ideas and insights from the workshop, I started creating wireframes of the different cart components and what they might look like.

I really liked the idea of having a “Fill in the blanks” feature for the cart, so that if a customer started customizing a bundle, they would be notified in the cart that something was missing — what we call an “invalid cart state” — before they could complete the checkout process.

Additionally, to help guide customers with completing the cart, I created different types of notifications that could be used on the page

Adding Notifications

I continued to expand on the notification concept, creating different types to alert customers of the changes in their cart. I played around with ideas like being able to confirm/cancel changes, and having the ability to change your promotion type (gift or discounted price) Ultimately, the notification concept was simplified to give customers instructions on how to complete their bundle (and thus, making their cart valid for checkout).

Upselling in the cart

We try to leverage as many opportunities as we can to upsell or cross sell different services. The cart was no exception. I created a dedicated block for these cross-sells that looked different to catch the eye a little better. Working with the copy writer and developers, I tried out different variations of copy and CTAs to optimize for space (reducing line height)

Adding Channels

When it came time to add Pik TV to the cart, I played around with the visual design of how the channel selection could look like, carrying forward the concept of having a “fill in the blank” state.

Usability Testing

The cart went through monthly usability testing (or as needed) as I worked on including new services. I was able to test the end to end experience of the checkout process by combining prototypes with the other teams. This helped give a better idea of the holistic and contextual experience. I would seek answers the following questions:

Are CTA’s (Call to action) clear?
Do customers understand pricing?
Do customers understand what’s in their cart?
Is there enough information here for the customer to feel comfortable with checking out?

I assisted our UX researcher in running moderated usability tests and contributed to the discussion guide. I would either facilitate or take notes during the sessions.

General Findings:

What’s included in the cart generally made sense
More often than not, customers had trouble understanding how discounts work
Product images help customers identify what’s included
People utilized either the notification, or “fill in the blank” CTA to proceed to the next step

Final Designs

These are the final hi-fidelity designs. I created everything using a combination of elements/components in the TELUS design system, as well as creating new ones by following brand guidelines and validating the designs through testing.

Release 1 - Internet only

Release 2 - Pik TV

Release 3 - Optik TV

A/B Testing & Results

These results are based on one month’s worth of data, collected during May-June 2018. Overall there was a positive change in KPIs, with checkout rates increasing by 14% and exit rates decreasing by 10%.