The sustainable wardrobe cleanup project.paigeburington.com/ProcessWork/FinalReviewBook2.pdf · I always strove to be the best at every art project and liked to ... I chose the Web

1

Paige BuringtonFinal Review

Area of Emphasis: DesignID: 03800987

05/03/2016 11:00 am

Academy of Art UniversityGraduate School of

Web Design & New Media

The sustainable wardrobe cleanup project.

Table of Contents

AUTOBIOGRAPHY

STRATEGIC PROCESS

THESIS ABSTRACT

TECHNICAL PROCESS

PROJECT LINKS

STATEMENT OF INTEREST

ANALYSIS & CONCLUSIONS

BIBLIOGRAPHY & CREDITS

PROOF OF CONCEPT

LINK TO PORTFOLIO

RÉSUMÉ

VISUAL PROCESS

ELEVATOR PITCH

UX PROCESS

3

30

6

75

84

7

80

85

8

83

4

43

5

60

3AUTOBIOGRAPHY

I have been interested in art and design ever since I can remember.

When I was young, my parents bought me countless coloring

books. In elementary school, classmates began commissioning

me to make drawing for them. I took many painting classes in

middle school and high school, and that is where I refined my skills.

I always strove to be the best at every art project and liked to

experiment with my own designs to help figure out how to make

them better. I did not realize I would be interested in graphic

design until I attended California State University of Chico. My

drawing and painting skills helped greatly. I then used my graphic

design skills to work towards a masters degree in Web Design and

New Media. I feel like my whole life has been building up to this

line of work.

I come from a small town and so I wanted to expose myself to a

much larger size of design influences and inspirations. I decided

to continue my education at the Academy of Art University

because I very much enjoy the great culture and diversity of

the San Francisco area. I chose the Web Design & New Media

major because I wanted to learn how to combine my design skills

with technical skills to create dynamic and interactive designs.

Every business needs a website in this day of age and I want to

be involved with this. This field is constantly changing and that

excites me.

I have a diverse set of interests: athletics, nutrition, fashion, crafts

and sustainability. I would love to work for a company that is

related to at least one of these.

4RÉSUMÉ

EXPERIENCE

STITCH FIX

REMOTE STYLIST | OCT. 2013 – PRESENT

» Style Fixes using online styling platform

» Focus on building relationships and

delighting clients with personal notes,

styling tips, and styling suggestions

» Maintain a keep rate for items sold per Fix

above company average

ENGELBRECHT ADVERTISING

GRAPHIC DESIGN INTERN |

JAN. 2013 – AUG. 2013

» Collaborated with other graphic designers

and marketing team to create engaging

advertisements and campaigns

» Worked on print ads, Facebook profile

redesigns, posters, car wraps, websites,

Google ads, billboards, emails

CHICO STATE WILDCAT

RECREATION CENTER (WREC)

GRAPHIC DESIGNER &

MARKETING ASSISTANT |

NOV. 2011 – MAY 2013

» Collaborated with marketing team to

create promotional advertisements for

WREC events (digital ads, x-frames,

posters, t-shirts, Facebook ads)

» Photographed, video tapped, promoted

and oversaw WREC events

» Assisted in marketing and selling booths

for Wrectacular 2012

» Took initiative to redesign digital

advertisements for the WREC

» Managed, organized, and debugged Four

Winds (WREC Digital Advertisement

Network)

» Contributed to all marketing and

communication meetings

» Used email to present and exchange

information

» Worked with clients to create effective

digital ads

» Managed social media

EDUCATION

ACADEMY OF ART UNIVERSITY,

SAN FRANCISCO

MFA Web Design & New

Media | 2013 – PRESENT

CALIFORNIA STATE

UNIVERSITY CHICO

BA Communication Design | 2008 – 2013

Emphasis in Graphic Design

Minor in Applied Computer Graphics

Cum Laude

SKILLS

Photoshop / Illustrator / InDesign /

AfterEffects / Dreamweaver / Flash /

Maya / Mirage / Mag+ / iMovie / HTML /

CSS3 / Keynote / Four Winds / Salesforce

/ Word / Powerpoint / Word Press

AWARDS

CSU, CHICO DEAN’S HONOR

ROLL | 2009 – 2013

ASSET AWARD | APR. 2012

OVERALL GPA: 3.734

ORGANIZATIONS

NET IMPACT, CSUC | 2012 – 2013

Member / Public Relations Officer

/ Web Designer / Marketing

THE HONOR SOCIETY OF PHI

KAPPA PHI | 2010 – 2013

Member

SNOWBOARD SKI CLUB,

CSUC | 2010 – 2013

Web Designer / Member

AIGA | 2012 – 2013

Member / Secretary

5

There is a crazy number of clothes going to landfill every year and more and more

women have over stuffed closets. StyleCycle is a utility app that will help women clean

out their closets in a sustainable way. They will learn about how textiles impact the

