top of page

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

Screen Shot 2021-08-28 at 12.39.15 PM.png

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.

Introduction

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

Screen Shot 2021-08-28 at 8.07.03 PM.png

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.

Objective
Challenges

Design process 

Moving from theory to the final digital product.

Design process

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.

Screen Shot 2021-08-28 at 7.51.48 PM.png

My responsibilities

  • User Research

  • Competitor & Data Analysis

  • Visual Design

  • Interaction Design & IA

  • Storyboarding

  • Wireframe & Prototyping

  • Accessibility

  • Testing & Iteration

Empathize

01 EMPATHIZE
Research | Observation

Study setup 

Prioritizing user research methods, planning research.

Finding potential users via sustainable fashion Facebook groups and subreddits.

Screen Shot 2021-08-30 at 3.33.22 PM.png

Research goals

Creating the roadmap helped us design the main research questions.

Screen Shot 2021-08-30 at 3.34.28 PM.png

Research questions (RQs)

Providing research questions, developing an understanding of the user’s mental model.

Screen Shot 2021-08-29 at 8.03.23 PM.png

Observe the users by uncovering valuable insights

Conducting user research to empathize and understand target users' needs.

Screen Shot 2021-08-29 at 7.03.17 PM.png

Empathy map

Understanding of what is going on in the user's mind!

Screen Shot 2021-08-30 at 3.08.52 PM.png

Exploring pain points that turn lights on
Summarizing meaningful and actionable results.

Screen Shot 2021-08-30 at 3.28.18 PM.png

Inspiration | Competetive Analysis

Before jumping into the design stage of the sprint, we looked for inspiration from competitors and other sustainability-focused fashion brands.

Define

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.

Solutions
Screen Shot 2021-09-01 at 6.43.32 PM.png

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.

Persona

Narrative storyboard
Representation of feeling Chloe's pain points | My travel to the user's thought & unfolding the requirements, shot by shot through visualization.

Screen Shot 2021-08-31 at 6.46.43 PM.png

03 Prototype
Ideation | Design

Prototype

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.

Sketch

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.

Moodboard

My struggle point
Information architecture (IA) & user interface (UI) design of the landing page.

Screen Shot 2021-08-30 at 5.42.17 PM.png
Test

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.

Screen Shot 2021-08-31 at 12.38.23 AM.png

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.

Impact

Final impact

Screen Shot 2021-08-31 at 7.25.42 PM.png
Screen Shot 2021-08-31 at 8.02.06 PM.png
Square Stage

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. 

Retrospective

Discover more works

Diba

Diba

(You are currently here.) Sustainable Fashion Brand

Foodie Café

Foodie Café

Fast Food Application

Suzanne Collins

Suzanne Collins

Author's Website Redesign

bottom of page