Human brand logo
Responsive E-Commerce Website Design
work
resumeabout
ROLE
Black and white profile icon to indicate role
UX Research
User Interviews
Brand
Wireframing
Visual Design
Interaction Design
Prototyping
Usability Testing
TIMEFRAME
Black and white clock icon to indicate timeframe
July - August 2021
8 weeks
PROJECT TYPE
Black and white chart icon to indicate project type
Designlab UX Academy
Student Project
TOOLS
Black and white wrench icon to indicate tools
Figma
Miro
Whimsical
Optimal Workshop
Maze
Making sustainable fashion more accessible.

Human is a sustainable clothing brand targeting a conscious-minded audience who are concerned about their impact on the environment and want quality products without compromising on style and ethics. Their goal is to make clothes that are good for the environment and good for humans.

Left quotation mark
Sustainable fashion industry expected to grow to $9.81 billion in 2025 and $15.17 billion in 2030 at a CAGR of 9.1%
The Business Research Company, 2020

THE CHALLENGE

Human wants to take their business online and make sustainable fashion more accessible. They want a brand refresh including a new modern and neutral logo, and a responsive e-commerce website that is intuitive and useful for customers.

How might we give a brick-and-mortar retail store a brand refresh and a responsive website to optimize their digital presence?

THE SOLUTION

A responsive e-commerce website with a modern and trendy minimalist design that reflects the brand’s values and delights consumers.

GIF showcasing screens of Human's mobile website

THE PROCESS

01 Empathize
Research to better understand our users
02 Define
Turning our research into insights
03 Ideate
Brainstorming potential solutions
04 Prototype
Putting it all together cohesively
05 Test
Making sure the solution works

01 Empathize

Thought bubble icon
How can I build a solution that works?
First, I conducted research to understand how I could provide users with a useful, usable, and desirable online shopping experience. These were my goals.
Number 1 in a circle logo
Learn about customer's shopping habits and behaviors.
Number 2 in a circle logo
Discover pain points or delights in their current shopping experiences.
Number 3 in a circle logo
Determine customer's shopping values and influences.

THE RESEARCH PROCESS

I looked for the answers to these questions through market research, competitive analysis, and user interviews.
What does the internet say?
Thought bubble icon
Confirming some of my assumptions, I found that sustainable shoppers are generally younger and are willing to spend more to be environmentally friendly.
Infographic showing three people with one highlighted
One-third of millennials would choose the sustainable alternative whenever available, higher than any other generation
Circle chart showing majority highlighted
66% of consumers are willing to pay more for environmentally friendly options.
Trending upwards arrow
Sustainable fashion is trending, but some brands are taking using it as a marketing ploy to deceive customers.
What can we learn from the competitors?
Direct competitors Everlane and Reformation are already successful in the sustainably fashion industry, so I will be looking to those brands for reference and inspiration.
A SWOT analysis of five competitors to Human.
Click image to see the full competitive analysis.
What are our users thinking?
I interviewed 6 participants between the ages of 24 and 35, who have experience shopping sustainably, through Zoom video calls over the course of 3 days. Participants were recruited through my own personal network and the Designlab community.
KEY INSIGHTS
Number one circle logo
When shopping sustainably, users need brands to be transparent and honest about their practices.
Number two circle logo
Women prioritize sustainability over men when it comes to purchase decisions.
Number three circle logo
Users don't think sustainable clothing is as accessible or inclusive, when it comes to sizing and diversity.
Number four circle logo
Users are willing to pay more for sustainable fashion because they know they are doing the right thing.
Number five circle logo
Most participants said they only shop out of necessity, but when asked about their most recent purchase, the motivation was sales or social influence.
Graphic of a female with black hair wearing a black shirt
"I'm a big girl, I need to make sure clothes fit my body."
Graphic of a male with blond hair wearing a black shirt
"I'm drawn to brands with a really good story."
Graphic of a woman with black hair wearing an orange shirt
"Sustainably made clothing is hard to find."

02 Define

To make the research more tangible, I created a persona to relate to our users.
I based my persona on the patterns in my research findings. Sustainable shoppers are most commonly millennial females who are driven by their values.

THE PERSONA

Meet Sophia
Sophia is an environmentally conscious shopper who needs brand transparency and inclusivity. She is concerned about finding clothes that will fit her body type, look stylish, and won't hurt the planet. She is influenced by social media and the people around her, and just wants to do the right thing.
Persona profile for Sophia

THE SITE MAP