earth, whether they can sell, donate or recycle their old clothes, and where they can

properly dispose of them all in one website.

Elevator Pitch

6THESIS ABSTRACT

The number of textiles going to landfill is

steadily increasing in the United States

and this is a huge problem. With only

15% of the total textiles being reused,

this leaves about 21 billion pounds of

textiles going to landfill every year.

The idea behind the project StyleCycle is

to educate women about the importance

of not throwing away clothes and about

textile sustainability. It is a one-stop

website that women can go to figure

out clean out their closet and get rid

of clothes in the most environmentally

conscious way.

The project is designed to help users

visualize the impact of clothes, identify

where to sell, donate, or recycle their

clothes, and find a disposal location.

Researching where donation and recy-

cling centers takes time, and figuring out

where to sell and how to get the most

money for items takes even more time.

StyleCycle makes this process easy and

interesting.

StyleCycle is fun and easy to use and

invites users to keep coming back to earn

points and challenge friends. Users can

share their progress to Facebook, which

will help spread the word about the

textile sustainability issue. The project

also creates competition between users

to encourage them to implement the

website into their everyday life.

7STATEMENT OF INTEREST

This project was born from personal

interests. I have always been interest

in fashion and the environment. At

Chico State, I refined my knowledge

about sustainability by joining Net

Impact (sustainable business club). I

was the web designer for the club and

I participated in events surrounding

sustainability. When I moved to San

Francisco, I became a stylist for Stitch

Fix, and I am always aware of trends.

Merging these two passions into a

project is ideal. I currently utilize online

consignment stores and donate my

clothes to Goodwill. This project will

definitely help me toward my career

goals, because I would love to be a

designer for companies like these. This

project will help me gain skills in UX and

visual design that will help me obtain a

job in the fashion field.

“Limitless material growthis not sustainable or moral.”

~ Bryant McGill

8

Proof of Concept

9PROOF OF CONCEPT

This is the first slide of the homepage. It

gives the user a quick explanation of the

steps involved with using StyleCycle. The

first step is to figure out what clothes you

do not want anymore Then determine

whether to sell, donate, or recycle those

clothes. Challenge friends to earn

badges while completing interactive

features.

HOMEPAGE - HOW IT WORKSPG. 1/21

10PROOF OF CONCEPT

HOMEPAGE - FEATURESPG. 2/21

This is the second slide of the homepage.

It talks about the three main interactive

features of StyleCycle. Users can

11PROOF OF CONCEPT

HOMEPAGE - COLLECT BADGESPG. 3/21

This is the third page and final page of the

homepage. It explains to the user how

to collect badges and earn coupons to

spend on the marketplace (not designed

yet).

12PROOF OF CONCEPT

DISCOVER IMPACT - INTROPG. 4/21

This is the introduction page of the

“Discover Impact” infographic. Here,

the user can get learn some important

information about the 5 environmental

impacts and what the infographic on the

next page represents.

13PROOF OF CONCEPT

DISCOVER IMPACTPG. 5/21

This is the default look of the infographic.

Cotton is selected and set to 100% for

fabric percentage. On this page, users

can input the fabric type and percentage

of their garment to see how much it

impacted the earth to create.

14PROOF OF CONCEPT


Users can adjust the slider bar to see

how the 5 environmental impacts

change.

15PROOF OF CONCEPT


Users can add multiple fabric types

and adjust the slider for each. The

infographic bars will change accordingly.

16PROOF OF CONCEPT


Once users play with the infographic long

enough, they will win a “Discover Impact”

badge. Here, they can also decide to

either share or take the wardrobe quiz.

17PROOF OF CONCEPT

WARDROBE QUIZ - INTROPG. 9/21

This is the introduction page to the

wardrobe quiz. Here, the user receives

brief information about the purpose of

the quiz and what she will get out of it.

18PROOF OF CONCEPT

WARDROBE QUIZ - HOW DOES IT FIT?PG. 10/21

This is the first question of the quiz.

Users answer the question based on the

garment that they want to get rid of.

19PROOF OF CONCEPT

WARDROBE QUIZ - HOW DOES IT FIT?PG. 11/21

After a user selects an option, it will

highlight with a checkmark and the quiz

will automatically slide to the left to

the next question based on the option

selected.

20PROOF OF CONCEPT

WARDROBE QUIZ - IS IT DAMAGED?PG. 12/21

This is the next question the user will

see based on how they answered the

previous question. The user can select if

there is any damage to their garment.

21PROOF OF CONCEPT

WARDROBE QUIZ - IS IT DAMAGED?PG. 13/21

After selecting an option, a check will

appear and it will automatically slide to

the next question.

22PROOF OF CONCEPT

WARDROBE QUIZ - WHAT SEASON IS IT?PG. 14/21

The next question based on the previous

answer is what season is the garment

best worn in.

23PROOF OF CONCEPT

