Project Details
Create a responsive website that is familiar to existing customers and appealing to new ones.
-
Timeline: April 2021
-
Duration: 80 hours
-
Team: Individual project with feedback from peers and mentor
-
Tools: Figma, Maze, Optimal Workshop, Adobe Illustrator
-
Deliverables: Branding, Product Design, UX Research, Responsive Website Design, Prototyping, Usability Testing
Background
Re-Eve is a sustainable clothing brand focusing on its designer upcycled line by using second-hand resources and repurposing old clothes to distinguish itself from other brands.
We collaborate with local vintage shops to handpick the best quality vintage clothes and accessories to make this sustainable experience more enjoyable.
Problem
For the first time in 5 years, Re-Eve finally decided to go online. But how do we streamline our core value for our digital presence and provide a seamless user experience through our e-commerce site?
%20(1).png)
Deliverables: Competitive Analysis | Individual Interview | Secondary Research
Objectives
-
What are the expectation for an enjoyable online shopping experience from customers .
-
To understand what customers desire the most from sustainable brands.
Competitive Analysis
I analyzed the competitors’ strengths and weaknesses and found a pattern from the competitors that they all have:
-
A concise and strong mission
-
Transparency of sustainable resources
-
Overall presentation and navigation are modern, clean, easy to use.
.png)
Individual Interview
I interviewed four participants who have shopped online and are interested in sustainable fashion to get a general idea of how they think a good online experience looks like.
75%
of them endorse the Wish List feature and consider it useful.
75%
of them consider a good return policy is crucial for them to return the ecommerce site.
50%
of them discover promotion and ads from social media and make a purchase.
Secondary Research
While the individual interview is insightful, we need to research the current market of sustainable fashion brands to better understand the customer sector.
The Pull Factor Framework – a new methodology designed to make sustainable living easier and more rewarding for more people around the world.
By uniting what people want with what the world needs and what brands uniquely offer, our model leverages the dynamics of human desire to unleash creativity, spark sustainable growth and drive positive impact at scale.
.png)
.png)
Deliverables: Empathy Map | Persona | Project Goal
Persona and Empathy Map
Based on the interview feedback I created an empathy map for one persona type:
Meet Lauren- the Eco-Friendly type persona. Lauren supports sustainable fashion brands and wants to find sustainable brands that is not about following trends but with quality and timeless styles.
.png)
.png)
Project Goals
Determine the goals and needs for all stakeholders.
.png)
.png)
Deliverables: Card Sorting | Lo-Fi Wireframes | Mood Board | Logo Design | Design System
Card Sorting
It’s interesting from this research that 50% of of the participants grouped items based on styles and occasions, 50% grouped them based on clothing categories.
It gave us a good understanding on how people associate items with different classifications.
When we design the navigation, it’d be great to keep in mind some people will associate items with occasions and styles.
Lo-Fi Wireframes
I started to design the wireframes through Figma to get the core website struture clear to follow later.
Mood Board
I collected images and layouts for Re-Eve website inspiration and came out with a mood board.
.png)
Logo Design
Design System
Defining typography, colors, button, icons, and design components for the website.
.png)
Deliverables: Hi-Fi Wireframes | Interactive Prototype
Hi-Fi Wireframes and Interactive Prototype
I designed the hi-fi wireframes in Figma and built the interactive prototype to prepare for usability test.
Home
Product page
Cart
Product tile view
Size selection
Payment
Filtered result view
Added to cart
.png)
Deliverables: Usability Testing | Affinity Map | Key Findings
Usability Testing
I conducted usability testing with potential customers to identify user flow efficiency and any deadly flaws in the design.
Methodology: In-person and remote moderated testings.
Participant requirement: Participants who have shopped online before.
Total participants: 3
Affinity Map
I synthesized every note onto an affinity map based on participants' feedback and observation from the usability test to help me find patterns of the issues and other key insights.
Key Findings
Here are some of the key findings from the usability test I conducted:
100%
of participants went straight to category navigation, instead of going through the search bar.
100%
of participants found the website easy to navigate.
66%
of participants used the filter on the category page to find the item.
33%
of participants mentioned they expect to see a more detailed submenu so they can easily find the item.
33%
of participants mentioned they don’t use the search bar as often because sometimes the wording makes it harder to find what they want.
.png)
Deliverables: Prioritize Revision | Iterate Wireframes
Revision Priority
Through synthesizing the findings, I prioritized the changes that are critical to the user flows and user experience.
Interated Wireframes
