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


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


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.


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


Connecting users' needs to the business goal.


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


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 bring up the main research questions.

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

Research questions (RQs)

Providing research questions, developing a comprehension of the user’s mental model.

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

Observing the users by uncovering valuable insights

Conducting user research to empathize and discover how to meet users' satisfaction.

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

Empathy map

Leveraging users' mental models to get into their minds and recognize what they really require!

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.



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.

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.


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

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

03 Prototype
Ideation | Design


Exploring ideas | developing the design’s solution
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.


Realizing the scope of the design challenge
Information architecture (IA) & user interface (UI) design of the landing and product page.

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


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. 

The best ideas rise to the top
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.


Final impact
By asking participants to rate their experiences using the produc

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


Personal learnings

  • Learned how to face obstacles 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 2 months. However, the project is still in progress to development. 


Discover more works



(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