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:

  1. How to get people to support Olive+Elliot so that one day they might purchase products made from Olive+Elliot textiles

  2. How to get eco-fashion designers interested in purchasing Olive+Elliot textiles

  3. 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.

o+e_personadesigner.png

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.”

o+e_personaenvironmentalist.png

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.

o+e_everlane.png

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.

o+e_hempfortex.png

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.

o+e_pinatex.png

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.

o+e_lowfis.png

Testing

o+e_task1.png

Summary

3 Testing Tasks

8 Participants

2 Rounds of Testing

o+e_task2.png
o+e_task3.png

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”.

o+e_midfiwhatwedo.png

Problem

88% of participants said the page contains too much varying information and too many child pages

About Us 1.png

Solution

Reorganize information and make the page childless

midfi navbar.png

Problem

100% of participants found the names of items in navbar confusing

hihi navbar.png

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. 

midfi cotton sales enquiry form.png

Problem

75% of participants expected the Sales Enquiry Form to be on the "Contact Us" page

midfi Contact.png

Problem

75% of participants thought the General Form was redundant

Contact.png

Solution

Replace General Form on "Contact Us" page with Sales Enquiry Form

o+e_mockupshifi.png

Final Prototype

mockup_macbookpro_resized.png

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_portfoliohovertile.png

binqit

UX/UI | Responsive Web App Design

twoplugs_mockuppres_edited.jpg

twoPLUGS

UX | iOS App Redesign

twoplugs_mockupuxwriting_edited.jpg

twoPLUGS

UX Writing | Branding & Copywriting