WARDROBE QUIZ - WHAT SEASON IS IT?PG. 15/21

After selecting this answer, a finish

button will appear because the quiz

has determined that there are no more

questions that need to be asked to

determine a recommendation for the

user.

24PROOF OF CONCEPT

WARDROBE QUIZ - CALCULATINGPG. 16/21

This is the recommendation calculation

page. It lasts for only a few seconds and

says a cute phrase while the next page

loads.

25PROOF OF CONCEPT

WARDROBE QUIZ - RECYCLING RECOMMENDATIONPG. 17/21

The user gets a recycling

recommendation based on how they

answered the "Wardrobe Quiz"

questions. They also earned a badge

for completing the quiz. There is a short

paragraph about recycling clothes. Users

can then either share that they won a

badge to Facebook, schedule a pickup of

their old clothes, or find a recycling place

nearby.

26PROOF OF CONCEPT

DISPOSAL LOCATOR - MAPPG. 18/21

The user gets a map of all the nearby

recycling, donating, and selling locations.

They can filter between the three at the

top left.

27PROOF OF CONCEPT


Users can click on any of the purple

markers to get more information about

that location.

28PROOF OF CONCEPT


A pop-up will appear with the name

of the location, address, hours (if

applicable), and a "Get Directions"

button.

29PROOF OF CONCEPT


After clicking for directions, a pop-up will

appear telling the user that they earned

a badge. They can either share this to

Facebook or return to finding directions

to the disposal location.

30

Strategic Process

Unique Positioning Statement

Personal style is always evolving. So what to do with clothes that don’t really fit into your closet

anymore? StyleCycle will help you properly dispose of your pre-loved clothes and help you visualize

your positive impact on the earth. Keep your pre-loved clothes in a closed loop product cycle, not

in landfills!

Topic Category: Utility Web App

31KEY RESEARCH / CORE COMPETITORS

Earth911Earth911 is a guide to local resources

including recycling centers, how to

recycle, pollution prevention and how to

help protect the environment.

PROS

• Color scheme makes sense

• Locates all recycling and donating locations with contact info

• Very informative

CONS

• Boring

• Not very interactive or engaging

• Almost too much information

• Searching is not clear


RecyclebankRecyclebank aims to encourage recycling

and environmentally-friendly habits.

Users can earn points for accomplishing

everyday recycling tasks. Users can gain

rewards for a certain amount of points.

PROS

• Fun / challenges

• Very informative

• Win rewards

CONS

• Too much information/ overwhelming

• Could not find anything about textile sustainability


thredUPthredUP makes it easy for women to buy

and sell clothes online. Buy pre-own like-

new clothes. They will pay you money for

the old clothes you ship them.

PROS

• Easy to earn money

• Users can estimate how much money they might get for a clothing item

• Offer a ton of quality clothes to buy

CONS

• Does very little to educate about sustainability

• It is difficult to get them to buy things or get much money from them

34KEY RESEARCH / USER SURVEY

TEST GROUP: USER SURVEYNUMBER OF PEOPLE: 62

This survey shows that fashion forward

women are moderately concerned about

sustainability and know a little about

textile sustainability. Majority said that

they currently have items in their closet

that they want to get rid of and 71% said

they have thrown away clothes before.

92% said that they have never recycled

old clothes. Majority have sold and

donated their clothes before.

35USER RESEARCH / USER SURVEY

The data shows that fashion forward

women have too many clothes in their

closet and want to get rid of some of

their clothes. There is also need for

education about textile sustainability and

textile recycling.

SURVEY RESULTS:

36KEY RESEARCH

• Since 2009, only 16.2% of textiles were recovered and kept out of

landfills (Why Recycle Shoes and

Clothing?).

• About 61% of the clothes recovered for second-hand use are exported to

foreign countries (Why Recycle Shoes

and Clothing?).

• We are able to recycle 93% of the waste we process without harmful

by-products (Why Recycle Shoes and

Clothing?).

• Textile recyclers export 61% of their products, thus reducing the U.S.

trade deficit (Why Recycle Shoes and

Clothing?).

• The U.S. EPA estimates that textile waste occupies nearly 5% of all landfill

space (Council for Textile Recycling).

• 85% of textiles are not recycling, adding up to 21 billion pounds of textiles going to landfill every year

in the U.S. (Council for Textile

Recycling).

• This is an average of 70 pounds of clothes and other textiles being thrown away annually per U.S. citizen

(Council for Textile Recycling).

• Between 1999 and 2009, the volume of PCTW generated grew by 40%

while the diversion rate only increased

by 2% (Council for Textile Recycling).

• Charities sell donated 10-20% of used

clothing at their thrift locations (A

Program of SMART The Secondary

Material and Recycled Textiles

Association).

• 45% of the rest is reused and re-

purposed (A Program of SMART The

Secondary Material and Recycled

Textiles Association).

