Reboot
Creating an eCommerce website committed in bringing the best mobile merchandises.
Project Overview
Designing a new eCommerce website for users shopping for mobile gadgets online, by applying user research, features prioritisation, information architecture, sketching, prototyping, testing and design iterations.
My Role
UX Researcher | UI/UX Designer
My Tools
Figma | Mural | Optimal Workshop | Adobe Photoshop
Timeline
2 Weeks Sprint
Design Process
01. Discover Phase
User Interview
I conducted user interviews with 8 users, understanding their online experience, as well as to discover their pain points and needs, when it comes to buying mobile gadgets and accessories online.
02. Define Phase
Research Synthesis
I performed affinity mapping with my user interview findings and discovered that majority of them are ad-hoc shopper when it comes to purchasing mobile gadgets online. In other words, they only shop mobile gadgets online when they need replacements or spares.
User Persona
To further empathise with the users, a user persona was formulated to represent users with varying goals, needs and frustrations.
Information Architecture (IA)
01. Card Sorting
To find out how users interpret and categorise an inventory of 61 products, I conducted an open card sorting study with 21 users. I then studied the results using Similarity Matrix & Dendrogram.
Using the 8 main categories identified in the Similarity Matrix as a baseline, and the help of Dendrogram analysis, I combined Charging, Phone Protection, Stylus, Cables into a single Accessories grouping. And finally, I settled with 5 main and 4 sub-categories.
02. Tree Testing
To find out how users interpret and categorise an inventory of 61 products, I conducted an open card sorting study with 21 users. I then studied the results using Similarity Matrix & Dendrogram.
Site Map
With the proposed features and validated categories, I created my site map as follows.
03. Develop Phase
Feature Prioritisation
With the initial list of requirements given by the client, I reprioritised the features that will address my personas’ pain points and needs based on insights gathered from user research to the highest priority so as to focus on solving real users' problems. Features were re-prioritised based on the MoSCoW method.
Wireframes
With the sitemap, I proceeded to design my with a lo-fi wireframes, focusing on key product discovery and check-out process.
Usability Testing
After linking up the interactions of the wireframes into my lo-fi interactive prototypes, I conducted 2 rounds of usability tests, with 5 unique users each, to evaluate the key concepts and identify usability issues.
Design Improvements
Through task success rate analysis as well as my observation during the usability tests, two major feedbacks and design improvements are summarised as follows:
01. Check-out process not intuitive or practical
02. Cart panel confusion
04. Deliver Phase
Key Takeaways
01. Information Architecture is Crucial
Information Architecture is extremely essential for e-commerce websites which deals with an inventory list of different products because users will need to navigate to their desired products easily and quickly.
02. Consider Other Types of Card Sorting
Open card sort might sometimes lead to unclear or not meaningful labels or groupings especially if users have very different interpretations. It is better to perform hybrid or closed card sort to aid users understanding and interpretation during categorisation.