UX Presentation: "Palette"

STEPHEN BARROS | [email protected] | UCLA Extension | Spring 2012

PALLETE.A Presentation by Stephen Barros


What is Pallete?

If Threadless and Kickstarter had a baby, out would come Palette.Threadless is an on-going t-shirt competition.Kickstarter is a funding platform for creative concepts.

2

Palette is an on-going competition for t-shirt stores.

USER RESEARCHWho is going to use this site?


Can these online shoppers create their own t-shirt shop?

5


USER INTERVIEWHow often do you visit the website of your favorite brand?Do you go to your favorite brand’s website to purchase their products?How often do you want to change a design of a t-shirt you’ve seen online?

6

PERSONASWho is the audience?


Three groups were interviewed:

✓ Under 18 ✓ 18-24✓ 25-35

8


Sally

Age 15Computer savvy.

Goals:

✓ Seeks inspiration from other t-shirt shops in the online t-shirt market.

✓ Wants her own business.

9


Pete

Age 23Uses Computer Occasionally.

Goals:

✓ Needs process to be easy to set up a shop fast

✓ Relies on curation for trends in apparel design

10


JoanAge 33New Smartphone Owner.

Goals:

✓ Wants to shop

✓ Needs the process to be easy to follow and someone to hold her hand along the process

11

“I have a ton of ideas for t-shirts, but I don’t know where to get these shirts made and don’t know how to start an online shop.”

“If I had an online shop, I would never run out of ideas for graphic t-shirts. I want to run my own shop so I can be my own boss.”

“I’m ready to put my designs on t-shirts, but don’t have a clue where to begin- setting up a shop online is daunting!”


“If I had an online shop, I would never run out of ideas for graphic t-shirts. I want to run my own shop so I can be my own boss. Now.”

“I’m ready to put my designs on t-shirts, but don’t have a clue where to begin- setting up a shop online is daunting!”


“If I had an online shop, I would never run out of ideas for graphic t-shirts. I want to run my own shop so I can be my own boss.”

“I’m ready to put my designs on t-shirts, but don’t have a clue where to begin- setting up a shop online is daunting!

COMPETITIVE ANALYSISWhat are the gaps to be filled?


ThreadlessT-Shirt Competition

16


Cafe PressT-Shirt Editor

17


Big CartelE-Commerce Solution

18


EtsyHandmade Marketplace

19

CARD SORTINGWhat are the tasks the users will experience?


USER TASKS

21

editprofile

inputtags

namestore

inputcategory

storeconcept

emailaddress

storeownername

changecolor

choosetemplate

changeback-groundedit

text

producttemplate upload

design

choosedesign

textdesign

choosefonts

publishproducts

socialmedia

publishsite

shopoverview

browsegallery

search

readcomments

votestores

demostores

commenton stores

createaccount

sign in

BrowseGalleryPublishShopDesignProductsChooseTemplateVote on

Other ShopsConceptfor Shop


USER TASKS

22

editprofile

inputtagsname

store

inputcategory

storeconcept

emailaddress

storeownername

changecolor

choosetemplate

changeback-ground

edittext

producttemplate

uploaddesign

choosedesign text

design

choosefonts

publishproducts social

media

publishsite

shopoverview

browsegallery

search

readcomments

votestores

demostores

commenton stores

createaccount

sign in

BrowseGallery

PublishShop

DesignProducts

ChooseTemplate

Conceptfor Shop

Vote onOther Shops

FEATURESHow are the tasks organized?


FEATURE MATRIX

24

DESIGN PRODUCTSChange Product Template Choose products to sell: men’s t-shirts, women’s t-

shirts, canvas bags

Upload Design User upload for product design for front and back of product

Choose Design User chooses from a library of assets

Type in Text Design User will be able to type in text for designing product, printed on front or back

Choose Fonts Choose fonts from library of fonts, when typing in text for designs

Publish Products Publish each product after finishing the design for each product

Save Drafts Save progress without publishing product to site

PUBLISH SHOPSocial Media Sharing Share to facebook and twitter after publishing site

1 3 3 2 18 3

1 1 2 2 4 1

2 1 2 3 12 1

2 2 2 2 16 2

1 3 3 2 18 3

1 1 2 2 4 3

2 1 2 3 12 1

2 1 2 3 12 3

CHOOSE TEMPLATEChange Color Change colors of navigation bar and link colors

Choose Template Choose from select templates of shopify stores

Change Background Change background color to light or dark.

Edit Text Edit content of product description and titles

Save Drafts Save progress without publishing site


shirts, canvas bags



1 3 3 2 18 3

1 1 2 2 4 1

2 1 2 3 12 1

