In e-commerce, it is user experience that makes the difference between
a completed purchase and an abandoned cart.
Background and pain points
Prior to 2019, customers who want to add a wireless line through e-commerce channel are presented with a very complicated purchase path built on old technologies which don’t support responsive design. Customers can only perform one transaction type at a time. For example, during the promotion period (such as new iPhone launch), it is a common scenario for a multi-line account customer to add a new line and upgrade an existing line at the same time. However, due to the technical limitation, the customer had to do multiple transactions to achieve this, i.e., one transaction for adding and another for upgrading. In addition, customers won’t be able to take advantage of various promotions such as promotion code, BOGO during online transactions. All these results in poor customer experience and low conversion rate (<3%).
Project goals
The overall goal of the project is to build simple, intuitive self-service digital acquisition experience for existing T-Mobile customers using the new Angular framework. I set four goals specific for design:
Streamline and simplify the online purchase flow
Enhance the flow to support various promotion scenarios and reflect accurate pricing.
Design for responsiveness
Create a unified experience for various transaction types, such as upgrade, accessories purchase, and add a wireless line.
Research methods
I utilized various research methodologies for this project:
Web analytics of the current site, such as heat map, funnel analysis, clickthrough and drop pages, etc.
Internal usability reports, survey data, focus group videos and reports.
Working with various teams to obtain customer verbatim cross channels, such as messaging chat, calls, retail records, etc.
Market research, competitive analysis, white papers, industry reports, etc.
Design Principles
Simple: making the buy flow short and clean so that users can accomplish the task easily
Considerate: Present a clear and complete shopping cart so users see all key pricing details and feel confident to proceed.
Smart: customize the experience based on users’ purchase intention.
Easy: Organize the massive amount of information in a way that is easy to scan and not overwhelming.
Metrics
Conversion rate.
Transaction share on digital channels, both in mobile and desktop.
Cart abandonment rate.
Customer satisfaction score.
Page view.
Promotion redemption rate.
Design Comps
This project consisted of 5 phases based on the business prioritization and engineering schedule. Currently, phase 1 design is completed and is being developed by the engineering team (scheduled to released in late Jan 2019). I was working on the design for phase 3. Here are some design examples.
Example 1: Define the flow for AAL in online store
Simplified the whole flow and reduce the steps. Ran Userzoom to validate the new flow. The result shows 75% users prefer the redesign.
Example 2: Purchase intent page
Re-architected the structure of sales entry point, designed the page layout based on user data and business prioritization, and presented a much simpler and cleaner design to capture users’ purchase intention.
Example 3: Plan Cost page
Offered a more transparent purchase experience by presenting the mandatory cost upfront. The new page consolidates several pages in the buyflow.
Example 4: Shopping cart page
Redesign the cart page to support multiple lines purchase, identify the most important tasks for the cart and top reasons for the abandonment. Clearly indicate the item price, discount, monthly vs one time charges.
Outcome
6 months after release on July 2019:
244%
increase in digital channel share
60%
increase in add a line orders
80%
increase in conversion.