Enhance Shopping Journey for E-commerce Site
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
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 new Store shopping page
The "Store" function was introduced, streamlining access to all e-commerce services and products in fewer steps. The page includes four main sections, which are respectively Product Categories, News and Promotions, Highlighted Products, Benefits to Shop, and Featured Accessories.
Impact
Reduce purchase journey by 40%
The new Store page has now 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 Perspectives
Stakeholders proposed to provide a "Store" function on site
Therefore, our stakeholders proposed the request of providing a "Store" function as Apple and HP do on the homepage to shorten the purchase journey, targeting the customer types who need to order efficiently.
Business Goals
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 designed the wireframe from 0 to 1, and presented 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 for users to look for the right product 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're often failed 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 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 "Store" entrance as much easier as possible to reach
1
Organize information clear and simple to understand and locate
Final Design
The purchase journey is shortened into only 3 steps to add to the cart. More importantly, products in the "Store" are all available to be purchased online, so customers won't be confused about the availability of products.
Design Solutions
01 Access "Store" easily by providing multiple entrances
I provide the entrances directly from the top menu and footer. In so doing, users who intend to search for online shopping could enter the information more efficiently. The design B could make the access button easier to be seen.
02 Shorten purchase journey by providing product line tab on store page, directing to a specific shop page
After clicking on a specific product type on Store page, it will direct to the shop page of that product type, displaying all sku-based and online available products with buy button provided. It's no need to select series or filter out the products in stock.
Regarding the product line tab style, although the white icons are more aesthetically pleasing, we believe that the color icons are more intuitive. Besides, we arranged the most important product lines in front, making it as a horizontal slider to reduce its vertical space.
03 Collect e-commerce related content together to improve efficiency
On store homepage, related page entrances are displayed, including product types, news & promotions, highlighted products, support, benefits to shop, etc, allowing any queries of one's order, deals and product support could all be found in one place to enhance the visibility.
Iterations
We conducted a desgin review meeting with over 100 locals from different countries to discuss our "Store" design proposal. I presented the research results to back up our design solutions.
01 Provide "Add to cart" button directly on product card
Provide an add-to-cart button instead of a buy button on the product cards ensures that every click users make takes them one step closer to converting.
References:
Put the “add to cart” button in the product list to shorten the purchase loop. Besides, if one is using discounts and offers a lot, and placing the "add to cart" button will raise conversion. Source: How to "Add to cart" properly
Most competitors provide add-to-cart buttons directly, eg. HP, Lenovo, Dell, Acer.
Pressing cart button is the primary destination in the journey of searching for products, which could be set as the success metrics to identify if the design is convenient for users, and increase the possibility to add products in cart.
02 Apply manual infinite scrolling button
When too many product cards are listed on page, it'll undoubtedly affect the scrolling experience with endless products, especially for India users who use mobile more often than PC.
3 scrolling methods:
Infinite Scrolling: display all product cards on one page, which is the way we use on our current site, eg. HP.
Manual infinite scrolling: display some product cards at first. After clicking "Load more" button, other product cards would be shown, eg. Lenovo.
Pagination: fixed numbers of product cards are listing on page, and a row of pagination is provided to switch to other pages, eg. Acer.
We ended up choosing manual infinite scrolling, providing a "Show more" button at the bottom, due to the fact that it's more suitable for sites that need users to browse more but also more interactions (eg. E-commerce). For Mobile devices, it loads only 15 products at once, click on "Show more" for another 15 products.
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.
