UX Presentation: "Palette"

  • 385 views
Uploaded on

My keynote presentation for Pallette, a web application.

My keynote presentation for Pallette, a web application.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
385
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
13
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

Transcript

  • 1. A Presentation by Stephen BarrosPALLETE.STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012
  • 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. Palette is an on-going competitionfor t-shirt stores.
  • 4. Who is going to use this site?USER RESEARCH
  • 5. Can these online shoppers createtheir own t-shirt shop?STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 5
  • 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. Who is the audience?PERSONAS
  • 8. Three groups were interviewed:✓ Under 18✓ 18-24✓ 25-35STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 8
  • 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. 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. 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. “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. “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. “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. What are the gaps to be filled?COMPETITIVE ANALYSIS
  • 16. ThreadlessT-Shirt CompetitionSTEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 16
  • 17. Cafe PressT-Shirt EditorSTEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 17
  • 18. Big CartelE-Commerce SolutionSTEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 18
  • 19. EtsyHandmade MarketplaceSTEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 19
  • 20. What are the tasks the users will experience?CARD SORTING
  • 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. 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. How are the tasks organized?FEATURES
  • 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. How will the users get to their desired tasks?SITEMAP
  • 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. 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. 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. How will the users interact with these tasks?WIREFRAMES
  • 30. STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 30
  • 31. 1.0.0 STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 31
  • 32. 1.0.0 STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 32
  • 33. Do these interactions address goals for the personas?PROTOTYPE
  • 34. “I’m lost. What page is this again?”STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 34
  • 35. “I’m lost. What page is this again?”STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 35
  • 36. “I’m lost. What page is this again?”STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 36
  • 37. “ This rating system is confusing. How does this work?” STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 37
  • 38. “ This rating system is confusing. How does this work?” STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 38
  • 39. “ This rating system is confusing. How does this work?” STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 39
  • 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. Are the questions answered?WHAT I LEARNED
  • 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. 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. 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. 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. 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. 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. That was “Pallette.”THANKS!