Designing a website for a sustainable fashion brand
( Diba, affordable brand for ethical fashion on a budget)
Sustainable fashion website
UX Case study
Autumn - 2020
Introduction
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.
​
Diba is a sustainable fashion brand that is changing the face of apparel by producing clothes from natural materials, which it grows, dyes, finishes, and distributes solely within the internet.
About Diba
Ethic
Organic, recycled & sustainable materials, fair labour & wages, a take-back program powered by eco-friendly packaging & practices.
Product range
Adult apparel (Women’s apparel (more focus), men’s plus unisex)
​
Price range
$–$$
Project brief
As a team, we were given eight weeks to design an online platform for Diba that introduces its brand and explains its sustainable business model to generate interest among potential users and the general public.
Duration
-
Five weeks UX
-
Three weeks UI
The team
-
2X UX/UI designers
-
2X UX researchers
Tools used
-
Figma
-
Sketch
My role
-
UX/UI designer
-
Project management
As Diba is still in its very early stages of development, it needed to design an online digital platform that it could grow into within the next several years while meeting users' requirements.
Encountering challenges that taught me to focus on users' needs.
-
Having no research work done for Diba in the past, this was the first digital product created for Diba.
​
-
Aligning the objective of the business to users' needs.
​
-
Identifying a solution to provide an affordable option to purchase sustainable apparel by considering business expenses.
Objective
Connecting users' needs to the business goal.
Design process
Moving from theory to the final digital product.
Eight-week design sprint consisted of 5 phases (including iteration) executed using agile methodology and presented a demo to the stakeholder at the end of each sprint.
My responsibilities
-
User Research
-
Competitor & Data Analysis
-
Visual Design
-
Interaction Design & IA
-
Storyboarding
-
Wireframe & Prototyping
-
Accessibility
-
Testing & Iteration
01 EMPATHIZE
Research | Observation
Study setup
Prioritizing user research methods, planning research.
Finding potential users via sustainable fashion Facebook groups and subreddits.
Research goals
Creating the roadmap helped us design the main research questions.
Research questions (RQs)
Providing research questions, developing an understanding of the user’s mental model.
Observe the users by uncovering valuable insights
Conducting user research to empathize and understand target users' needs.
Empathy map
Understanding of what is going on in the user's mind!
Exploring pain points that turn lights on
Summarizing meaningful and actionable results.
Inspiration | Competetive Analysis
Before jumping into the design stage of the sprint, we looked for inspiration from competitors and other sustainability-focused fashion brands.
02 DEFINE
Regarding the outcome of our researches, we focused on eco-fashion users and environmentalists as the target users. The results of our surveys and interviews showed us that the target users valued four main features: affordability, transparency, credibility, quality, in sequence.
​
After analyzing all of our research, I began to understand the project’s challenges. Then, I brought up some ideas to overcome these challenges regarding the research outcome, some of which were accepted after communicating with the team and the stakeholder.
Identifying the persona
Analyzing research data helped me create Chloe.
We took all our research and insights. Then I devised one user personas with accompanying user stories. Finally, Chloe guided us throughout our design sprint to ensure that we design for our users’ specific goals and needs.
Narrative storyboard
Representation of feeling Chloe's pain points | My travel to the user's thought & unfolding the requirements, shot by shot through visualization.
03 Prototype
Ideation | Design
Brainstorming
Developing a Chloe-centred design.
As we reached the design stage of our project, we began sketching low-fidelity wireframes on paper and later digitized them in Figma.
Moodboard & UI design direction
I was inspired by Minimal, timeless, sustainable apparel & monochrome colours.
Our UI design direction led us to the style trend for Diba’s website. One aspect of the business goals was to seem elegant and modern with a fresh, timeless and classy vibe to resonate with our fashion-forward users. Therefore, we used lots of white space, greens, and yellow accents to emulate the brand’s high quality and sustainability-focused vision.
My struggle point
Information architecture (IA) & user interface (UI) design of the landing page.
04 TEST
To know if a design is worthy, it must be tested. We tested our prototype on a total of 9 people. 5 of those people were fashion-forward environmentalists and 3 of them were eco-fashion designers.
A/B testing
Where the users taught me how to overcome my obstacles to IA design.
Identifying the problem
Issue #1
Category satisfaction, 64%
“ I want to explore the precise division or section of materials that clothes are made of. "
Mary, 31, environmentalists
Key findings & users' insights
Gathering and analyzing data and feedbacks.
Proposed solution
Issue #2
Affordable price list, 52%
“ Is this possible to offer a split payment method? "
Tarah, 36, accountant
#... Iteration
Enhance usability & accessibility
Usability evaluation & iterative design to focus on how well users can learn and use Diba's website to achieve their goals.
Final impact
Retrospective
Personal learnings
-
Learned how to face an obstacle by trusting users and listening to their ideas.
-
Designing the operation of a team and managing a project improved my skills as a lead designer.
-
My ability to convince the stakeholder to adjust business goals based on users’ needs by presenting accurate data was an invaluable experience that enabled me to believe in myself as a strong designer who can bridge make a between business and user.
The stakeholder reviewed and approved the documentation, design, and alignment between users’ requirements and business goals.
​
The project had to be broken down into different versions; its design process was completed in less than 2 months. However, the project is still in progress to development.
Discover more works
 Diba(You are currently here.) Sustainable Fashion Brand |  Foodie CaféFast Food Application |  Suzanne CollinsAuthor's Website Redesign |
|---|