The Accu-Chek eCommerce Experience

The challenge was to enhance the purchase experience, re-design the subscriptions flow and revamp the look and feel for Accu-Chek.com.

Duration
May – Dec 2019 (8 months)
Team
Andres Peña, Evan Deal, Mike Murtagh, Josh Rowland
Role
UX Designer
Tools
Design Workshops, Adobe XD, InVision
The Accu-Chek eCommerce Experience project walkthrough

Summary

Overview

This project aimed to re-look at the current landscape of eCommerce offerings introduce a new seamless subscription and checkout process. Owned and led the entire process including UX Research, Interaction Design, Visual Design and Prototypes. Tools: Design Workshops, Adobe XD, InVision.

Context

Understanding the problem

UX Audit

Existing Accu-Chek web properties
Fig. 02Existing Accu-Chek web properties

Inconsistent & Cluttered UI, Information Overload, Too many CTAs, Unclear product information.

Analytics Data

Analytics funnel showing 21% conversion
Fig. 03Analytics funnel showing 21% conversion
21%Conversion

Design Workshop

Created worksheets and conducted design workshops involving the cross-disciplinary team.

Analytics data · 13 frames

Analytics data
Fig. A1Analytics data
Analytics data
Fig. A2Analytics data
Analytics data
Fig. A3Analytics data
Analytics data
Fig. A4Analytics data
Analytics data
Fig. A5Analytics data
Analytics data
Fig. A6Analytics data
Analytics data
Fig. A7Analytics data
Analytics data
Fig. A8Analytics data
Analytics data
Fig. A9Analytics data
Analytics data
Fig. A10Analytics data
Analytics data
Fig. A11Analytics data
Analytics data
Fig. A12Analytics data
Analytics data
Fig. A13Analytics data

Pain Points

Multiple disjoint platforms and subscription services

Multiple disjoint Accu-Chek platforms
Fig. P1Multiple disjoint Accu-Chek platforms
Subscription services across Accu-Chek properties
Fig. P2Subscription services across Accu-Chek properties

Current User Journey: Three URL jumps for Checkout

Current user journey across three checkout URLs
Fig. P3Current user journey across three checkout URLs

Mandatory account verification hinders the checkout process

Account verification interruption during checkout
Fig. P4Account verification interruption during checkout

The Problem Statement

Picking apart the challenge statement and based on my analysis, these are the key problem areas I tackled during the project.

  • How can we create a new unified Accu-Chek Subscription experience?

  • How can we simplify and fasten the Checkout experience?

  • How can we provide better accessibility settings?

  • How can we design with scalability, consistency in mind for future updates?

Needs and Goals

Business Needs: Increase Conversion on Subscriptions, Be more trusted in the diabetes care domain, Doing what is best for the patients.

User Needs

  • Seamless Checkout
  • Easy Navigation
  • Information about products
  • Transparency
  • Customer Support

Overarching Goals

  • Introduce a new Subscription experience which covers all offerings
  • Improve the Checkout flow
  • Create a modern and clean look and feel for the website
  • Glorify the main and premium products
  • More than 1% increase in the current subscriptions

KPIs considered for Growth

  • Increase conversion rate
  • Improve quarter-on-quarter sales %
  • Increase in the current subscriptions

Design Process

Process

Four-phase design process
Design ProcessFour-phase design process

Design Exemplars

Because people already do subscriptions elsewhere! Referenced Dario, One Drop, Dollar Shave Club and Birchbox.

Design exemplars · 4 frames

Dario
Fig. 05aDario
One Drop
Fig. 05bOne Drop
Dollar Shave Club
Fig. 05cDollar Shave Club
Birchbox
Fig. 05dBirchbox

Solution Exploration

Website Revamp: as the current experience is dated and needs significant improvement, this is the best place to start of a MVP. Improving the Journey: only designing a better looking website will not help unless the underlying process is not re-imagined — the idea is to consolidate all offerings under one roof and streamline the process. Design Approach: Mobile First Responsive Web Design (RWD).

Consolidating offerings under one roof
Fig. 06Consolidating offerings under one roof

Ideation

My work spread over several months. I had multiple iterations for each module and gathered feedback from the product owners and developers during design critique sessions to iterate.

Subscriptions

User Testing (A/B Test): 8 users via UserTesting.com.

8users via UserTesting.com
  • “Users wanted to see more details about the subscription bundle and the meters they were getting with it.”
  • “Users mentally calculated the number of test-strips they needed to select the best option.”
  • “Users were positive about using a Social Login to avoid account verification.”

Subscriptions iterations · 3 frames

Subscriptions flow, iteration 1
Fig. 07Subscriptions flow, iteration 1
Subscriptions flow, iteration 2
Fig. 08Subscriptions flow, iteration 2
Subscriptions flow, iteration 3 — revised after user testing
Fig. 09Subscriptions flow, iteration 3 — revised after user testing

Checkout

User Testing - Round 2: 10 users via UserTesting.com. Feedback: 8 completed the tasks and were delighted by the new predictive approach; 2 couldn't complete the task as they found the process confusing initially but later understood the concept of "Suggested Test Strips".

