Designing a Website for a Sustainable Fashion Brand: A UX Case Study
My 1st client project as a UX Design student
To see the UX writing work I did for this design sprint, check out my UX writing case study here.
It’s no secret that the fashion industry is one of the world’s most polluting industries. Lately, sustainable fashion has been gaining a lot of buzz and popularity, as global warming is on the rise and natural resources are on the decline. 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.
Project Brief
My team and I were given 3 weeks to design a website for Olive+Elliot that introduces its brand and explains its sustainable business model, so as to generate interest among potential clients, investors, and the general public.
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.
My Role, the Team, and Our Design Process
I primarily worked on UX for the project in conjunction with Melissa Martin and Laura Castañoangel, and the UI was tackled by Paniz Parandakteh.
As a UX designer on the project, my role included conducting research, creating user personas, sketching low-fidelity wireframes, designing mid-fidelity wireframes, prototyping, and testing the prototype.
Our 3-week design sprint consisted of 5 phases which were executed using agile methodology: 1) Research 2) Planning 3) Design 4) Testing 5) Iterating
Research
Surveys and Interviews
Like any design sprint, we started with research. 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 which we found via sustainable fashion Facebook groups and subreddits. 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 — credibility, transparency, and 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.
Personas
We took all our research and insights and devised two user personas with accompanying user stories (see quotes below). These personas will guide us throughout our design sprint to ensure that we design for our users’ specific goals and needs.
“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.”
“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
After analyzing all of our research, we began to understand our project’s challenges:
- How do we convince eco-fashion designers to choose Olive+Elliot textiles over competitors?
- How do we evoke trust and credibility in Olive+Elliot?
- How do we communicate the value in Olive+Elliot’s business model?
The Solution
To overcome these challenges, we need to create a site 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.
Design
Low-Fis and Mid-Fis
As we reached the design stage of our project, we began sketching low-fidelity wireframes on paper and later digitized them in Sketch.
UI Design Direction
Our UI designer, Paniz, focussed on the style direction for Olive+Elliot’s website. She wanted the site to seem elegant and modern with a fresh and classy vibe 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
To know if a design is worthy, it must be tested. We tested our prototype on a total of 8 people. 5 of those people were fashion-forward environmentalists and 3 of them were eco-fashion designers. We gave our participants 3 tasks:
Our testing showed that we needed to edit the copy and content on the site, reorganize the hierarchy and information within the site, adjust the navbar, and fix the “Contact Us” page and Sales Enquiry Form.
For a high-level overview of the copywriting work I did for this project, check out my UX writing case study here.
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”.
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.
Final Designs
Take a look at our final high-fidelity designs below, complete with colours and images!
Final Prototype
You can check out our complete final prototype here! (Note: All images used are placeholders)
Conclusion
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.
Future Considerations
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
Here’s what I learned after completing this project:
- 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.
If you thought this case study was neat, please give it a 👏! Check out more of my work at www.annaromanovskiy.com.
