UX Presentation: "Palette"
-
Upload
stephen-barros -
Category
Design
-
view
519 -
download
0
Transcript of UX Presentation: "Palette"
STEPHEN BARROS | [email protected] | UCLA Extension | Spring 2012
PALLETE.A Presentation by Stephen Barros
STEPHEN BARROS | [email protected] | UCLA Extension | Spring 2012
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
STEPHEN BARROS | [email protected] | UCLA Extension | Spring 2012
Can these online shoppers create their own t-shirt shop?
5
STEPHEN BARROS | [email protected] | UCLA Extension | Spring 2012
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
STEPHEN BARROS | [email protected] | UCLA Extension | Spring 2012
Three groups were interviewed:
✓ Under 18 ✓ 18-24✓ 25-35
8
STEPHEN BARROS | [email protected] | UCLA Extension | Spring 2012
Sally
Age 15Computer savvy.
Goals:
✓ Seeks inspiration from other t-shirt shops in the online t-shirt market.
✓ Wants her own business.
9
STEPHEN BARROS | [email protected] | UCLA Extension | Spring 2012
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
STEPHEN BARROS | [email protected] | UCLA Extension | Spring 2012
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!”
“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. 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!”
“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!
STEPHEN BARROS | [email protected] | UCLA Extension | Spring 2012
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
STEPHEN BARROS | [email protected] | UCLA Extension | Spring 2012
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
STEPHEN BARROS | [email protected] | UCLA Extension | Spring 2012
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
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
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
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
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
STEPHEN BARROS | [email protected] | UCLA Extension | Spring 2012
SITEMAP
26
LEGEND
single page
page stack
first level
shop setup wizard
HOME0.0
STEPHEN BARROS | [email protected] | UCLA Extension | Spring 2012
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
STEPHEN BARROS | [email protected] | UCLA Extension | Spring 2012
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
STEPHEN BARROS | [email protected] | UCLA Extension | Spring 2012 30
STEPHEN BARROS | [email protected] | UCLA Extension | Spring 2012
“I’m lost. What page is this again?”
34
STEPHEN BARROS | [email protected] | UCLA Extension | Spring 2012
“I’m lost. What page is this again?”
35
STEPHEN BARROS | [email protected] | UCLA Extension | Spring 2012
“I’m lost. What page is this again?”
36
STEPHEN BARROS | [email protected] | UCLA Extension | Spring 2012
This rating system is confusing. How does this work?”
37
“
STEPHEN BARROS | [email protected] | UCLA Extension | Spring 2012
This rating system is confusing. How does this work?”
38
“
STEPHEN BARROS | [email protected] | UCLA Extension | Spring 2012
This rating system is confusing. How does this work?”
39
“
STEPHEN BARROS | [email protected] | UCLA Extension | Spring 2012
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
This rating system is confusing. How does this work?”
40
“
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.
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.
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.
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.
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.
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.