Olive+Elliot
Website Design
Scope
Design a website using agile methodology to optimize user experience, introduce the brand, and explain its business model
Timeline
3 weeks
Role
UX Design
Tools
Sketch
Olive+Elliot is a sustainable textile company that is changing the face of Canadian apparel by producing luxury textiles from natural materials, which it grows, mills, dyes, finishes, and distributes solely within Canada.
Problem Statement
As Olive+Elliot is still in its very early stages of development, it needed a website that it could grow into within the next several years. Having no design work done for it in the past, this was the first website created for Olive+Elliot.
Research
Summary
Collecting Information
Olive+Elliot does not have any direct competitors as it is doing something very innovative in its field, so we decided to focus solely on user research. We wanted to figure out:
-
How to get people to support Olive+Elliot so that one day they might purchase products made from Olive+Elliot textiles
-
How to get eco-fashion designers interested in purchasing Olive+Elliot textiles
-
How to get investors/grant funders interested in investing in/donating to Olive+Elliot
To understand our target users’ needs, we surveyed 38 environmentalists/sustainable fashion enthusiasts. We also interviewed 6 eco-fashion brands, 4 grant funders, and 1 angel investor. The main questions our research meant to answer were:
-
Environmentalists: What do you take into consideration when deciding whether or not to support a sustainability-focussed company?
-
Eco-fashion designers: What do you take into consideration when deciding whether or not to purchase textiles from a sustainable textile company?
-
Grant funders and investors: What do you take into consideration when deciding whether or not to grant a loan to/invest in a sustainability-focused company?
The results of our surveys and interviews showed that our target users valued three main things:
1. Credibility
2. Transparency
3. Quality vs Price
We found that grant funders and investors were typically interested in more substantial information (i.e., financial and product statements) that can not be displayed on an informational website, so we chose to focus on eco-fashion designers and environmentalists as our target users.
38 Surveys
11 Interviews
2 Personas
2 User Stories
Personas and User Stories
After gathering and analyzing all of our research and insights, we devised 2 user personas with accompanying user stories. We have Isabella, an eco-fashion designer who makes clothing from sustainable textiles, and Willow, a fashion-forward environmentalist who buys clothing from sustainable fashion brands.
Isabella's Story
“As an eco-fashion designer, I want to have access to a breadth of transparent information about a textile company so that I know I am sourcing high quality, sustainable materials.”
Willow's Story
“As a fashion-forward environmentalist, I want to stay informed about the most sustainable fashion companies so that I can make more conscious purchasing decisions.”
Planning
The Challenge
-
How do we convince eco-fashion designers to choose Olive+Elliot over other textile suppliers?
-
How do we evoke trust and credibility in Olive+Elliot?
-
How do we communicate the value in Olive+Elliot’s business model?
The Solution
Create a website that is transparent, informative, and inspiring that Olive+Elliot can grow into within the next several years.
Inspiration
Before jumping into the design stage of our sprint, we looked for inspiration from other sustainability-focused fashion brands. Below are some of the websites that inspired our design.
Everlane is an American clothing retailer that prides itself on its radical transparency and ethical factories. We took inspiration from its transparent price breakdowns as a way to evoke trust within users.
Hemp Fortex is a luxurious, high-quality, sustainable, and organic textile supplier based out of China. We took inspiration from its descriptive and transparent product descriptions.
Piñatex is a textile company that produces a natural leather alternative made from cellulose fibers extracted from pineapple leaves. We took inspiration from their sales enquiry form as an alternative to e-commerce.
Design
Summary
Low-Fidelity Sketches
Mid-Fidelity Wireframes
High-Fidelity Wireframes
As we reached the design stage of our project, we began sketching low-fidelity wireframes on paper and later digitized them into mid-fis in Sketch.
For the style direction, the UI designer on our team focussed on making the site seem elegant and modern with a fresh and classy vibe so as to resonate with our fashion-forward users. She used lots of white space, greens, and yellow accents with a sans-serif font (Futura) to emulate the brand’s high quality and sustainability-focused vision.
Testing
Summary
3 Testing Tasks
8 Participants
2 Rounds of Testing
We completed 2 rounds of testing on a total of 8 people, 5 of whom were fashion-forward environmentalists and 3 of whom were eco-fashion designers. Our testing showed that we needed to reorganize the hierarchy and information within the site, adjust the navbar, and fix the "Contact Us" page and Sales Enquiry Form.
Issue #1: Information Architecture and Navbar
When given the 1st task, our participants' first instinct was to click on "About Us" to learn about the company, however, we had information about the founder in "About Us" and information about the company in "What We Do". When participants finally clicked on "What We Do", they found the page to contain too much varying information and they didn't think to click on the "Learn More" buttons. The "What We Do" page was too deep and unintuitive.
To fix this, we renamed the page containing information about the founder "Our Founder", we consolidated the growing and manufacturing processes onto the “About Us” page, and we put the textiles and capsule collection onto another page which we called “Our Products”.
Problem
88% of participants said the page contains too much varying information and too many child pages
Solution
Reorganize information and make the page childless
Problem
100% of participants found the names of items in navbar confusing
Solution
Rename items in navbar
Issue #2: Contact Us and Sales Enquiry Form
When given the 2nd task, participants expected the Sales Enquiry Form button on the Cotton product page to take them to the "Contact Us" page, but instead, they were presented with a pop-up of the Sales Enquiry Form. When they visited the "Contact Us" page, they found the form on it to be redundant since any general inquiries can be made via the contact information provided.
To alleviate this confusion, we replaced the General Form on the "Contact Us" page with the Sales Enquiry Form. This way, when users want to purchase textiles, they will be taken to the "Contact Us" page where they can fill out the Sales Enquiry Form.
Problem
75% of participants expected the Sales Enquiry Form to be on the "Contact Us" page
Problem
75% of participants thought the General Form was redundant
Solution
Replace General Form on "Contact Us" page with Sales Enquiry Form
Final Prototype
You can check out our complete final prototype here!
(Note: All images used are placeholders and do not belong to Olive+Elliot)
To Conclude...
Final Thoughts
Within our 3-week design sprint, we feel that we tackled the project successfully. Our prototype met the needs of our user personas by being transparent, informative, and inspiring. It also successfully conveyed Olive+Elliot’s brand image, business model, and environmental impact.
As Olive+Elliot continues to grow and develop, it might be interesting to one day look into adding e-commerce to its website for purchasing textiles. It might then be useful to include information about shipping and minimum quantities required for orders.
Learnings
This was my 1st client project at RED Academy. Here's what it taught me:
-
How to design a website from complete scratch. Because Olive+Elliot is still in its very early stages, the existing content and images that we had access to were very limited. I learned how to work with what I've got and how to make assumptions where necessary to get the job done.
-
Sustainable fashion has a huge positive impact on the environmental health of our planet. Prior to starting this project, I didn't know much about sustainable fashion. Now I can proudly say that I know a lot, and it was all thanks to the plethora of research I did for this project.
Future Steps
The CEO and Founder of Olive+Elliot loved our design and will be getting the website developed in the near future. We expect that our website design will generate revenue for Olive+Elliot by increasing online consumer traffic.
See more of my work
binqit
UX/UI | Responsive Web App Design
twoPLUGS
UX | iOS App Redesign