Checkout flow, initial iteration
Fig. 10Checkout flow, initial iteration

Checkout steps 1–3 · 3 frames

Checkout flow, step 1 of 3
Fig. 11Checkout flow, step 1 of 3
Fig. 12Checkout flow, step 2 of 3
Checkout flow, step 3 of 3
Fig. 13Checkout flow, step 3 of 3

Design Handoff

ALL designs were made using Adobe XD. I leveraged the Share → Development feature to handoff all designs. Below is a design system that I created for the developers.

Design system created for developer handoff
Fig. 13Design system created for developer handoff

Final Designs

As the intended audience are diabetics, over time they could develop diabetic retinopathy. To help them read better there is a high contrast mode and a text size increase option.

Subscriptions Page

From stepped approach to a "one page" approach for the Subscriptions page to avoid decision fatigue for the users. Solved pain point: users can now see the total steps required and they can easily go back and forth to make changes before checking out the custom build subscription package.

Subscriptions Page final solution · 1 frames

Final one-page Subscriptions design
Fig. 14Final one-page Subscriptions design

Cart

Cart page distinctly illustrates the Subscriptions and the current products being purchased by the user. It also incorporates relevant pricing along with a "Promo Code" section. Solved pain point: subscriptions and which are one time purchases are clearly shown.

Cart final solution · 1 frames

Final Cart page design
Fig. 15Final Cart page design

Sign In / Register

This page has two clear CTAs for Sign-in and Register with Social OAuth logins which the users found helpful in the User Testing. Solved pain point: the need for a verification with the OAuth Facebook and Google Login pages — this was a major drop-off point for the users while checking out.

Sign In / Register final solution · 1 frames

Final Sign In / Register page design
Fig. 16Final Sign In / Register page design

Shipping

The Shipping page adapts first time and returning users. Solved pain point: contact cards help fasten the checkout flow.

Shipping final solution · 1 frames

Final Shipping page design
Fig. 17Final Shipping page design

Billing

The Billing page was a separate page in the old system and as an MVP the team wanted to retain this page. Solved pain point: this is a non-mandatory step with the page having a nifty "Same as Shipping Address" button to choose the same address as before.

Billing final solution · 1 frames

Final Billing page design
Fig. 18Final Billing page design

Payment

The Payment page still lives on a third party page of Adyen but to bridge the experience: the interactions and look and feel are in sync with the new Checkout system. Solved pain point: the page is designed to make the users feel there is little or no transition to the payment page since we cannot move to a Roche hosted payment page due to legal and technical challenges.

Payment final solution · 1 frames

Final Payment page design
Fig. 19Final Payment page design

Confirmation

This page gives a summary of the entire order — from the order number to the shipping and billing information to the products ordered. Solved pain point: this page has become transparent and information rich; earlier only the order number was shown as a confirmation.

Confirmation final solution · 1 frames

Final Confirmation page design
Fig. 20Final Confirmation page design

Challenges Faced & Key Takeaways

Being a solo designer

Having no designers on the team to bounce your ideas on was a major pain point other than the multiple sub-projects I was involved in. What I did about it: reached out to a UX Researcher on a bi-weekly basis to have informal discussions about the designs; created a self-work management tracker on Notion.io to manage the deliverable deadlines.

Limiting technical architecture

Any new changes on a technology standpoint had to be approved by the Global IT and Legal team which usually takes more than a quarter; the current platform jumped between Magento and SFCC. What I did about it: made sure my designs had a staged approach — fulfilled the current needs and created a final desired state for the designs.

Listen and observe what the users do

More than listening to what users say, we need to observe what they do while testing a prototype. Over multiple instances users said they wanted to buy a set of test strips but while choosing options during the tests users did mental calculations on how many test strips they might need, and it always turned out to be different than what they had predicted.

Technology impacts design

It is always best to consider the technology and its limitations to find workarounds and come up with a better solution. Looking at the technical architecture and understanding the amount of time and effort required for changes defines the best MVP.

Design with stakeholders

Utilize the domain expertise of experienced people. I conducted workshops with these experts to understand their perspective on how they envisioned the system. Their thoughts and ideas helped me shape a better buying experience for the users, and doing this makes them feel involved and thereby being less resistant to changes.

Be flexible and patient

Designing in the enterprise domain, especially in healthcare, is going to be slow. Accept it. There are multiple approvals and legal clearances that are needed before things can be changed. Design incrementally, have multiple versions starting from the MVP to the best possible solution.

Evidence and attribution

Owner-published case study. Public copy is verbatim from the owner's original case-study page (content/migrations/legacy-portfolio/cache/roche/scrape-raw.json); underlying research artifacts and post-launch results remain pending.

Evidence IDs: evidence_accuchek_ux_audit, evidence_accuchek_analytics_baseline, evidence_accuchek_usertesting_round1, evidence_accuchek_usertesting_round2, evidence_accuchek_accessibility

I'd love to connect with you.

For the underlying artifacts, contribution detail, or a walkthrough of the work, get in touch.

Start a conversation