Spectrum E-Commerce

Improving Usability through Ideation and Testing

Project Overview

Spectrum’s e-commerce platform is essential for customer acquisition, guiding users through selecting and purchasing internet and TV packages. However, usability testing revealed friction in the buyflow, leading to pricing confusion, navigation challenges, and cart abandonment.

Goals:

Improve pricing clarity to reduce confusion.
Enhance navigation & guidance to simplify decision-making.
Optimize cart & checkout to reduce drop-offs.

My Role:

Senior UX Designer

Led user research, wireframing, UI design, and prototyping.
Partnered with product, content, and engineering to drive alignment.
Conducted A/B testing and optimization in collaboration with research and SEO teams.

Timeline

February 2021 - November 2021

Product Vision

Before making any design changes, I aligned with the team’s vision and objectives to understand their plans for optimizing the product.

Key Focus Areas:

Replace long scrolling with step-by-step navigation.
Improve structure for a clearer selection process.

Original Design Structure: With a single-page scrolling format, users had to navigate to the Internet, TV, and Home Phone services all on one page.

Old vs. New Navigation

Old Experience: Single Page Scrolling

Users had to navigate the Internet, TV, and Home Phone services on one long page, which made it difficult to compare and select services.

New Experience: Step-by-Step Navigation

Services are split into dedicated sections for more straightforward navigation.
Progress indicators provided a clear sense of where users were in the flow.
Simplified service selection, reducing decision fatigue.

Wireframing the Experience

I developed low-fidelity wireframes to validate the new approach exploring different interaction models.

Wireframe Goals:

Break long scrolling into structured steps.
Introduce clear sections for service selection.
Simplify browsing and comparison.

Usabilty Testing and Iteration

After developing the wireframes, I pushed them to high-fidelity UI prototypes for usability testing. This ensured the visual design, interactions, and user flow were validated in a real-world scenario.

Round 1: Initial Usability Study

10 Participants, Desktop Only

Users struggled to notice when an item was added to the cart.
The "Continue" button was often overlooked, making progression uncertain.
Users wanted to explore Special Offers first before selecting services.

Round 2: Usability Test

16 Participants, 8 Desktop, 8 Mobile

Users expected a more traditional "Add to Cart" button instead of the Card Toggle.
Unclear which selections were required to proceed.
Some users liked Expandable/Collapsible Columns, but others preferred all details visible.

Desktop Experience: Card toggle, tags and expandable columns.

Mobile Experience: Card toggle, tags and expandable columns.

Round 3: Final Usability Test

8 Participants, Desktop Only

Users liked the flexibility to choose a single service or bundle
Two participants expected guided recommendations instead of manually selecting bundles.
Three participants preferred all details visible by default.

Measuring Website Performance

A/B Test Analysis

To assess selection clarity and discoverability, we measured real customer interactions on Spectrum’s e-commerce website over 3 months, from May to June 2021. Customers were randomly segmented into two test groups to ensure unbiased data collection and statistically significant results.

Test 1: Add to Cart vs. Card Toggle

To ensure a fair test, customers visiting the Spectrum e-commerce website were randomly assigned to one of two variations. Measuring selection clarity, engagement rate, and time on task.

Card Toggle

72% of users understood the selection immediately
68% successfully added services on the first attempt
+13% Increase

Add to Cart

85% of users understood the selection immediately
81% successfully added services on the first attempt
+19% Increase

Final Decision:

Users found "Add to Cart" clearer and more intuitive, reducing hesitation and selection errors. Moving forward, "Add to Cart" replaced the Card Toggle interaction.