Interactive Axure Shopping Cart Prototype

A Complex Axure RP Prototype used for Formal Usability Testing

After the DirecTV merger, the AT&T Buy Flow line of business needed to integrate DirecTV product offerings and content into the established AT&T online shopping experiences. We needed to build a digital model that mimicked the live experience. 

A basic Axure prototype of the AT&T shopping cart had been created to support previous project efforts but would not suffice for the DirecTV content integration usability test.

“A common mistake in usability testing is to define the study scope too narrowly. You usually gain invaluable lessons from broader tasks and having users approach the problem from scratch instead of taking them to an artificial starting point.”

Nielson Norman Group
Getting Users to a Specific Feature in a Usability Test

A dynamic Axure prototype would be a better test aid for this important effort. A more real-to-life prototype would allow test subjects to click around the interface freely (“cognitive walk-through”) while also allowing the test moderator to focus on collecting relevant user feedback.

To accomplish a more dynamic, free-choice prototype, I leveraged Axure’s full range of Object Oriented Programming (OOP) and interactive capabilities.

Directv loyalist

Ken Smith

Age: Mid 30’s

Occupation: Restaurant Manager

Status: Single

Location: Baltimore, MD

Income: ~$65,000 / year

 

  • Online Shopping 82% 82%
  • Mobile Apps 95% 95%
  • Merger Anxiety 95% 95%

Affinity: He watches local television and sports channels in his spare time; especially to wind down in the evening after a long night at work.

Technical Saavy: He has grown comfortable using DirecTV portals before the merger. He knew where to find bits of information and was able to manage his account fluidly and without much friction.

Attribute: Anxious that the merger will force change on his account, pricing and product features.

Attribute: Doesn’t want to go through the hassle of switching carriers but already looking around; assuming a worse case scenario.

Attribute: He is considering buying his first home this year and is serious about penny pinching; bundling services is a topic he will consider.

 

Test Case

What complications will former DirecTV users encounter when adapting to the new AT&T shopping cart?

Scenario

AT&T and DirecTV have merged. You are still subscribed to the DirecTV Select plan. You are interested in changing your TV plan so you get more channels.

You are also interested in maximizing the discount opportunity associated with the Watch More, Save More discount offer.

User Task 1

Change your current TV plan to any other plan with more channels and…

User Task 2

Make whatever changes necessary to your account that allows you to take full advantage of the Watch More, Save More discount offer.

Task 1
Cognitive Walkthrough Results

  • Users struggled to find/click the Change plan text link…
  • However, once found, users quickly identified and understood the various TV plan product tiles.
  • Most users were unable to track and understand all of the triggered interactions that occur automatically after choosing a new TV plan.
  • Many users thought they needed to click the Continue button in order to address Task 2 objective; they did not notice the tabbed content option Channel Add-ons nor did they associate that language (Channel Add-ons)  with the goals of Task 2.
  • After completing both Tasks, and continuing, many users assumed the shopping cart total was the exact amount they would pay and were surprised to find a different amount on the confirmation page before completing/processing their order. Several users attempted to use the browser’s Back button in order to compare the line item details of the confirmation page against the shopping cart (sidebar).

%

...of users tried to achieve the right outcome

%

...associated the correct action with the outcome they expected to achieve

%

...noticed that the correct action was available

%

...saw progress made towards their intended outcome after choosing the correct action

FITTS’S LAW

MT = a + b * log2(2A/W)

MT: Movement Time (time to select target measured in milliseconds)
a: Interceptor (time it takes to press the mouse button; a constant)
b: Slope (speed of mouse pointer; a constant)
A: Amplitude (distance from starting point to center of target)
W: Width of Target (along axis of motion)

HICK’S LAW

Increasing the number of choices a user can make will increase their decision time logarithmically.

Task 2
COGNITIVE WALKTHROUGH Results

  • Users struggled to relate the Buy More, Save More (BMSM) options already associated with their account to the other remaining options available.
  • Similarly to Task 1, users were unable to track and comprehend all of the transactions that occurred after a selection; the yellow color background of new items added to the cart did not resonate with users.
  • Many users thought they needed to click the Continue button in order to address Task 2 objective; they did not notice the tabbed content option Channel Add-ons nor did they associate that language (Channel Add-ons)  with the goals of Task 2.
  • After completing both tasks, and continuing, many users assumed the shopping cart total was exact amount they would pay and were surprised to find a different amount on the confirmation page before completing/processing their order. Several users attempted to use the browser’s Back button in order to compare the line item details.

