AJ Harris

I redesigned the mobile comparison table and developed a fully functional prototype for user testing.

Client:

AT&T Business Digital Experience

My Role:

Product Designer

Year:

2023

THE PROBLEM

On mobile, the existing plan comparison table restricts effective plan comparisons for customers.

Following numerous consultations with the UX Team (us), it was deemed crucial by the stakeholders to alter the design strategy for this mobile comparison chart.

PREVIOUS DESIGN

Previous Design & Functionality

In the current mobile comparison table, it's clear how challenging it is to compare plans. The design, which mimics the desktop version, sacrifices functionality by losing the X and Y axis headers, forcing customers to rely on memory alone to compare plans. Additionally, there's no way to control the comparison. My goal was to steer the design toward a solution that offers a better comparison experience.

RESEARCH

Research Insights

The CX Team at AT&T conducted user testing on the current design of the comparison table. Based on the research, I identified the friction points users encountered and critical findings.

Moreover, I conducted competitor research and studied the best practices for comparison tables on mobile devices with the help of the Neilson Norman Group website.

Findings

Users want to be able to research what is most important to them. They want to control the experience.
Users expect a truncated mobile view.

A bar chart displaying a research question with respondants answer.

Best Practices (via NN/g)

It's impossible to show the user everything at once.
Only offer the tools essential to completing the task.
Allow users to hide what is irrelevant to them.
Allow users to select which two items they want to compare.

Competitors solutions

(store.google.com)

Screenshot of google device comparison table.

(apple.com)

Screenshot of apple's device comparison chart.

SOLUTION

Fixed Headers

A key enhancement to the plan comparison table is the addition of a fixed header. Previously, as users navigated, plan labels would disappear, making comparisons difficult. With the fixed header, labels stay visible, simplifying the process and improving the overall user experience.

Enhanced Control and Customization

The new design prioritizes user control and customization, enhancing functionality and experience. Following Nielsen Norman Group (NN/g) best practices, users can expand or hide information to focus on what matters most.

Additionally, users can select and compare two plans at a time, streamlining the process and reducing cognitive load. This approach improves efficiency and makes the interface more intuitive and engaging.

Constant Plan Pricing Visibility

Keeping the plan pricing visible in the fixed header enhances the user experience by allowing easy, informed comparisons. With pricing always in view, users can compare costs across plans without scrolling back and forth, reducing effort and letting them focus on other details with confidence.

Mobile Plan Comparison Table Redesign

Mobile Plan Comparison Table Redesign

Mobile Plan Comparison Table Redesign

Mobile Plan Comparison Table Redesign

THE PROBLEM

THE PROBLEM

On mobile, the existing plan comparison table restricts effective plan comparisons for customers.

On mobile, the existing plan comparison table restricts effective plan comparisons for customers.

PREVIOUS DESIGN