A Presentation by Stephen BarrosPALLETE.STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012
What is Pallete?If Threadless and Kickstarter had a baby, out wouldcome Palette.Threadless is an on-going t-shirt competit...
Palette is an on-going competitionfor t-shirt stores.
Who is going to use this site?USER RESEARCH
Can these online shoppers createtheir own t-shirt shop?STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring ...
USER INTERVIEWHow often do you visit the website of yourfavorite brand?Do you go to your favorite brand’s website topurcha...
Who is the audience?PERSONAS
Three groups were interviewed:✓ Under 18✓ 18-24✓ 25-35STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2...
SallyAge 15Computer savvy.Goals:✓ Seeks inspiration from         other t-shirt shops in the         online t-shirt market....
PeteAge 23Uses Computer Occasionally.Goals:✓ Needs process to be easy         to set up a shop fast✓ Relies on curation fo...
JoanAge 33New Smartphone Owner.Goals:✓ Wants to shop✓ Needs the process to         be easy to follow and         someone t...
“I have a ton of ideas for t-shirts, but I don’t knowwhere to get these shirts made and don’t know howto start an online s...
“I have a ton of ideas for t-shirts, but I don’t knowwhere to get these shirts made and don’t know howto start an online s...
“I have a ton of ideas for t-shirts, but I don’t knowwhere to get these shirts made and don’t know howto start an online s...
What are the gaps to be filled?COMPETITIVE ANALYSIS
ThreadlessT-Shirt CompetitionSTEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012   16
Cafe PressT-Shirt EditorSTEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012   17
Big CartelE-Commerce SolutionSTEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012   18
EtsyHandmade MarketplaceSTEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012   19
What are the tasks the users will experience?CARD SORTING
input                                                                                                                     ...
USER TASKS                                                                                                                ...
How are the tasks organized?FEATURES
FEATURE MATRIX                                  CHOOSE TEMPLATE                                  Change Color             ...
How will the users get to their desired tasks?SITEMAP
SITEMAP                       0.0                                                                          LEGEND         ...
SITEMAP                           0.0                                                                              LEGEND ...
SITEMAP                           0.0                        HOME                                                         ...
How will the users interact with these tasks?WIREFRAMES
STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012   30
1.0.0        STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012   31
1.0.0        STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012   32
Do these interactions address goals for the personas?PROTOTYPE
“I’m lost. What page is this again?”STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012   34
“I’m lost. What page is this again?”STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012   35
“I’m lost. What page is this again?”STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012   36
“ This rating system is confusing.  How does this work?” STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Sprin...
“ This rating system is confusing.  How does this work?” STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Sprin...
“ This rating system is confusing.  How does this work?” STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Sprin...
“ This rating system is confusing.  How does this work?”                                                                  ...
Are the questions answered?WHAT I LEARNED
State the problem.The vision statement addresses a solution.Keep personas in mind when creating experiences.Competitive an...
State the problem.The vision statement addresses a solution.Keep personas in mind when creating experiences.Competitive an...
State the problem.The vision statement addresses a solution.Keep personas in mind when creating experiences.Competitive an...
State the problem.The vision statement addresses a solution.Keep personas in mind when creating experiences.Competitive an...
State the problem.The vision statement addresses a solution.Keep personas in mind when creating experiences.Competitive an...
State the problem.The vision statement addresses a solution.Keep personas in mind when creating experiences.Competitive an...
That was “Pallette.”THANKS!
Upcoming SlideShare
Loading in …5
×

UX Presentation: "Palette"

815 views
666 views

Published on

