AZIO e-commerce

 

Project
Overview

Azio’s sales revenue typically came from traditional retail channels and Amazon as the sole e-tail channel with a 50:50 ratio. Azio’s official website was serving its customers as the product information index and tech support portal. Although there was a basic shopping function implemented already, but it was not optimized since e-tail and marketing focus is driving the traffic toward our product page at Amazon. Then, due to the strong retail market expansion and dominance of Amazon in recent years, the revenue source ratio is heavily tilting toward Amazon, and the service term had become less favorable, and communication became more difficult.

Therefore, an update and re-structuring of Azio’s shipping site are in need to adapt to the new shopping trend and the next generation of consumer crowd.

 
 
 

Design
Challenges

PRODUCT WAYFINDING
Abling visitors to quickly find what they are looking for and achieving a high conversion rate for sales is the primary goal.

MOBILE FRIENDLY
The percentage of traffic from the mobile device increased year over year, but the bounce rate is high. The new website needs to have an up-to-date aesthetic and responsive layout optimized for all viewing devices including desktop OS and mobile OS.

BALANCE BETWEEN THE BRAND IMAGE & THE SALES
With the shrinkage of available retail stores in recent times, the website presence of a brand is becoming more important than ever. Anyhow, the new website not only needs to look good but also needs to find a balance to co-exist with an optimized shopping experience.

ADDITIONAL NEEDS
Visitors come to our website for different needs besides shopping. We need to provide an intuitive path for users to find information such as product info, support FAQ, and a way to contact customer support when needed.

 
 
 

My Role

Project Management, UX Research, Design Direction, Wire Framing, UI Prototyping

 
 

Research

From the user research, I am trying to understand the purpose and why they are visiting the website. I discovered the main use cases:

I am looking for a product
This type of visitor knows exactly what they want. They have a clear goal in mind and need to find the product for their needs quickly. They prefer clear product images, and the ability to filter by specs, and features, so they can easily compare different models.

I need product support
This group of users already purchased the product from other channels i.e. Amazon, Indiegogo, BestBuy...etc, and come to the website for help and support. They need search functionality that allows them to quickly locate specific information or be able to contact someone quickly.

Just browsing
Some visitors link to the website from Youtube, Instagram, or other social media, are often browsing for inspiration. They don't have a clear goal in mind and are not ready to make a purchase decision. They like to see inspiring product setup pictures and are interested in sales or deals.

 
 

Wireframe

Concept Validation

Model A
This model is using a landing page with options to go to the gaming or lifestyle home page by user’s choice. Different sites will only contain products under each style. This is designed to test if this can help the visitor find the information they need on the product or support in the specific genre. It is trying to present the website aesthetic and mood in respective styles, i.e. dark theme for gaming and bright theme for lifestyle.

Model B
This model is using only one landing homepage for all products and offers multiple click options for different product types and collections for visitors to select from the navigation menu and filters to find the products that they are looking for.

Result
After running A/B testing for a month, we found model A is more used when visitors know exactly what they are looking for. Anyhow, it became confusing for visitors who were just here for browsing and for visitors who do not know the difference between gaming and lifestyle products. Customer service receives more support tickets in this model, but not on product support, but on where to find the product.

Model B is easier and intuitive enough to navigate efficiently to everyone who knows exactly what they want or is just here to browse. Since all products are available in this model, it also provided a chance to cross-promote products in different categories.

Visual design

 

Result

A modification of model B was implemented as the final result based on the decision to focus all incoming traffic into a single portal instead of two. This is also due to the shift of future product direction of increasing the offering in lifestyle products and reducing the offering in gaming products.

Another major modification is focusing on conversation rate enhancement elements such as the adaptation of responsive layout to make the site more user-friendly toward the increasing mobile viewer,

  • The result of the new site had increased the conversation rate from 0.2% to 2.1%.

  • The site had doubled incoming traffic and viewing time from mobile devices viewers.

  • The Azio website now contributes about 50% of current sales revenue after 8 months of launching the new design.

  • The new online support system includes the new FAQ site and online chat had also reduced the customer support handling time by 70% after replacing the traditional phone support.