• 30% is recycled and converted (A

Program of SMART The Secondary

Material and Recycled Textiles

Association).

• 20% is recycled into fiber (A Program

of SMART The Secondary Material

and Recycled Textiles Association).

37KEY RESEARCH

4,500 lbsThe weight of textiles

sent to landfill every hour by San Franciscans.

38KEY RESEARCH

21 Billion lbs

85%

of textiles go to landfillper year in the U.S.

of textiles generatedeach year

39KEY RESEARCH

KEY RESEARCH FOR CONTENT

1. Photos

Source: Death to Stock

Link: http://deathtothestockphoto.com/

2. Recycling, Donation, Selling Locations

Source: earth911, us again

Links: http://www.earth911.com/recycling-guide/how-to-recycle-

clothing-accessories/

http://www.usagain.com/find-a-collection-bin

3. Interactive Infographic Data

Source: Department of Environment Food & Rural Affairs

Link: http://www.businessgreen.com/bg/opinion/2362250/natural-

versus-synthetic-textile

4. Icons

Source: Tonicons

Link: https://www.tonicons.com/outline-icon-free-font/

Fabric Energy Water Use Greenhouse

Gases

Water

Wasted

Land Use

Cotton +6 +10 +3 +0 +7

Polyester +8 +2 +8 +6 +0

Acrylic +10 +6 +0 +0 +0

Nylon +9 +8 +10 +7 +0

Silk +0 +9 +0 +0 +0

Hemp +4 +5 +2 +8 +6

Wool/Cashmere +5 +4 +1 +10 +10

Flax/ Linen +4 +3 +2 +8 +7

Viscose +7 +7 +5 +9 +5

Lyocell (Tencel) +6 +0 +7 +0 +2

Regen (Recycled Poly) +7 +7 +0 +9 +0

Modal +7 +7 +4 +9 +5

Leather +5 +4 +9 +10 +10

PU & PVC Leather +8 +2 +9 +6 +0

INFOGRAPHIC CONTENT

40TEXTILE ENVIRONMENTAL IMPACT RESEARCH

Clothing and textile recycling has a

greater impact on reducing greenhouse

gases than yard waste, glass and plastic.

It takes 2,700 liters of water to produce

enough cotton to make 1 t-shirt.

The textile industry is a huge producer of

greenhouse gases. In 2008, there was

60 billion kilograms of fabric produced

and it took 1,074 billion kwh of electricity

or 132 million metric tons of coal and

6-9 trillion liters of water to produce it

(Domain-b.com : Carbon Footprint of

Textiles).

Pesticides are a one of the major

environmental impacts on the earth as it

can reduce soil fertility, pest resistance,

water pollution and presents a risk

to biodiversity (Overconsumption of

Clothes).

The spinning, weaving, and knitting

stages use a lot of energy, which

produces solid waste and generates dust

and noise (Overconsumption of Clothes).

The fabric finishing stages prepare the

fabric to be dyed and/ or printed. This

stage uses significant quantities of water,

energy and chemicals (Overconsumption

of Clothes).

Clothing and textile recycling has a

greater impact on reducing greenhouse

gases than yard waste, glass and plastic

(Smart).

It takes 2,700 liters of water to produce

enough cotton to make 1 t-shirt (WWF).

The textile industry is a huge producer of

greenhouse gases. In 2008, there was

60 billion kilograms of fabric produced

and it took 1,074 billion kwh of electricity

or 132 million metric tons of coal and

6-9 trillion liters of water to produce it

(oecotextiles).

Pesticides are a one of the major

environmental impacts on the earth as it

can reduce soil fertility, pest resistance,

water pollution and presents a risk to

biodiversity.

The spinning, weaving, and knitting

stages use a lot of energy, which

produces solid waste and generates dust

and noise.

The fabric finishing stages prepare the

fabric to be dyed and/ or printed. This

stage uses significant quantities of water,

energy and chemicals (make do and

mend).

41INTERACTIVE INFOGRAPHIC DATA RESEARCH

A study was done in 2010 by the DEFRA, the

Department of Environment Food & Rual Affairs.

There are a number of environmental impacts

associated with the production, use and disposal

of textiles. The most significant are:

• Potential acid rain

• potential water pollution through eutrophication

• Greenhouse gases emitted

• Ozone depletion, potential ozone hole over polar ice caps

• Photochemical Ozone

• Potential smog during production processes

• High volume of water usage; both during production phase and once a garment is being consumed

• Eco-toxicity, a potential hazard to animal health

• Human toxicity, a potential hazard to human health

The study found that there is no easy

answer to which type of textile natural

or synthetic, is more environmentally

sustainable. However, according to the

graph, it does rate how harmful each

textile is within each key environmental

impact (Energy Use, Water Use,

Greenhouse gases, waste water, and

Direct Land Use).

I will use this data to assign a relative

number to each type of textile. For

