Streamline customer purchase journey for e-commerce efficiency
Product
ASUS e-commerce
Company
ASUS
Role
UX designer
Device type
Responsive website
Team
2 UX designers
2 UI designers
1 UX manager
1 Product manager
2 Engineers
Time
3 months
Status
Shipped
Overview
Background
Enhance e-commerce shopping experience
ASUS is a Taiwanese company sells various electronical deives, such as desktop computers, laptops, netbooks, and mobile phones. To increase brand visibility and accessibility in the digital world, it has launched a new website in 2021 to develop an e-commerce service rather than selling products only from physical stores.
Challenge
Current web structure is not designed for e-commerce experience
The current web structure is designed for users who would like to browse more products or look up detailed product descriptions. Users need to filter out the technical specs and browse through lengthy marketing content before they can make an order.
Solution
Create a new Store shopping page listing all products & services
The "Store" function was introduced, streamlining access to all e-commerce services and products in fewer steps. The page content includes Product Categories, News and Promotions, Highlighted Products, Benefits to Shop, and Featured Accessories.
Impact
Reduce purchase touch points by 40%
The new Store page has been released on the ASUS website, reducing the purchase journey by 40%. Customers can easily access the page from the navigation bar and add the products to the cart directly from the page.
Project Context
Problem Statement
5 steps required to add a product to cart
The current purchase journey requires 5 steps to reach the "Add to cart" button by firstly choosing product types, series and then in stock, which might discourage users who intend to order directly.
Business Goals
Stakeholders proposed to provide a "Store" function on site
Therefore, our stakeholders proposed providing a "Store" function on the homepage, like Apple and HP, to shorten the purchase journey and target customers who need to order efficiently.
Enhance services visibility
To gather e-commerce related services together, make them easy to reach.
Increase conversion rate
To increase the visibility rate of products, motivate users to purchase more products.
Design Process
I presented my research & wireframes to 100+ stakeholders
As the main designer for this project, I conducted an online survey to understand the needs of users. Next, I studied Apple and HP sites to figure out how they designed their present site as a reference. Based on the findings, we proposed our design idea and wireframes to discuss with stakeholders from all over the world and collect their feedback for iteration.
Research
01 Understand Users
Results show it's difficult to find the products to purchase
We released a quick online survey on the website to collect end-users behavior and feedbacks from different countries.
SURVEY RESULTS
17% customers failed to purchase a product
Most users come to the site for product purchase and get technical support. However, for the former purpose, they often fail in order products due to not finding the specific product easily, unable to order or no price information.
"
It is very unintuitive with so many menus and the information is not clearly displayed, either to buy or to know what the latest products are.
By Spain customers
N=905 (2021/01/29-2021/03/14)
02 Understand Competitors
Apple's "Store" design provides a consistent and clear structure of the products
I analyzed and compared the differences between Apple site and HP site, mainly focusing on the purpose of the Store page and the connection with other pages.
Apple applies the original top menu and displays a row of product lines for navigation, which indeed is easier to understand.
Design Opportunities
1
Provide an easy-access "Store" entrance on platform
2
Centralize shopping-related content & links for users to understand and locate efficiently
Final Design
The purchase touchpoints are shortened into only 3 steps from navigating to the product lists, selecting the products, to adding them to the cart.
Design Solutions
01 Access "Store" easily by providing multiple entrances
I provide the entrances directly from the top menu and footer for easy access. Regarding the button placement, Design B could make it more prominent and noticeable.
02 Provide a tab to help users navigate all product types, directing them to a Shopping page for a specific product
We adopted a horizontal slider to reduce vertical space, placing the most popular products in front. Besides, we experimented with different product line tab styles. Although the white icons look aesthetically pleasing, we believed that Design B with color icons are easier to distinguish among products since there are 7+ product types.
After clicking on a specific product type, it will direct to the Shop page, displaying SKU-based and online available products with buy buttons provided. There's no need to select a series or filter out the products in stock.
03 Centralize e-commerce content to enhance visibility and efficiency
E-commerce related content and links are displayed on the Store/Shop pages, including news & promotions, highlighted products, support, and benefits to shop, etc, allowing customers to find those resources more efficiently.
Iterations
We conducted a design review meeting with 100+ locals from various countries to discuss our "Store" design proposals, and we made some design iterations according to their feedback.
01 Provide "Add to cart" button directly on product card
Clicking on the cart button is the final destination in the purchase journey. Providing an "add-to-cart" button directly on the product cards ensures that every click users make takes them one step closer to converting, which could increase the conversion rate and increase the possibility to add products in cart.
02 Apply manual infinite scrolling button to reduce cognitive load
Infinite scrolling could cause a bad scrolling experience, especially for Indian users who tend to use mobile devices to view our website. Therefore, I analyzed the pros & cons of different scrolling approaches, and we ended up choosing manual infinite scrolling.
Providing a set number of products with a "Show more" button at the bottom is the best approach for e-commerce platforms, which encourages users to browse more products but also stay engaged. For Mobile devices, the page would only load 15 products at once, reducing the cognitive and information load for users.
An usability test from Baymard Institute
Next Step
Measure success with user data
Although I left the company before it's released, I would suggest to evaluate the results with the following metrics:
Ease of use and low support contacts from satisfaction survey
Access and engagement rate of e-commerce resources (eg. register shop by group account)
Completion rate of clicking on "add product to cart" button from store pages
Time spending on shop page for products viewing
Reflection
What could I've done better?
It's the most challenging work for me during my working period in ASUS. Not only did I have to get ultimately familiar with Apple and HP site to transfer their design back to our own solution, but also presented all these insights in better understanding words to over 100 locals even from different countries.
Survey Design
Use closed questions or screenshots in surveys
We put a few open questions in our survey. Although it did collect user thoughts in words but it's difficult to analyze thousands of answers in a short period of time. It's better to put close questions in a survey, or even utilize screenshot functions for user to circle the problem on the interface directly, like IBM or DHL.
Competitive Analysis
Analyze interactions, flows, and structures instead of content type
At first, I only analyzed what kinds of content Apple & HP display on their store homepage. However, to design a critical function in the ASUS site, it's not only the homepage that matters but also every interaction on the page. For instance, what's the user flow from the links on the store homepage? What types of buttons are provided? What's the difference among different local sites? I started to analyze from the strategy perspective instead of the design styles.