2 2 2 2 16 2

2 3 2 2 24 3

1 3 3 2 18 3

1 1 2 2 4 1

2 1 2 3 12 1

Feature Description User Value Business LOE Development LOE

Front End LOE Score Phase

SETUP SHOPEdit Profile Allows users to edit profile

Input Tags Users type in tags for searching

Input Store Name Users type in store name in a form field

Input Category Users type in category in a form field for searching

Input Store Concept Users type in store concept in a form field

Input Email Users type in email address

Input Name Users type in name in a form field

CHOOSE TEMPLATEChange Color Change colors of navigation bar and link colors

Choose Template Choose from select templates of shopify stores

Change Background Change background color to light or dark.

Edit Text Edit content of product description and titles

Save Drafts Save progress without publishing site


shirts, canvas bags



Type in Text Design User will be able to type in text for designing product, printed on front or back

Choose Fonts Choose fonts from library of fonts, when typing in text for designs

Publish Products Publish each product after finishing the design for each product

Save Drafts Save progress without publishing product to site

PUBLISH SHOPSocial Media Sharing Share to facebook and twitter after publishing site

Publish Shop Publish drafts to community

Shop Overview Demo shop as a preview before publishing site

BROWSE GALLERYBrowse Gallery Browse gallery in a grid with pagination

Search Search bar for users, calling to tags store owners created for each store concept

Read Comments Read comments other users submitted to each store concept

Vote Stores Vote on stores with a “like” button

Demo Stores Demo shop to get a feel for concept by clicking through navigation; store will not be able to checkout and buy

Comment on Stores Submit comments on each store concept by clicking on store concept in the gallery

Create Account Create account to comment or start store: user profile includes email, name, password, and/or store info

Sign In Sign in will be on every page; sign in is not necessary to browse gallery, except for posting comments and voting

2 1 1 1 2 2

1 1 1 1 1 1

2 3 1 1 6 1

3 1 1 1 3 2

1 1 1 1 1 3

3 1 1 1 3 3

1 1 1 1 1 1

1 3 3 2 18 3

1 1 2 2 4 1

2 1 2 3 12 1

2 2 2 2 16 2

2 3 2 2 24 3

1 3 3 2 18 3

1 1 2 2 4 1

2 1 2 3 12 1

2 2 2 2 16 2

1 3 3 2 18 3

1 1 2 2 4 3

2 1 2 3 12 1

2 1 2 3 12 3

2 2 2 2 16 1

1 3 3 2 18 1

2 1 2 3 12 2

2 2 2 2 16 1

2 1 2 3 12 2

2 2 2 2 16 2

1 3 3 2 18 3

2 2 2 2 16 2

1 3 3 2 18 1

2 1 2 3 12 1

Feature Matrix

SITEMAPHow will the users get to their desired tasks?


SITEMAP

26

LEGEND

single page

page stack

first level

shop setup wizard

HOME0.0


SITEMAP

27

LEGEND

single page

page stack

first level

shop setup wizard

HOME0.0

SHOP SETUPOVERVIEW

2.0

GALLERY1.0.0

GALLERY1.0.0

BROWSESHOP GALLERY

1.0


SITEMAP

28

HOME0.0

SHOP SETUPOVERVIEW

2.0

TEMPLATE2.2

TEMPLATE2.2

TEMPLATE2.2

TEMPLATE2.2

TEMPLATE2.2

TEMPLATE2.2

SHOPTEMPLATES

2.2

SHOP INFODETAILS

2.1

PRODUCTTEMPLATES

2.3

PUBLISH ANDCONFIRM

2.4

GALLERY1.0.0

GALLERY1.0.0

BROWSESHOP GALLERY

1.0

GALLERY1.0.0

GALLERY1.0.0

DETAIL VIEW FOR SHOP

1.1

GALLERY1.0.0

GALLERY1.0.0

BUY FROMSHOP

1.2

LEGEND

single page

page stack

first level

shop setup wizard

WIREFRAMESHow will the users interact with these tasks?

STEPHEN BARROS | [email protected] | UCLA Extension | Spring 2012 30


1.0.0


1.0.0

PROTOTYPEDo these interactions address goals for the personas?


“I’m lost. What page is this again?”

34



35



36


This rating system is confusing. How does this work?”

37

“



38

“



39

“


Blue Themeby [username]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus

Score this Design!

Sort By: Select


40

“

WHAT I LEARNEDAre the questions answered?

State the problem.The vision statement addresses a solution.Keep personas in mind when creating experiences.Competitive analysis helps frame the solution.Wireframing requires zooming between micro and macro.Usability testing ensures designed experiences are implemented.






THANKS!That was “Pallette.”