The Challenge
To design an e-commerce website for a neighbourhood homegoods store to improve the online shopping experience for customers and lead to increased sales conversion rates.
My Roles
In this 2 weeks solo project, I focused on user research, benchmarking, visual design, created UI components and designed high fidelity wireframes.
Tools & Methods
User Interviews
Affinity Mapping
User Flows
Visual Design
Wireframing
Usability Test
The Solution
01 Inspiration
Most people only have a vague idea of what they want. They like to be inspired by what’s on sale, what products are new and recommended.
02 Minimal Effort
They want to be able to easily narrow down their search and sort out the products according to their preferences.
03 Assurance
Feedback and reviews from other users are one of the top most importance in the decision making process.
The Process
Using the Double Diamond approach, we started off on an empty canvas, talking and listening to stakeholders and users, discovering as much as possible until a pattern emerges. We then synthesised the data collected using affinity maps to identify trends among the users before ideating and developing solutions based on the research insights collected.
2 Weeks Sprint
DAY 0-3 | DISCOVER
Conducted user interviews to uncover their needs and pain points when shopping for household items.
DAY 3-7 | DEFINE
Synthesized the results from user interviews using an affinity map, defined the problem statement and crafted personas and user flows based on user’s needs and goals.
DAY 7-13 | DEVELOP
Develop, test and iterate! Developed a design system with reusable UI components and style guides for the website. Tested with mid-fi wireframes, iterated the designs and created hi-fi prototypes.
DAY 13-14 | DELIVER
Consolidate research insights, designs and testing results
01 discovery
I spoke to a range of users who have purchased homeware to understand what stores they preferred to visit, what makes them go there and why they purchase things from there. In order to make the data more complete, I also spoke to users who have not purchased any homeware before and tried to understand why and where they might go as their first stop. In the process, we found out about their preferences, frustrations, needs and goals.
source: pikisuperstar / Freepik
Key Insights
01 What are their preferences?
8 out of 10 shoppers interviewed preferred to shop for homegoods in physical store because they prefer to see, touch and feel the product. They also value the sales person’s expertise and advice. The remaining 2 out of 10 shoppers preferred the convenience of online shopping and are confident of the product’s worth because they have read good reviews about the product or a friend has recommended it.
02 What are the deal-makers?
Recommendations from their friends or store owners. They also draw inspiration from sales, bestseller or new items on display.
01 What are their preferences?
When they are unable to find what they want quickly and easily or lack of customer service from the sales person.
“If I have to buy things online, I only do so when there are many good product reviews or if a friend has recommended it.”
– A shopper who prefers going to physical stores
What does this mean for the business?
For higher value goods like homeware products that people typically do not purchase as frequently as food and clothing, people do not easily spend unless there is a need and they are confident of the product’s worth. I explore the motivations for shoppers and translate their preferences to create an online experience close to that of their needs for shopping in physical stores.
Learning from other businesses
01 Landing page
- Attractive banner images with clear call-to-action buttons
- Features new products, recommendations and bestsellers
- Clear and clean navigation
02 Product page
- Product filters (i.e. Price, popularity, reviews, colours)
- Detailed product description
- Customer reviews
02 DEFINE
Designing for different shopper personalities.
The insights gathered from our users helped direct and build the foundation content and structure to cater to specific user groups. We created a high-level persona and crafted out several user flows based on the users we spoke to and highlighted the main behaviours, frustrations and goals.
User Persona
03 DEVELOP
Develop. Test. Iterate.
Through competitive analysis and user research, I lay out the foundation of the website structure with a sitemap. Combining the ideas together, I sketched out early grayscale wireframes and mapped out a wireflow based on the user flow before designing a style guide for the high fidelity wireframes.
Style Guide
Wire Flow
Attributions
Product Images: Amara