Redesigning Qoo10's Website
2-week Learn & Work Sprint
@ GENERAL ASSEMBLY UXDI COURSE
16-30 AUG 2021
CHALLENGE
Redesign an existing website
TOOLS
Miro, Figma,
Optimal Workshop
ROLE
UX Designer
UX Researcher
Background
Back in its heyday, Qoo10 consistently nabbed the top spot as the e-commerce platform that received the most website traffic, before it was dethroned by Lazada at the end of June 2019.
While major competitors like Shopee are aggressively investing in UX developments, Qoo10's site experience seems to have remained unchanged over the years.
This is unfortunate, given that a website is the most basic touchpoint of an e-commerce business, and its UX can directly affect customer retention rate. Although Qoo10 had an early mover advantage as a dominant player in e-commerce space, its site isn't doing justice to the brand's potential anymore. Hence, I was interested to streamline the site experience by applying what i was learning during the 2-week sprint.
Design Process
DISCOVER
User Interview +
Usability Testing
DEFINE
User Persona
User Flow
Card Sorting
Site Map
DESIGN
Ideation
Sketching
Wireframe
Prototype
DELIVER
Usability Testing
Reiteration
Next Steps
Testing the Site
I spoke with 5 Participants to validate my hypothesis on problematic areas of the website, as well as to discover further insights into their online shopping habits and preferences.
Usability Testing Participants
I sought out users within the age range of 27-34, with a disposable income. They also had to be familiar with popular e-commerce sites such as Qoo10, Shopee, Lazada, Taobao or Amazon.
UT Results
Measured with Single-Ease Question (SEQ), on a 7-point scale (1=Very Difficult, 7 = Very Easy)
⚠️ Key Issues on Qoo10 Site
⚠️KEY ISSUE #1
Overload of information on Homepage
5/5 users:
-
Found the homepage unappealing and overwhelming
-
Said nothing in particular caught their attention
-
Would not browse the homepage as it is too messy and complicated
"It's all shouting at me"
"Old-School"
👍 What worked well on Qoo10 Site
👍THE PLUS-ES
Sticky Cart Widget
3/5 users liked that the “Add to Cart” box followed them as they don’t have to scroll back up to select options.
Defining the Problem
Aside from testing the site, I interviewed users to find out more about their habits and preferences. This led me to create a user persona and defining the two main problems.
UT Discussion Topics
Online Shopping Habits
-
Frequency
-
Types of purchases
-
Browsing behaviour
-
Preferred shopping sites and why
Platform preferences
-
Priorities of service attributes
-
Challenges faced
-
Thoughts on rewards systems and familiarity with them
User Persona
THE MAIN PROBLEM
💻 Unbrowsable Website
-
The user tends to only visit Qoo10 if they are looking for a specific item. Because of the confusing and unintuitive layout of the website, they do not stay and browse.
-
They do, however like browsing other websites such as ASOS and taobao, even when they do not have something particular in mind. This is mostly due to the fact that these platforms recommend items to them well.
THE SECONDARY PROBLEM
🎁 Unclear Rewards System
As users are value seekers, they like having some sort of rewards programme on their shopping platforms but Qoo10’s daily coupon collection isn’t very accessible.
Reimagining the user flow
Current Flow
Currently, users only visit Qoo10 website when they are looking for something specific, and when they have the time and effort to do so.
Users use only the search bar to look for what they want, and do not venture beyond that to discover more because they are intimidated by the messy website.
Problem areas are also marked out in the current site map below.
Ideal Flow
Ideally, users will find the Qoo10 website friendly enough to log in even when they don’t have something specific they are looking for, to browse recommendations and discover deals.
They will also have more options to explore at every turn (as marked out with a star in the proposed user flow below).
Redefining Items Categorisation
While analysing the site's information architecture, I noticed a few sets of items that were not grouped well:
-
Household Appliances shouldn't be under 'Digital & Mobile'
-
Car-related items and stationary supplies should not be under 'Home & Living'
Hybrid Card Sorting
With that, I conducted a hybrid card sort test with 16 participants using items from these categories, to find out which major group they would expect to find these items under.
They can group them under ‘Electronics & Tech’, ‘Home & Living’, or new categories that they can create. This way, they have a rough guideline to work within, while having the option to recategorise based on their own perceptions.
The results validated my hypothesis, and helped me gain insights into how best to name these major categories.
Majority of participants expected household appliances to be found under the “Home & Living” category, or home-related categories, as opposed to electronics and tech.
Redesigning the Information Architecture
After documenting the site's IA onto a site map, the first thing i noticed was there are too many first-level navigation, contributing to clutter and cognitive overload on the homepage.
With UT findings, site issues and card sort results, I rejigged the hierarchy of pages, did away with ambiguous names to aid decision making and removed pages that aren't value-adding to the user from the site entirely .
PROPOSED SITE MAP CHANGES
#1 Collapsing Categories
So as to reduce first-level navigations on Homepage which contributes to clutter and cognitive overload
Solutioning
Quick recap on user pain points:
-
Uninspired to browse Qoo10 site due to
-
cognitive overload
-
and difficulty finding the best deals through recommended items
-
-
Tend to forget or miss out on Qoo10’s coupons
There are many ways to solution for this moving forward, including improving machine learning to optimise recommendations and gamifying the experience to incentivise return visits. Within the context of this project, I focussed on building a strong foundation for usability by fixing existing UX problems.
PROPOSING A NEW DESIGN
Homepage
-
Remove all clutter from homepage and
focus on special deals
-
Sticky roulette icon on homepage to access daily rewards
-
Showcase a carousel of official brands on Qoo10 to elevate brand image
-
Have a ‘recommended for you’ section that recommends items based on user’s profile
-
Recently viewed section at the bottom of homepage
Wireframing
Key Tasks Flow
Testing & Iterating
I conducted another 3 rounds of Usability Testing with my redesign with a total of 4 users, while adding on 4 new tasks progressively to test new design changes. The general consensus was that the overall site was neat and easy to navigate. Even though there was a stark improvement in SEQ scores from the original Qoo10 site, there were still areas for improvement for each iteration.
Key Design Changes & Reiterations
KEY ITERATION
Homepage
During UT #2, one user commented that she liked a big recommendation section on her homepage as sometimes she will just log in to Taobao just to browse recommendations. Hence, this change was reflected in Redesign V2.
Next Steps
Setting Guidelines for Sellers
Ensure sellers do not bombard their pages with too much information, and focus on key details. A text limit may also be set on images uploaded to reduce overall page clutter.
More testing & iterating
Continue fine-tuning usability through more testing and iterating. As the site is massive with a huge range of products, there is more work to be done in terms of item categorisation.
Designing for Emotion
After a strong foundation of usability is set, the next step to building a platform that can rival fierce competition from Shopee and Lazada, Qoo10 has to continue moving up the pyramid of UX hierarchy to design for emotion.
#1 Improve on Machine Learning
One of user’s top requirement on their e-commerce platform is having it recommend items to them based on their preferences and interest. This is paramount in encouraging repeated visits to browse and explore the best deals.
#2 Explore Gamification
As Qoo10’s primary customer base are value hunters, more thought should be put into gamifying the experience to reward users, e.g. extra rewards on bulk buys.
Thoughts & Reflections
✅ Little testing is better than none
Even though it is ideal conduct UTs with 5 users, it is still helpful to test with one or two users under time and resources constraints as findings can provide helpful insights for key iterations.
📊 Look past SEQ scores
A user might say that a task is easy and rate it 7/7, but you might still notice them struggling to complete it. Always dig a little deeper by asking questions like 'Was it where you expected to find it?'
🌊 The importance of a user flow
Mapping out a current and ideal user flow helped me visualise my end goal better, and mark out problem areas to improve on. I can imagine how it can come in handy in a group setting to align all teammates and stakeholders.