example, cotton would get a 10 for water

use, 0 for energy use, 3 for Greenhouse

gases, 0 for waste water, and an 8 for

direct land use. When a user sells,

donates, or recycles a cotton item,

these numbers will be applied to their

infographic.

42COMPETITORS’ MATRIX

43

Visual Process

44DESIGN INSPIRATION

FitbitFitbit's app and website inspired my

design of the "Wardrobe Quiz. I liked

how it had an introduction page with

sliding pages for each question. It was

very clean and simple to understand.

45DESIGN INSPIRATION

AnthropologieI was very inspired by the overall design

of Anthropologie's website. I liked the

color scheme and opaque white box in

the center of images. I also liked the serif

fonts used throughout the site. They

also use subtle watercolor marks, which I

ended up using in the StyleCycle logo.

46MOOD BOARDS

Flat Design

Mood BoardsI came up with four main mood boards

to explore different design directions

for my project. The first was a flat

design. I liked this design because it I

thought this would make my project look

fun and modern. The second design

direction was the minimal design. I liked

this design because it leaned more

towards being very fashion forward.

The third was a line design. I liked this

design direction because I thought I

could utilize my line drawing of clothes

throughout the project. The last mood

board I came up with was the shabby chic

design. This design had sophistication

yet communicated that it was about

used clothing. I drew a lot of the design

inspiration from Anthropologie.

47MOODBOARDS

Minimal Design Line Design

48MOODBOARDS

Logo Design Shabby Chic Design

49BRANDING

Lora

Lato

RGB: 179 172 131

HEX: B3AC83

RGB: 158 140 17

HEX: 9E8C11RGB: 235 233 217

HEX: EBE9D9

RGB: 166 105 144

HEX: A66990

RGB: 87 87 87

HEX: 575757

RGB: 77 144 149

HEX: 4D9095

RGB: 151 151 151

HEX: 979797

HEADLINES - ITALIC

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

BODY - LIGHT / REGULAR / BOLD

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

50NAME DEVELOPMENT

NAME TESTING Closet Clean Up Project Closet Clean Up Smart Closet Smart Fashion Fashion Smart Eco Closet Fashion Eco Forward Closet Forward Thread Smart Smart Threads Smart Style Style Smart Style Cycle Closet Fashion Clothes Textile Stitch Cloth Thread Threads Wardrobe Apparel Trunk Wear Attire Style Outfi

Sustainability Recycle Clean Up Smart Eco Environment Perfect





51

StyleCycle

Style Cycle

Style Cycle

Style Cycle

StyleCycle

StyleCycle

StyleCycleLOGO SKETCHES / MIDPOINT

52LOGO SKETCHES

53SKETCHES

54VISUAL DESIGN FOR MIDPOINT

55HIGH FIDELITY MOCK-UP EXPLORATION

Line Art Design Minimal Design

56HIGH FIDELITY MOCKUP EXPLORATION

Shabby Chic Design

I created high fidelity mock-ups each

from one of the moodboards I created.

After testing the designs on users, the

shabby chic design seemed to deliver the

correct message I was going for. It looks

used yet still beautiful. It needed to look

fashionable with sustainability in mind.

These are very early roughs of this type

of design, however, they main parts are

the large beautiful background images

with an opaque white box in the center.

It was decided to carry these design

elements throughout the project to give

it a sense of cohesiveness.

57VISUAL DESIGN PROCESS / VERSION 1

This was my first version of the shabby

chic design. I explored different

backgrounds (full cover photo, fading

photo, and pattern). I also explored

different fonts for the body and titles.


For this version, I concentrated on

finding high quality background images.


For this version, I decided to make

all pages slide horizontally instead of

scrolling. The idea behind this was

to help keep the design consistent

throughout the project.

60

User Experience Process

61TARGET AUDIENCE

Female

25 - 45 Years Old

Busy, Working Professionals

PrimaryFemale

18 - 38 Years Old

Live Sustainable Lifestyles

Secondary

A study of 1,600 women 16 years old and above was

conducted by Barnardo’s Retail. They found that “modern

women have adopted a “wear it once culture” when it comes

to their wardrobes and only wear items a handful of times

before considering them ‘old’”(SOURCE). The two main

reasons for stopping wearing clothes is change of weight

(49%) and impulse purchasing (23%). Also, one out of seven

women said that social media is a strong influence on what they

wear, because “being pictured twice and ‘tagged’ in the same

dress on different nights out was a fashion no-no” (SOURCE).

According to a 2007 survey by the AMP Agency, cultural

artists represent slightly more than 1 in 10 women. They

are considered “super shoppers” and are constantly trying

different things and starting new trends (Lewis).

According to the GreenBiz 2013 Eco Pulse study, they found

that millennials are more focused on sustainability (Head). In

recent years, Generation Y has been showing a major shift in

green attitudes and behaviors. They are often considered to

