Revamp

Extend the lifespan of clothing from your fingertips.

Overview

Here is a case study for my capstone project that I completed as part of my education at BrainStation. During this Bootcamp, I was tasked to complete a capstone project that was to create a compelling and research driven design solution. This experience was an end to end UX design process that took me from idea generation and research to developing a mobile app interface and brand.

Problem

In 2018, of the 17 thousand tons of textile waste generated in the U.S., only 2 thousand tons were recycled and 11 thousand tons were sent to landfills. The biggest contributor of textile waste was generated from the fashion industry.

I took on the challenge of solving this issue through UX research and design.

Approach

I decided to follow the design thinking process. This involved understanding my users through qualitative and quantitative research methods in order to gain insights that revealed the goals, pain-points and behaviors of my potential users. With these findings, I was able to define my users and properly begin ideating and designing a solution that was validated through user testing.

Primary research

Interviews

To better know the "why" behind my Problem Space, I created a Research Plan to speak with 4 potential users directly through user interviews. I wanted to ask some general and specific open-ended questions about their experiences and feelings around reducing their textile waste in order to get a better sense of their Pain Points, Goals, and Motivations.

Using the interviewee's pain points, behaviors and motivations I found 3 main themes: Users lack the proper knowledge to repair/upcycle clothing, users lack utilities and time to extend the lifespan of clothing, and users have trouble finding second hand clothes that fit their style.

Affinity Mapping

02 define

Opportunities for Selection

Taking my research, synthesized data, and key insights, I created a  persona to represent my primary users and an experience map that portrays their current experiences within this problem space. These methods were fueled by collective pain points, behaviors and motivations from my secondary research and the qualitative insights expressed during user interviews. By performing these UX practices I was able to unveil opportunities for design solutions that will keep our potential users’ needs at the forefront of design decisions.

Persona

03 ideate

User Stories & Epics

Using the themes that were revealed from my primary research, I created a variety of user stories to gain an idea of the functionality and features of my digital solution. These user stories then informed my main epic which was "Extending the lifespan of clothing with convenience".

Task Selection

My interviewees revealed that they would love to upcycle or turn damaged clothing into something new, but fear that that they will put a great amount of time and effort into an upcycled piece and it will end up looking bad or of poor quality. Users would rather pay professionals. So I decided to focus my task flow on uploading a piece of damaged clothing and letting professionals upcycle their material while giving users a say and being able to see a visual before any commitment is made.

User Flow

Task: upload a picture of your old material and add a custom product to your cart

04 prototype

Sketches & Wireframes

Once I established the task flow I sketched out the various layouts and design elements for each screen. Drawing inspiration from other existing UI components on Dribbble and looking at features from other e-commerce apparel companies, I began brainstorming and creating solution sketches. After numerous iterations, I had landed on an idea that would support my user’s needs.

Next, I turned my sketches into a grayscale mid-fi wireframe...

05 test

Usability Testing

Throughout the duration of the wire-framing process, I conducted usability tests on ten different individuals to obtain constructive, real-time feedback that was incorporated to improve my design and ensure a frictionless user experience. To bring clarity and consistency to my testing I devised a Testing Plan outlining the steps to validate my design solution. I conducted 2 rounds of user testing with 5 new participants within the target audience in each round. Doing so revealed feedback on what functions and features within my app were not only hurting, but also helping the user achieve their goals.

Round 1 Insights

Although all tasks were complete, I found that this prototype still had room for improvement. From participant feedback I found some valuable insights and began brainstorming solutions and used a prioritization matrix to evaluate the impact these solutions would have on usability and the effort it would take to redesign each solution.

findings...

Round 1 Redesigns

Updates to Prototype V2

Round 2 Insights

Once again, all tasks were complete but, there was still work to be done. After the test sessions were done, participants revealed some alarming feedback. I began producing potential solutions and created another prioritization matrix.

findings...

Round 2 Redesigns

Updates to Prototype V3

06 Design

UI Design

After the mid-fi grayscale prototype has been tested twice and gone through 3 iterations, it was time to inject some life into it through user interface design.
​
To establish my products’ brand, I began writing a list of keywords that embody the brand’s essence and our user persona's characteristics, desired aesthetics, values as well as potential users in their normal environment

Moodboard

Using these keywords, I created a mood board to find a color palette, and typography system that expressed these words.

Color Exploration

Using my mood board, I collected various color swatches and started the process of selecting primary, secondary, accent, and semantic colors. I knew that colors had to feel young, bold, and exciting as well as have good contrast not only with each other but with neutrals in order to be accessible. 

Typography

I chose to use Brasika Display font for the wordmark and within the mobile application itself, but have made it clear that it must be used scarcely and only for titles and headers. This is because reading this font in small sizes and in blocks of text may be hard to read for users. With that being said, we did some research on how to combine serif fonts and san serif fonts because we wanted blocks of text to be easily readable considering this is an app designed for mobile screens.

Wordmark Exploration

Brand naming

I began this process by researching words that best represented the functionality of the app and conveyed my users’ goal of extending the life span of damaged or unwanted clothing. During this process we chose to use a simple/generic font so that we could better focus on the meaning of the name, rather than the visual appeal. I finally landed on...

Hi Fidelity Prototype

Injecting my brand’s visual identity into my prototype was a challenge that I didn’t anticipate. Being a clothing brand, I found that I needed to use color sparingly as the abundance of photos that are needed to display products will be providing a lot of color and it was important to not overwhelm our users. Properly balancing out color ratios, establishing a type hierarchy that works on mobile and is accessible, and designing a unique identity required many attempts and versioning.