My keynote presentation for Pallette, a web application.

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
815
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
18
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • - had to figure out if this solution would work \n
  • READ THIS FIRST: using survey monkey, i conducted survey pertaining to e-commerce shoppers\n
  • - gathering the data from survey monkey, i was able to develop who i want to target as users for this site\n
  • READ THIS FIRST: the e-commerce customers range too broadly so I wanted to narrow it down to these three groups\n
  • - note the computer literacy\n
  • - note the computer literacy\n
  • - note the computer literacy\n
  • READ THIS FIRST: these are some of the memorable quotes, starting with Sally\n
  • \n
  • \n
  • - Using the data from the user interviews and personas created, I selected a number of sites fitting to four things:\n\n
  • READ THIS FIRST: 1. An online t-shirt competition: Threadless\n
  • READ THIS FIRST: 2. An online t-shirt editor: cafe press\n
  • READ THIS FIRST: 3. An e-commerce platform: Big Cartel\n
  • READ THIS FIRST: 4. An online marketplace with a sense of community: Etsy\n
  • \n
  • READ THIS FIRST:\n- approaching those four things could be a daunting task\n- i started by listing out all possible tasks without organizing it\n- when finished, narrowed down similarities then...\n
  • - added categories to organize them\n
  • \n
  • - created feature matrix to set priority of build\n- feature, description, user value, business level of effort, development, front end\n- score is values multiplied\n- lower the score, the earlier the phase to implement\n
  • \n
  • - thinking of the personas, i wanted the site to be easy for people like Joan.\n- in the homepage, you can do either 2 things:\n
  • - Browse a gallery or setup a shop\n
  • - browsing the gallery is like going to a mall and finding your taste in stores, encouraging you to walk in\n- setting up a shop takes four steps: input your info, pick your shop template, choose your products, and confirm to publish\n
  • \n
  • - here is the landing page with the easy nav bar\n- onboarding area\n
  • - here is the gallery browsing section\n
  • - here is the shop setup wizard\n
  • \n
  • - a certain persona comes to mind here: Pete\n- needs a bit of hand holding here...\n
  • - in the wizard, the user would get lost and discouraged by the process, even if it was only a few steps to go\n- the solution?\n
  • - adding breadcrumbs to answer his question and this age old question: “are we there yet?”\n
  • - Joan comes to mind here\n
  • - when I was working on the rating system, I added a number system like Threadless\n
  • - scoring the design meant 1 is the worst and 5 is the best\n- this confused people in usability testing\n
  • - the solution? \n- added a scoring system like netflix and amazon\n- a familiar system that doesnt ask too much from the user\n- just click the stars you think the design deserves\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • UX Presentation: "Palette"

    1. 1. A Presentation by Stephen BarrosPALLETE.STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012
    2. 2. What is Pallete?If Threadless and Kickstarter had a baby, out wouldcome Palette.Threadless is an on-going t-shirt competition.Kickstarter is a funding platform for creativeconcepts.STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 2
    3. 3. Palette is an on-going competitionfor t-shirt stores.
    4. 4. Who is going to use this site?USER RESEARCH
    5. 5. Can these online shoppers createtheir own t-shirt shop?STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 5
    6. 6. USER INTERVIEWHow often do you visit the website of yourfavorite brand?Do you go to your favorite brand’s website topurchase their products?How often do you want to change a design of at-shirt you’ve seen online?STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 6
    7. 7. Who is the audience?PERSONAS
    8. 8. Three groups were interviewed:✓ Under 18✓ 18-24✓ 25-35STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 8
    9. 9. SallyAge 15Computer savvy.Goals:✓ Seeks inspiration from other t-shirt shops in the online t-shirt market.✓ Wants her own business.STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 9
    10. 10. PeteAge 23Uses Computer Occasionally.Goals:✓ Needs process to be easy to set up a shop fast✓ Relies on curation for trends in apparel designSTEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 10
    11. 11. JoanAge 33New Smartphone Owner.Goals:✓ Wants to shop✓ Needs the process to be easy to follow and someone to hold her hand along the processSTEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 11
    12. 12. “I have a ton of ideas for t-shirts, but I don’t knowwhere to get these shirts made and don’t know howto start an online shop.”“If I had an online shop, I would never run out ofideas for graphic t-shirts. I want to run my own shopso I can be my own boss.”“I’m ready to put my designs on t-shirts, but don’thave a clue where to begin- setting up a shop onlineis daunting!”
    13. 13. “I have a ton of ideas for t-shirts, but I don’t knowwhere to get these shirts made and don’t know howto start an online shop.”“If I had an online shop, I would never run out ofideas for graphic t-shirts. I want to run my own shopso I can be my own boss. Now.”“I’m ready to put my designs on t-shirts, but don’thave a clue where to begin- setting up a shop onlineis daunting!”
    14. 14. “I have a ton of ideas for t-shirts, but I don’t knowwhere to get these shirts made and don’t know howto start an online shop.”“If I had an online shop, I would never run out ofideas for graphic t-shirts. I want to run my own shopso I can be my own boss.”“I’m ready to put my designs on t-shirts, but don’thave a clue where to begin- setting up a shop onlineis daunting!
    15. 15. What are the gaps to be filled?COMPETITIVE ANALYSIS
    16. 16. ThreadlessT-Shirt CompetitionSTEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 16
    17. 17. Cafe PressT-Shirt EditorSTEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 17
    18. 18. Big CartelE-Commerce SolutionSTEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 18
    19. 19. EtsyHandmade MarketplaceSTEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 19
    20. 20. What are the tasks the users will experience?CARD SORTING
    21. 21. input tags USER TASKS Browse Concept Choose Design Publish Vote on Gallery for Shop Template Products Shop Other Shops change color text vote design stores sign in input category publish products publish site choose design create social account media comment edit on stores store profile read concept comments browse shopdemo gallery overview storestores owner name product template upload design change back- name search edit choose store ground text email template choose address fonts STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 21
    22. 22. USER TASKS Publish Shop Concept Choose Design Browse shop overview publish for Shop Template Products Gallery site input read change choose publish browse name tags comments social color template product products gallery store media template change edit input back- upload search profile category ground design Vote on edit Other Shops store text choose email textconcept design address design demo stores vote choose stores store owner fonts name comment on stores create account sign in STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 22
    23. 23. How are the tasks organized?FEATURES
    24. 24. FEATURE MATRIX CHOOSE TEMPLATE Change Color Change colors of navigation bar and link colors 1 3 3 2 18 3DESIGN PRODUCTS Choose Template Choose from select templates of shopify stores Feature MatrixChange Product Template Choose products to sell: men’s t-shirts, women’s t- 1 1 2 2 4 1 shirts, canvas bags 1 3 3 2 18 3 Change Background Change background color to light or dark.Upload Design User upload for product design for front and back of 2 1 2 3 12 1 Development Front End Feature product Description 1 User Value 1 Business LOE 2 2 4 Score 1 Phase LOE LOE Edit Text Edit content of product description and titlesChoose Design User chooses from a library of assets 2 2 2 2 16 2 2 1 2 3 12 1 Save Drafts Save progress without publishing siteType in Text Design SHOP User will be able to type in text for designing product, 2 3 2 2 24 3 SETUP printed on front or back 2 2 2 2 16 2 Edit Profile Allows users to edit profile 2 1 1 1 2 2Choose Fonts Choose fonts from library of fonts, when typing in text for designs 1 3 3 2 18 3 Input Tags Users type in tags for searching DESIGN PRODUCTS 1 1 1 1 1 1Publish Products Publish each product after finishing the design for each Change Product Template Choose products to sell: men’s t-shirts, women’s t- product Input Store Name Users type in store shirts, in a form field name canvas bags 1 1 21 23 43 32 18 3 2 3 1 1 6 1Save Drafts Save progress without publishing product to site product design for front and back of Upload Design User upload for Input Category product Users type in category in a form field for searching2 1 21 31 122 12 4 1 3 1 1 1 3 2 Choose Design User chooses from a library of assets Input Store Concept Users type in store concept in a form field 2 1 2 3 12 1 1 1 1 1 1 3PUBLISH SHOP Input Email Users type in email addressSocial Media Sharing Share to facebook and twitter after publishing site 2 31 12 13 112 33 3 Input Name Users type in name in a form field 1 1 1 1 1 1 CHOOSE TEMPLATE Change Color Change colors of navigation bar and link colors STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 1 3 3 2 18 3 24 Choose Template Choose from select templates of shopify stores
    25. 25. How will the users get to their desired tasks?SITEMAP
    26. 26. SITEMAP 0.0 LEGEND HOME single page page stack first level shop setup wizardSTEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 26
    27. 27. SITEMAP 0.0 LEGEND HOME single page page stack first level 1.0 2.0 1.0.0 1.0.0 shop setup wizard BROWSE GALLERY SHOP SETUP GALLERYSHOP GALLERY OVERVIEW STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 27
    28. 28. SITEMAP 0.0 HOME LEGEND single page page stack first level 1.0 2.0 1.0.0 1.0.0 shop setup wizard BROWSE GALLERY SHOP SETUP GALLERYSHOP GALLERY OVERVIEW 1.1 1.0.0 2.1 2.2 2.2 2.2 2.3 2.2 2.4 1.0.0 2.2 2.2 2.2DETAIL VIEW GALLERY SHOP INFO SHOP PRODUCT PUBLISH AND GALLERY FOR SHOP TEMPLATE TEMPLATE TEMPLATE TEMPLATE TEMPLATE TEMPLATE DETAILS TEMPLATES TEMPLATES CONFIRM 1.2 1.0.0 1.0.0 BUY FROM GALLERY GALLERY SHOP STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 28
    29. 29. How will the users interact with these tasks?WIREFRAMES
    30. 30. STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 30
    31. 31. 1.0.0 STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 31
    32. 32. 1.0.0 STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 32
    33. 33. Do these interactions address goals for the personas?PROTOTYPE
    34. 34. “I’m lost. What page is this again?”STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 34
    35. 35. “I’m lost. What page is this again?”STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 35
    36. 36. “I’m lost. What page is this again?”STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 36
    37. 37. “ This rating system is confusing. How does this work?” STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 37
    38. 38. “ This rating system is confusing. How does this work?” STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 38
    39. 39. “ This rating system is confusing. How does this work?” STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 39
    40. 40. “ This rating system is confusing. How does this work?” Sort By: Select Blue Theme by [username] Score this Design! 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 STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 40
    41. 41. Are the questions answered?WHAT I LEARNED
    42. 42. 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.
    43. 43. 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.
    44. 44. 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.
    45. 45. 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.
    46. 46. 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.
    47. 47. 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.
    48. 48. That was “Pallette.”THANKS!

    ×