top of page

The Sustained Company

A responsive website and app for browsing and purchasing sustainable clothing from an ethical company.

My Role:

Conception to delivery UX/UI Design, Research, Branding, Wireframing, & Prototyping

Timeline:

April - May 2023

PROBLEM STATEMENT

Many clothing brands negatively impact the environment, resulting in an increased carbon footprint. Customers often have no idea what goes into their clothing (poor labor practices, materials that harm the environment).

SOLUTION

Materials Used in Items

  • Users know exactly what is in the product.

  • Customers can take comfort in knowing how they impact their planet

  • People can shop by material.

Screen Shot 2023-05-11 at 2.01_edited.pn
TSC single phone mockup.png

Company Impact Page

  • Users can learn more about the company and how they impact the environment.

  • Customers can see the transparency of the company.

  • People can learn more about the importance of eco-friendly and ethical companies.

RESEARCH PAIN POINTS

1

Many brands do not list the materials used in their products, or they use fabrics that aren’t eco-friendly. Ethical labor practices are also a major issue in a lot of companies.

2

Clothing brands that are more sustainable tend to be more expensive, and therefore out of reach for some people.

3

There are still many brands that do not carry a wide variety of sizes making shopping more difficult and frustrating for some.

USER INTERVIEWS

I conducted unmoderated interviews with 5 people ranging from 25-45 years of age, each lasting 10-15 minutes.

Research Questions:

  1. What can I learn from the steps users took to make a purchase?

  2. Are there any areas the users were having trouble with?

  3. Are users interested in shopping more sustainably to ensure a positive impact on their planet?

  4. How long does it take a user to go through the process of checking out?

  5. Are users able to find clothes that are their size and affordable?

Script:

  • Prompt 1: Sign in.

    • How easy or difficult was this? Would you change anything?

  • Prompt 2: Show me where you think you would go to see how much you have decreased your personal carbon footprint by shopping at The Sustained Company. What percentage have you decreased your footprint by?

    • How easy or difficult was this? Would you change anything?

  • Prompt 3: Find an item you like, and go through the checkout process. Return to the Discover page when you’re finished.

    • How easy or difficult was this? Would you change anything?

  • Prompt 4: Overall, how did you feel about the app? What did you like and dislike?

PERSONAS

pexels-pnw-production-9353651.jpg

Crosby Sheridan

Age:
Education:
Hometown:
Family:
Occupation:

25
Bachelor's degree
San Diego, CA
Girlfriend and dog
Surf Shop Owner

Goals

•Looking for sustainable and functional clothing that he can wear both on and off the water.
•Willing to invest in quality, eco-friendly clothing that will last him a long time and reduce his environmental impact.

Frustrations

•Finds it difficult to find clothing that is both functional for surfing and stylish for everyday wear.
•Concerned about the environmental impact of the fashion industry and is looking for ways to reduce his own impact.

pexels-olia-danilevich-8562045.jpg

Wren Augustin

Age:
Education:
Hometown:
Family:
Occupation:

43
Master’s Degree
Denver, CO
Husband, 2 kids
Marketing Manager

Goals

•To be able to browse a wide range of eco-friendly clothing options that are stylish and affordable.
•Wants to know where each piece of clothing was made and what materials were used.

Frustrations

•Often finds it difficult to find fashionable sustainable clothing that fits her personal style and budget.
•Struggles with finding sustainable clothing in her size, as many brands do not cater to a diverse range of body types.

USER JOURNEY MAPS

I created a user journey map of Wren and Crosby’s experiences using the site to help identify possible pain points and possible improvements.

Screen Shot 2023-05-12 at 8.08.16 PM.png
Screen Shot 2023-05-12 at 8.07.16 PM.png

SITEMAP

My goal was to design a responsive website based on information architecture decisions that would include the materials used in the company’s clothing as well as transparency about their ethical practices.

Screen Shot 2023-05-11 at 3.22.51 PM.png

WIREFRAMES

I created wireframes for the app and the website for mobile, tablet, and desktop screen sizes.

Because this is a sustainable clothing company, I wanted a page dedicated to the impact the company has on the environment. I also wanted it to include statistics and materials used at the company to be transparent to the users.

LOW-FIDELITY PROTOTYPE

Screen Shot 2023-05-11 at 1.44.41 PM.png

USABILITY STUDY

I conducted a usability study to get a better understanding of what users would like to see on their journey through the website. The study helped me make design decisions that would improve my high-fidelity prototypes.

Pain Points

1

When testing on mobile devices, the sign in and create account buttons do not work.

2

The add to bag button is either not showing or does not make it clear that something was added.

3

There was some inconsistency in the call-to-action buttons.

AFFINITY DIAGRAM

Screen Shot 2023-05-12 at 8.55.23 PM.png

ITERATIONS

Before the usability study, when the add to bag button was tapped, nothing happened. This made participants confused about whether they successfully added the item to their bag. I created a component that would add a number to the bag in the top right corner when the button was tapped.

The sign-in and create account buttons did not function forcing the participants to continue as a guest. I made them function properly which then took them to the sign-in/create account page.

Screen Shot 2023-05-11 at 1.55.40 PM.png

"Sign-in" and "Create account" buttons were made functional to clear up user confusion.

Screen Shot 2023-05-11 at 1.56.16 PM.png
Screen Shot 2023-05-11 at 1.58.17 PM.png
Screen Shot 2023-05-17 at 1.22.39 PM.png

When the "Add to Bag" button is tapped, a number pops up on the bag to show users that the action was successful.

Screen Shot 2023-05-17 at 1.23.19 PM.png

THE FINAL PRODUCT

Screen Shot 2023-05-12 at 8.59.56 PM.png

CONCLUSION + TAKEAWAYS

I learned that it can be challenging to design for multiple screen sizes. I found starting from the mobile size and going up in screen size (progressive enhancement) to be more difficult than I imagined. My biggest takeaway from this project is to remember to check all buttons and interactions for all screen sizes on those respective devices to ensure everything works the same throughout the entirety of the project.

bottom of page