top of page
Desktop - 3.jpg

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?

Progress bar.png
(1) (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.

Research Ramp-Up (1).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.

Pull factor framework (1).png
(2).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.

Persona (1).png
Frame 1 (1).png
Project Goals

Determine the goals and needs for all stakeholders.

Frame 117 (1).png
(3).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.

Card Sorting.png
Lo-Fi Wireframes

I started to design the wireframes through Figma to get the core website struture clear to follow later.

Category Page.jpg
Nvigation on hover.jpg
Search bar.jpg
Home Page.jpg
Item Page.jpg
Mood Board

I collected images and layouts for Re-Eve website inspiration and came out with a mood board.

Mood board (2).png
Logo Design
logo.png
Design System

Defining typography, colors, button, icons, and design components for the website.

Design system.png
(4).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

Homepage.png

Product page

Product Page.png

Cart

Cart Review.png

Product tile view

Dresses & Jumpsuits.png

Size selection

Product Page- size selected.png

Payment

Shipping.png

Filtered result view

Dresses & Jumpsuits-filtered Maxi Dress.png

Added to cart

Product Page-added to cart.png
Shipping-1.png
(5).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

Frame 127.png
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.

Affinity Map.png
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.

(6).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.

Screen Shot 2021-06-24 at 4.38.08 PM.png
Desktop - 4.jpg
Interated Wireframes
mock up.jpg
bottom of page