What will Sophia be using?
Analyzing our competitors served as a great reference for fashion e-commerce must-have features, and adding solutions for the concerns I uncovered during user research will differentiate Human.
I also conducted a card sort to verify how users associate certain categories, especially sustainability categories. This resulted in grouping all sustainability collections together in my site map because users associated these categories similarly.
A site map for the Human website
Click image to see the full site map.

THE USER FLOW

How will Sophia navigate this website?
For this project, I decided to model the user flow after a common purchase journey, and show all possible paths Sophia could take before arriving at her end goal. This will help me determine what pages need to be built.
A user flow for the Human website
Click image to see Sophia's purchase flow, built on Whimsical.

03 Ideate

Since I will be showcasing Sophia's purchase flow, I decided to build out the homepage, category page, listing page, and check out pages to demonstrate that.

THE WIREFRAMES

Human Desktop Wireframes
A thumbnail of Human's desktop wireframes
Click image to enlarge.
Responsive Homepage Wireframes
A thumbnail of Human's homepage responsive wireframes
Click image to enlarge.

THE BRAND

Just like their clothes, the design is timeless and made to last.
Human’s brand identity is modern and neutral, with an emphasis on sustainability. A minimal logo, earth-toned color palette, and clean design style reflects the brand’s values.
Human logo, a wordmark that says human
Human logo, a wordmark that says human
Human logo, a wordmark that says human
Human website color palette showing neutral shades
Neutral colored t-shirts hanging on a rack
Two women sitting on the floor back to back
A woman wearing a dress standing in front of a neutral background
A clothing rack standing alone in an empty room

THE UI KIT

To ensure design consistency moving forward, our Human UI kit can allow other team members to adapt to our established design system.
Human's UI Kit showcasing their design system

THE VISUAL DESIGNS

Solutions to Sophia's problems
Human's Sustainability Initiative Section from their homepage
Human's Brand Transparency section from their homepage
Sustainability Transparency 

It was important to be completely transparent about the brand’s sustainability practices because it is a big concern for a lot of our users. I dedicated spaces on the homepage, as well as its individual pages to share more about sustainability. I also included sustainability details for each product listed.
Screen grabs of Human's website showcasing inclusivity
Inclusivity

‍Showing diversity and inclusivity in product photos and sizing helps customers relate to our brand and feel supported.
Screen grab of a listing page for a dress on the Human website
Sizing

‍Offering a video feature in addition to still photos, and a size guide, helps users understand sizing and make better fit decisions.
Human mobile mock up screens

04 Prototype

My final prototype shows Sophia’s purchase journey on Human’s desktop website from the homepage through to the order confirmation.

05 Test

THE USABILITY TEST

How does the final MVP measure up?
I tested the desktop prototype to discover how users interact with and navigate through the website, their impressions of the brand, and any challenges encountered.
Process: I conducted usability tests through Zoom and observed as participants completed tasks with the prototype while thinking aloud. I also conducted supplementary usability tests through Maze.
Participants: 7 participants with experience shopping online, with an interest in sustainable fashion
Timeline: 3 days
Number one circle logo
Task 1: Navigate to Women's Dresses
Number Two Circle Logo
Task 2: Find a product and add it to shopping bag
Number Three Circle Logo
Task 3: Complete Checkout
KEY INSIGHTS
Number one circle logo
All participants completed 100% of the tasks in under 5 minutes.
Number Two Circle Logo
All participants found the website intuitive and easy to navigate.
Number Three Circle Logo
5 of 7 participants associated the brand with sustainability, reinforcing Human's brand identity.
Number four circle logo
The purchase flow design works as expected.

What's next?

NEXT STEPS

I found that the human website performed as expected for our users with no pain points, which allows us to move forward with our design.

Our next steps would be to build upon the sustainability content within the homepage as well as the additional sustainability pages, giving sustainable shoppers peace of mind and other shoppers the motivation they need to purchase sustainably.

LESSONS LEARNED

Designing an e-commerce website and purchase flow was pretty straightforward, as it’s such a common task, but I did have a lot of assumptions about the customer’s perspective of sustainable fashion which was important in helping me understand who I was actually building the product for and who Human’s specific users are. Once I understood the user, it was clear what problems I had to solve.

FINAL THOUGHTS

There was a lot to learn from this project, but the biggest lesson I took away was the significance of research and asking the right questions. I’m really happy the final designs were effective and enjoyed incorporating my own values, environmental sustainability, into this project.
Up