be ‘born green’ because they grew up in a society where eco-

consciousness was becoming a norm ("The rise of Generation

Y in the sustainable marketplace" ). These 18-36 year olds have

begun to show leadership in the sustainable marketplace.

62PERSONA

Crystal“Cultural Artist”

Age: 29

Location: San Francisco

Occupation: Manager for a local cloth-

ing retail store

Need: Clean up her closet to make room

for new purchases

Wants: A utility app that is quick, easy,

and fun

Scenario: Crystal has collected too many clothes from staying up with the latest

fashion trends. She is very busy during the week and busy with social events on the

weekends. She decides to try out StyleCycle to help her decide what clothes to get

rid of and where she can take them.

“I really need to clean out my

closet but I have no idea where

to start! Which pieces are worth

saying good bye to?”

63

Heather“Sustainable Lifestyle”

Age: 21


Occupation: College Student at San

Francisco State

Need: Get rid of clothes that do not fit

her anymore

Wants: To keep track of her sustainable

lifestyle

Scenario: Heather just graduated from San Francisco State and is moving back home.

She is very familiar with sustainability and wants to be more environmentally con-

scious. She decides to turn to StyleCycle to help her do this in a fun way.

“I want to care more about

the environment, but I don’t

understand how much of an

impact I am making.”

PERSONA

64

Diana“Wardrobe Update”

Age: 41


Occupation: Marketing

Need: Find locations to either sell, do-

nate, or recycle old clothes

Wants: To get rid of clothes she does not

need anymore

Scenario: Diana just moved to San Francisco from New York City a few months

ago to work at a tech startup. She quickly realizes that the dress code is much more

casual than NYC and realizes that she has no use for her nice work clothes anymore.

She is not familiar with the area and turns to StyleCycle to help her find local places

to either sell, donate, or recycle her clothes.

“I just got a new job and need to

get rid of my old work clothes.

I am new to the area and don’t

know where to go!”

PERSONA

65WIREFRAMES

66SITE MAP

67KEY USER FLOW

68QUIZ ARCHITECTURE

69USER TESTING

TEST GROUP: CLICKABLE PROTOTYPE

I had my test subjects use my click

through prototype on Invision. I read

out a script to each test subject and took

notes and video of each session. I was

testing the three tasks of my project:

1. TASK: Add clothes into the website

INSTRUCTIONS: Add 3 items to your

boxes

2. TASK: Adding sold, donated, or

recycled items into eco stats and sharing

to Facebook

INSTRUCTIONS: Select what items

you have gotten rid of, look at the

environmental impact, and share to

Facebook

3. TASK: Estimate payout of clothing

items and find a place to sell garment

INSTRUCTIONS: Estimate payout for a

clothing item.

70USER TESTING

1. HD size too large for small computer screen

2. There is not a “Not Damage” choice

3. Navigation icons confusing

4. No “back” arrow

5. Clothing picker confusing

6. Cannot view all history

7. Season Question confusing

8. Cannot pick multiple items in box page

Low

Low

High

Medium

Medium

Low

High

Medium

• Change size to 960px width

• Add a “No Damage” choice

• Add labels or hover labels to icons

• Add “back” button to quiz pages

• Change pictures to different clothes instead of just using t-shirts

• Add a view all history button

• Change question: “What season is it?” Edit prototype and add page with more selections

ISSUE

RECOMMENDATIONS

SEVERITY

CLICKABLE PROTOTYPE RESULTS

71USER TESTING

TEST GROUP: PAPER PROTOTYPE ROUND: 1NUMBER OF PEOPLE: 5

I created an updated version of my

project based on past feedback and

created a paper prototype of my

Homepage and Quiz pages. The

task I gave my test subjects was to

complete the Eco Quiz and receive a

recommendation for how to properly

dispose of their garment.

PAPER PROTOTYPE RESULTS

My test subjects were having trouble

finding the Eco Quiz when entering

through the Homepage. The Homepage

did not communicate the right message

to my subjects and they were confused

from the start. When entering the Eco

Quiz, some subjects were bothered

by the change in navigation at the top.

They also wanted a sense of where

they were in toe quiz questions. It was

also suggested that it would be more

helpful to have more information on the

Recommendation page.

72USER TESTING

TEST GROUP: PAPER PROTOTYPE ROUND: 2NUMBER OF PEOPLE: 5

Based on feedback from the first round

of testing, I added more information to

the Homepage to make it easier for users

to find the main features of the website. I

also tested the Input pages.


My test subjects found the Eco Quiz

button much easier this time, but they

were still confused of what the site was

all about. The arrow at the bottom of the

page and dots on the right side of the

page was confusing to most. They also

pointed out that it was confusing to have

to scroll and swipe and that it would be

better to have only one option for users.

73USER TESTING

TEST GROUP: PAPER & CLICK PROTOTYPE ROUND: 3NUMBER OF PEOPLE: 5

I tested all three tasks of my project using

paper prototypes for Task 1 and Task 3

and a clickable prototype for Task 2:

Task 1: Earn 5pts. by discovering how

much of an impact the creation of the

t-shirt had on the earth.

Task 2: Earn 5pts. by answering

questions in the Wardrobe Quiz and

getting a recommendation of how to

properly dispose of your t-shirt.

Task 3: Earn 5pts. by using the disposal

locator to find the nearest place to sell

your old work clothes.

74USER TESTING


Task 1:

All of the test subjects found the

interactive graph very interesting. Some

wanted to hover over the different

environmental impacts to get more

information about each one. Overall,

the point system seemed to be confusing

and test subjects did not understand the

incentive behind earning points.

Task 2:

All test subjects thought that the task

was very straight forward and clear.

They read the text information on the

recommendation page. Some said the

text was a little hard to read with it being

very light in weight and on an opaque

white background. They all liked how the

recommendation page lead them on to

the next task of finding a location.

Task 3:

A majority of the test subjects did not see

the map filter right away, so they were

tempted to just click on the location icons

on the map to see if they can sell their

clothes there. They also wanted to be able

to zoom in and out.

75

Technical Process

Project Form: Responsive Website

Best for: Desktop and Tablet (landscape)

76TECHNOLOGY

TECHNOLOGY USED

HTML5 / CSS3

• Bootstrap Framework for the responsive layout

• Google Fonts

JAVASCRIPT / JQUERY

• d3js.org for the interactive infographic

• underscore.js for the quiz and creating markers on the map

GOOGLE MAP API

• for the disposal locator

SKETCH / PHOTOSHOP

• for visual development

PHP

• for consistent headers and footers

OPEN SOURCE UTILITIES

• Radial Progress Chart http://pablomolnar.github.io/radial-progress-chart/

• d3.js version (3.5.16) d3js.org

• underscrore.js version(1.8.3) underscorejs.org

• Bootstrap version (3.3.5) getbootstrap.com

77TECHNICAL EXPERIMENTS

SLIDING PAGES

fullpage.js

http://alvarotrigo.com/fullPage/

This was my first attempt with having sliding full pages. It

worked ok on its own but it did not work well with other javas-

cript and jquery plugins. I ended up creating my own sliding

pages with some jquery and css.

PROGRESS BAR

Progressbar.js

http://kimmobrunfeldt.github.io/progressbar.js/

This was the first attempt at implementing a progress bar for

the quiz. I was having difficulty getting it to work correctly and

ended up using a different approach due to changing the design

of the project.

PROGRESS TRACKER

http://codepen.io/aniket/pen/whDqz

This was my first attempt at having a stepper. It was relatively

simple to implement into my project, but I ended up changing

the design of my project so I did not use it in the final solution.

1

2

3

78TECHNICAL EXPERIMENTS

INFOGRAPHIC

RadialProgress.jshttp://vizuly.io/product/radial-progress/?demo=d3jsThis was my first attempt at creating a circle graphic. I manipulated the code to create 5 circles that fit within each other. However, it was difficult to work with and it did not look exactly how I wanted for the design of the project. I ended up finding a different code that worked much better.

4

79DATA FLOWS DIAGRAM

80TITLE

Analysis & Conclusion

“StyleCycle” is a fun and interactive way to learn about how to dispose of clothes in the

right way. Women can use technology to make the process of selling, donating, and

recycling easy, with just one website. Women can share their activity to encourage

others to participate. StyleCycle will help keep clothes out of landfill, thus leading us

to a more sustainable future.

81PROBLEM & SOLUTION

PROBLEM

Americans shop more than ever, leading

to overstuffed closets. We can not

accommodate the excess so we throw

away an average of 68 pounds annually. 2

About 85% of this waste goes to landfills

where it occupies about 5% of landfill

space, and this number is growing. 1

Landfill space is expensive and hard

to find. Most textiles can be either

recycled, donated, or sold. 2

Women have clothes to get rid of and do

not have a clear understanding of their

clothing disposal options. Many have

thrown away clothes and have never

recycled clothes before.

FEATURES

• Learn about how creating clothes impacts the earth through an interactive infographic

• Figure out whether you can sell, donate, or recycle your old clothes by taking a simple quiz

• Find where the nearest place is to properly dispose of your garment, or find a store online you can ship it to

• Responsive design allows for ease of use

• Earning badges for completing interactive features will create competition and get users to return

SOLUTION

Style Cycle is a one stop place for women

to figure out where their old clothes

should go. This website uses technology

to make the process of selling, donating,

and recycling easier. Users no longer

have to research because all the

information they need is all in one place.

82SUCCESSES & CHALLENGES

SUCCESSES

I was really proud about the fact that

I got most of my prototype working

correctly. I am most excited about the

"Wardrobe Quiz" because it creates a

new question based on how the user

answers. I really like how the overall

design and logo turned out. It turned

out way better than what I presented at

the midpoint. My users also responded

positively to the new design. I also feel

way more confident in my coding and

design skills after working on this project.

CHALLENGES

The most challenging part of this project

was coding the prototype. I had to learn

a few javascript libraries and improved

my jquery and javascript coding skills.

Creating the information architecture

was a continual challenge for me due

to the features of my project changing

a few times. I struggled to make my

project completely responsive between

all devices. This was because I originally

designed the website mainly for desktop

be later realized it would be beneficial

to have it work correctly for mobile

devices as well. I ran out of time to code

media queries that would change the

layout from horizontal to vertical. I also

was unable to fully get the infographic

working exactly how I wanted it to. I

ran out of time to figure out how to get

multiple scrubs on the fabric percentage

slider.

SKILLS GAINED

• learned a lot about jquery, javascript, d3.js, underscore,js

• learned a lot about ui design

• learned a lot about responsive design and how designs can work and look very different on devices

• how to properly conduct a UX test

GOALS AT MIDPOINT

My feedback from midpoint was to

decrease the number of features I had.

I decreased it to three main features:

the quiz, infographic, and locator. I

also changed the infographic from a

dashboard to a learning experience. This

made a more interesting and engaging

experience for the user. My goal of

completing the quiz and locator were

met. I did not complete the dashboard.

Signing in is not necessary for completing

interactive features so I did not work on

the part of the project. It would make

more sense to create the dashboard in

the future once I have a marketplace up

and running.

83TITLE

Link to Portfolio

VIEW PORTFOLIO

http://paigeburington.com/FinalPortfolio.pdf

84PROJECT LINKS

Project Links

VIEW PROJECT CONCEPT VIDEO SCREEN CAPTURE

http://paigeburington.com/StyleCycle/index.php

https://vimeo.com/164502029

https://vimeo.com/164503071

85BIBLIOGRAPHY & CREDITS

1. “Why Recycle Shoes and Clothing?” RSS. N.p., n.d. Web. 04 Feb. 2015.

<http://worldwearproject.com/about-us/global-responsibility>.

2. “Council for Textile Recycling.” Council for Textile Recycling. N.p., n.d. Web.

04 Feb. 2015. <http://www.weardonaterecycle.org/>.

3. “A Program of SMART The Secondary Material and Recycled Textiles

Association” N.p., n.d. Web. 04 Feb. 2015.<http://www.smartasn.org/

about/SMART_PressKitOnline.pdf>.

4. “Zero Waste Textile Initiative.” Sfenvironment.org. N.p., n.d. Web. 04 Feb.

2015. <http://www.sfenvironment.org/textiles>.

5. “Production Phase Environmental Impacts” Business Green. N.p., n.d. Web.

04 Feb. 2015. <http://www.incisivecms.co.uk/IMG/731/296731/screen-

shot-3.jpg?1409220366>.

6. N.d. Crossroads. Web. <http://crossroadstrading.com/buy-sell-trade/tips-

for-selling/>.

7. DAVILA-LAMPE, JULIA. N.d. Flickr. Web. <http://www.flickr.com/photos/

anacoreta/6441065001/>.

8. N.d. Web. <http://lunchonthis.com/wp-content/uploads/2014/03/231.

jpg>.

9. N.d. Web. <http://www.whowhatwear.com/img/uploads/current/

images/0/63/6/main.original.jpg>.

10. N.d. Web. <http://imworld.aufeminin.com/dossiers/d20061204/

d793i23621h152724.jpg>.

11. “Domain-b.com : Carbon Footprint of Textiles.” Domain-b.com. N.p., n.d.

Web. 04 Feb. 2015. <http://www.domain-b.com/environment/20090403_

carbon_footprint.html>.

12. “Overconsumption of Clothes.” Make Do and Mend. N.p., n.d. Web. 04 Mar.

2015. <http://make-do-and-mend.org/overconsumption_of_clothes__2.

html>.

13. "The rise of Generation Y in the sustainable marketplace." The Guardian.

N.p., n.d. Web. 10 Feb. 2016. http://www.theguardian.com/sustainable-

business/blog/rise-generation-y-sustainable-marketplace>.

14. Head, Lee Ann. "Millennials May Not Be as Green as You Think." GreenBiz.

Web. 02 May 2016. https://www.greenbiz.com/blog/2013/09/12/

millennials-may-not-be-green-you-think>.

15. Lewis, Michael. "Men vs. Women: Differences in Shopping Habits &

Buying Decisions." Money Crashers. Web. 02 May 2016. http://www.

moneycrashers.com/men-vs-women-shopping-habits-buying-decisions/>.

Documents

The sustainable wardrobe cleanup project.paigeburington.com/ProcessWork/FinalReviewBook2.pdf · I always strove to be the best at every art project and liked to ... I chose the Web