%

...of users tried to achieve the right outcome

%

...associated the correct action with the outcome they expected to achieve

%

...noticed that the correct action was available

%

...saw progress made towards their intended outcome after choosing the correct action

Source: Formative vs. Summative Usability Evaluations, Nielson Norman Group (NN/g), Maria Rosala, Jan. 4, 2019

COGNITIVE WALKTHROUGH

TASK 1 TEST RESULTS

%

...of users tried to achieve the right outcome.

%

...noticed that the correct action was available to them.

%

...associated the correct action with the outcome they expected to achieve.

%

...saw progress made towards their intended outcome after choosing the correct action.

COGNITIVE WALKTHROUGH

TASK 2 TEST RESULTS

%

...of users tried to achieve the right outcome.

%

...noticed that the correct action was available to them.

%

...associated the correct action with the outcome they expected to achieve.

%

...saw progress made towards their intended outcome after choosing the correct action.

FITTS’S LAW

MT = a + b * log2(2A/W)

MT: Movement Time (time to select target measured in milliseconds)
a: Interceptor (time it takes to press the mouse button; a constant)
b: Slope (speed of mouse pointer; a constant)
A: Amplitude (distance from starting point to center of target)
W: Width of Target (along axis of motion)

HICK’S LAW

Increasing the number of choices a user can make will increase their decision time logarithmically.

Source: Formative vs. Summative Usability Evaluations, Nielson Norman Group (NN/g), Maria Rosala, Jan. 4, 2019

Global Variables

Assuming a particular starting point in order to track change

This Formative user test relied on tracking the user’s ability to identify certain user interface options in order to accomplish each task. The test scenario required observing test subjects defined as “existing customers” and therefore the test began with the user in possession of certain product offerings already applied to their fictitious account.

I used Axure’s Global Variables capability to establish the test subject’s predetermined account conditions and then listened for user event triggers during the test to update the interface according to conditional logic instructions. Mathematical expressions were used to update cart totals dynamically. All transitions and interactions relevant to the test scenario mimicked the live AT&T site (at that time).

Dynamic Panels & Conditional Logic

Prototype architecture accommodated multiple scenarios through conditional logic and dynamic view states

Understanding the various content view states and the conditions that trigger their display was an important part of building the prototype. I inspected the live AT&T site constantly to ensure the prototype was a mirror image of the live experience.

Recap & Outcome

Total success! The prototype served its purpose perfectly for this formal Summative user test. Test moderators were allowed to focus on the user and the test objectives versus babysitting the prototype and guiding the test subject on where and what to click. Test subjects were able to click around a mock experience as if it were the live AT&T shopping cart and test metrics were collected with confidence. 

The greatest compliment came when I was asked to participate in the test itself. I was allowed to ask test candidates questions, monitor their behaviors and brainstorm the results; a true privilege. 

AT&T Inc. is a modern media company that brings together premium content, direct to consumer relationships, advertising technology and high-speed networks to deliver a unique customer experience (Glassdoor).

Web:
att.com

Size:
10,000+ employees

Headquarters:
Dallas, TX

Industry:
Telecommunications Services

Competitors:
Comcast, Cox Communications

Revenue:
$10+ billion (USD) per year

Methodology
Autonomous

Back-end System
Not applicable

Front-end Framework
AxureRP / Not applicable

Development
Not applicable

Total success! The prototype served its purpose perfectly for this formal Summative user test. Test moderators were allowed to focus on the user and the test objectives versus babysitting the prototype and guiding the test subject on where and what to click. Test subjects were able to click around a mock experience as if it were the live AT&T shopping cart and test metrics were collected with confidence.

The greatest compliment came when I was asked to participate in the test itself. I was allowed to ask test candidates questions, monitor their behaviors and brainstorm the results; a true privilege.

AT&T Inc. is a modern media company that brings together premium content, direct to consumer relationships, advertising technology and high-speed networks to deliver a unique customer experience (Glassdoor).

Web:
att.com

Size:
10,000+ employees

Headquarters:
Dallas, TX

Industry:
Telecommunications Services

Competitors:
Comcast, Cox Communications

Revenue:
$10+ billion (USD) per year

Methodology
Autonomous

Back-end System
Not applicable

Front-end Framework
AxureRP / Not applicable

Development
Not applicable

 This may be the best prototype we’ve ever seen here in the AT&T lab!

Gale D.

User Experience Researcher, AT&T

"The more engaged users are... the more functionality an application can sustain."

-Jakob Nielsen