vision statement | competitors | user interview | personas | competitive analysis                                         ...
E-COMMERCE APPLICATION: “Palette”                                         VISION STATEMENT	PAGE 2VISION STATEMENTIf Thread...
E-COMMERCE APPLICATION: “palette”                                                                                COMPETITO...
E-COMMERCE APPLICATION: “palette”                                                                          USER INTERVIEW	...
E-COMMERCE APPLICATION: “palette”                                           personas		PAGE 5personasThe personas showcased...
E-COMMERCE APPLICATION: “palette”                                                                             personas		PA...
E-COMMERCE APPLICATION: “palette”                                         COMPETITOR ANALYSIS	PAGE 7                      ...
E-COMMERCE APPLICATION: “palette”                                         COMPETITOR ANALYSIS	PAGE 8                      ...
E-COMMERCE APPLICATION: “palette”                                         COMPETITOR ANALYSIS		PAGE 9                     ...
E-COMMERCE APPLICATION: “palette”                                         COMPETITOR ANALYSIS		PAGE 10                    ...
E-COMMERCE APPLICATION: “palette”                                         COMPETITOR ANALYSIS		PAGE 11                    ...
E-COMMERCE APPLICATION: “palette”                                         COMPETITOR ANALYSIS	PAGE 12                     ...
E-COMMERCE APPLICATION: “palette”                                         COMPETITOR ANALYSIS	PAGE 13                     ...
E-COMMERCE APPLICATION: “palette”                                         COMPETITOR ANALYSIS	PAGE 14                     ...
E-COMMERCE APPLICATION: “palette”                                         COMPETITOR ANALYSIS	PAGE 15                     ...
E-COMMERCE APPLICATION: “palette”                                         COMPETITOR ANALYSIS	PAGE 16                     ...
E-COMMERCE APPLICATION: “palette”                                         COMPETITOR ANALYSIS	PAGE 17                     ...
E-COMMERCE APPLICATION: “palette”                                                                      mental model	      ...
E-COMMERCE APPLICATION: “palette”                                                                          card sorting	  ...
E-COMMERCE APPLICATION: “palette”                                                                                         ...
2             1            1           1               2                2      Input Tags                 Users type in ta...
E-COMMERCE APPLICATION: “palette”                                                                                         ...
Save Drafts              Save progress without publishing product to site                                                 ...
E-COMMERCE APPLICATION: “palette”                                                                Sitemap	                 ...
E-COMMERCE APPLICATION: “palette”                                         SITEMAP	                                        ...
Palette                                     BROWSE GALLERY            CREATE SHOP                                    Searc...
E-COMMERCE APPLICATION: “palette”                                                                                         ...
E-COMMERCE APPLICATION: “palette”                                                                                         ...
UX Pitch: Palette
UX Pitch: Palette
UX Pitch: Palette
UX Pitch: Palette
UX Pitch: Palette
UX Pitch: Palette
UX Pitch: Palette
UX Pitch: Palette
UX Pitch: Palette
UX Pitch: Palette
UX Pitch: Palette
Upcoming SlideShare
Loading in …5
×

UX Pitch: Palette

2,718 views

Published on

Deck containing UX research and wireframing for an e-commerce platform called "Palette."

Published in: Technology, Business
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,718
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

UX Pitch: Palette

  1. 1. vision statement | competitors | user interview | personas | competitive analysis mental model | card sorting | user tasks | features | site map | user testing | wireframesE-commerce application: “Palette”STEPHEN BARROS | email@stephenbarros.com User Experience Design | Y1439 | X 481.99AFUCLA Extension | Spring 2012 Instructors: Jaime Levy Russell + Mark Sloan
  2. 2. E-COMMERCE APPLICATION: “Palette” VISION STATEMENT PAGE 2VISION STATEMENTIf Threadless and Kickstarter had a baby, out How Palette works:would come Palette. • User is presented with an e-commerce template to decorate and determine thePalette is an on-going competition for t-shirt overall theme.store concepts. Anyone can submit a concept. • User is presented with t-shirt templates andThe Palette community votes for their favorite. uploads designs for each product.The winner gets a live e-commerce shop, and • Palette ties into the Shopify API to setup shopPalette takes care of inventory and fulfillment. • Store does not go live until a winner is announced by Dabble.The main goals of the site: • The winner gets fulfillment done, gets 70% and• Start an online t-shirt shop. Palette a cut of 30% each transaction.• Rate, review, and critique concepts for online t-shirt shops.STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 User Experience Design | Y1439 | X 481.99AF | Instructors: Jaime Levy Russell + Mark Sloan
  3. 3. E-COMMERCE APPLICATION: “palette” COMPETITORs PAGE 3COMPETITORsThe main focus of the site is where the user designs the store template then adds products.The sites analyzed will influence style and features of Palette. Each site is well known and widelyused because of their usability and organization of features.1) BIG CARTEL 2) CAFE PRESS 3) BEHANCE PROSITE 4) NIKE IDhttp://www.bigcartel.com/ http://www.cafepress.com/ http://www.behance.net/prosite http://nikeid.nike.com make/custom-t-shirtsSite Purpose Site Purpose Site PurposeA hosted e-commerce Site Purpose Web software anyone can use Allows customers to customizeplatform that allows anyone Customize a selection of to create a portfolio. colors on select Nike shoes.to set up and run their own apparel by uploading assetsonline store. or selecting from a library of Strengths Strengths assets provided by Cafe Press. All options for each feature are The product is prominent. It’sStrengths organized well. Hierarchy for easy to navigate to each step.Each section is designed and Strengths accordion menu gives user a Clicking on the actual productorganized well. Icons that are The site is very well organized clear and easy flow through to customize is easy.associated with menu items for the options available. the process.help make navigation easy. Text is clear and easy to digest. Weaknesses Weaknesses Some text is tough to see withWeaknesses Weaknesses The site’s live area assumes stylized background.The site has few call to action The illustration isn’t a good the user will have big browseritems for each page. representation of the product. window- scrolling is tedious.STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 User Experience Design | Y1439 | X 481.99AF | Instructors: Jaime Levy Russell + Mark Sloan
  4. 4. E-COMMERCE APPLICATION: “palette” USER INTERVIEW PAGE 4USER INTERVIEWThe main purpose of this survey is to determine if the market of online shoppers are savvyenough to setup their own e-commerce sites. Three main demographics will be representedand surveyed: under 18, 18-24 and 25-35.1. What is your age? 4. How often are you on the internet? - under 18 5. What is your job occupation? - 18-24 6. How often do you buy products online? - 25-35 7. Do you wear apparel you have customized yourself? - 35-50 8. How often do you visit the website of your favorite brand? 9. Do you go to your favorite brand’s website to purchase2. What is your gender? their products? - male 10. How satisfied are you with the product selection of your - female favorite brand online? 11. How often do you want to change a design of a t-shirt you’ve3. Select educational level: seen online? - Some High School (or less) 12. How important is it for your favorite brand to personalize - Graduated High School their products for you? - Some College 13. Do you have ideas about the product your favorite - Graduated College brand sells? - Completed Vocational Program (after High School) 14. What would you use this customization tool for? - Completed Master’s Degree 15. How often would you use this customization tool? - Completed Doctoral DegreeSTEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 User Experience Design | Y1439 | X 481.99AF | Instructors: Jaime Levy Russell + Mark Sloan
  5. 5. E-COMMERCE APPLICATION: “palette” personas PAGE 5personasThe personas showcased in the following pages represent demographics from three main groups:under 18, 18-24 and 25-35. The profiles mentioned include a quote that represents the main problemto solve for the particular age group, followed by a back story and key goals they hope to reach us-ing this site.STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 User Experience Design | Y1439 | X 481.99AF | Instructors: Jaime Levy Russell + Mark Sloan
  6. 6. E-COMMERCE APPLICATION: “palette” personas PAGE 6personas SALLY Quote Key Goals Age 15 / Cheerleader / Some High School “I have a ton of ideas for t-shirts • Seeks inspiration from other She is internet savvy with her smartphone and the shiny new but I don’t know where to get t-shirt shops in market laptop her parents gave her. She convinced her Mom to buy her these shirts made and don’t • Wants her own business. school clothes online, so she’s familiar with e-commerce. She is know how to start an online known to be creative and proves this by using basic photo editing shop.” skills to regularly post funny pictures on her blog. PETE Quote Key Goals Age 23 / Account Exec. / College Degree “If I had an online shop, I would • Needs easy to use interface Pete is an over ambitious account manager at a creative agency. never run out of ideas for • Relies on curation by sites for He has lots of energy and loves to impress his coworkers with his graphic t-shirts. I want to run taste in apparel design endless amounts of ideas for new business ventures. He works my own shop so I can be my with computers daily- making spreadsheets, keynote presenta- own boss.” tions, and sending emails. JOAN Quote Key Goals Age 33 / Office Manager / College Degree “I’m ready to put my designs • Loves to shop Joan is a stylish office manager by day but a painter by night. on t-shirts but don’t have a clue • Needs the process to be easy She’s computer savvy and loves to shop for clothes online. She where to begin- setting up a and someone to hold her visits enough e-commerce sites to know the market for her age shop online is daunting!” hand along the process and what makes a site look good. She shops for graphic t-shirts for her and her husband to wear on the weekends.STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 User Experience Design | Y1439 | X 481.99AF | Instructors: Jaime Levy Russell + Mark Sloan
  7. 7. E-COMMERCE APPLICATION: “palette” COMPETITOR ANALYSIS PAGE 7 NIKE ID http://nikeid.nike.com Site Purpose Allows customers to customize colors on select Nike shoes. Pros • Product is front and center • Easy to navigate process with big breadcrumbs • Clicking on product to customize is easy • There is more than one way to view the product Cons • Some text tough to see with overstylized background • Too many steps to complete the processSTEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 User Experience Design | Y1439 | X 481.99AF | Instructors: Jaime Levy Russell + Mark Sloan
  8. 8. E-COMMERCE APPLICATION: “palette” COMPETITOR ANALYSIS PAGE 8 cafe press http://www.cafepress.com/make/custom-t-shirts Site Purpose Customize a selection of apparel by uploading assets or selecting from a library of assets provided by Cafe Press. Pros • Good organization of options • Text clear/easy to digest • Product stage zoom Cons • Illustration of product not good representation • Steps to finish process are not clear- needs breadcrumbsSTEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 User Experience Design | Y1439 | X 481.99AF | Instructors: Jaime Levy Russell + Mark Sloan
  9. 9. E-COMMERCE APPLICATION: “palette” COMPETITOR ANALYSIS PAGE 9 skin it http://www.skinit.com/customizer Site Purpose Customize a selection of devices by uploading assets or selecting from a library of assets provided by SkinIt. Pros • Organization of options for both front and back of product • Good direction hints for user • Icons consistent for ease of use Cons • Hierarchy of steps not clear • Product image small portion of the pageSTEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 User Experience Design | Y1439 | X 481.99AF | Instructors: Jaime Levy Russell + Mark Sloan
  10. 10. E-COMMERCE APPLICATION: “palette” COMPETITOR ANALYSIS PAGE 10 Gelaskin http://www.gelaskins.com/create/upload Site Purpose Customize a selection of devices by uploading assets or selecting from a library of assets provided by Gelaskin. Pros • Organization of options clear and easy to digest • Product main focus of the site • Typography is easy to read and set well Cons • Could use more tools for users to edit contentSTEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 User Experience Design | Y1439 | X 481.99AF | Instructors: Jaime Levy Russell + Mark Sloan
  11. 11. E-COMMERCE APPLICATION: “palette” COMPETITOR ANALYSIS PAGE 11 shopify http://shopify.com/ Site Purpose A hosted ecommerce platform that allows anyone to set up and run their own online store. Pros • Navigation easy • “Steps” always at the bottom as a reminder to complete • Clear hierarchy Cons • Space not allocated efficientlySTEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 User Experience Design | Y1439 | X 481.99AF | Instructors: Jaime Levy Russell + Mark Sloan
  12. 12. E-COMMERCE APPLICATION: “palette” COMPETITOR ANALYSIS PAGE 12 big cartel http://www.bigcartel.com/ Site Purpose A hosted ecommerce platform that allows anyone to set up and run their own online store. Pros • Clear hierarchy for options • Sections designed/organized well • Icons associated with menu help ease of use Cons • Few call to actionsSTEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 User Experience Design | Y1439 | X 481.99AF | Instructors: Jaime Levy Russell + Mark Sloan
  13. 13. E-COMMERCE APPLICATION: “palette” COMPETITOR ANALYSIS PAGE 13 wordpress http://wordpress.org/ Site Purpose Web software anyone can use to create a website or blog. Pros • All options on one page • Important info on main page • Consistent sections Cons • Overwhelming to have information on one page • No clear hierarchySTEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 User Experience Design | Y1439 | X 481.99AF | Instructors: Jaime Levy Russell + Mark Sloan
  14. 14. E-COMMERCE APPLICATION: “palette” COMPETITOR ANALYSIS PAGE 14 apple - find out how http://www.apple.com/findouthow/mac/ Site Purpose Landing page for video tutorials on how to use Mac OS X. Pros • Main video is main focus of the site. • Thumbnails of featured videos to the right let user know what is playing now, and what video is next. • More videos are available as text links below main hero. Cons • No call to action to purchase product that is currently in view, within the video.STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 User Experience Design | Y1439 | X 481.99AF | Instructors: Jaime Levy Russell + Mark Sloan
  15. 15. E-COMMERCE APPLICATION: “palette” COMPETITOR ANALYSIS PAGE 15 kickstarter http://www.kickstarter.com/ Site Purpose Funding platform for creative projects. Pros • The slogan or “elevator pitch” is front and center, making it easy to find and read the site’s main purpose. • Project of the day is featured on the home page. • Categories of projects are above fold, making projects easy to find for new users. Cons • Too much information on the landing page is overwhelming for the new user to take in.STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 User Experience Design | Y1439 | X 481.99AF | Instructors: Jaime Levy Russell + Mark Sloan
  16. 16. E-COMMERCE APPLICATION: “palette” COMPETITOR ANALYSIS PAGE 16 Threadless http://www.threadless.com/ Site Purpose A platform for an on-going competition for t-shirt designs. Pros • Hero image dominates the page, forcing user to view featured content that slides through different images. • Thumbs below fold showcase products available to purchase. Cons • Drop down navigation is overwhelming for new users. • Smaller thumbs below main hero is tied to main hero: wasted space that could be allocated to other content.STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 User Experience Design | Y1439 | X 481.99AF | Instructors: Jaime Levy Russell + Mark Sloan
  17. 17. E-COMMERCE APPLICATION: “palette” COMPETITOR ANALYSIS PAGE 17 behance prosite http://www.behance.net/prosite Site Purpose Web software anyone can use to create a portfolio. Pros • Sections designed/organized well • Hierarchy for accordion gives user good direction through available options • Call to action buttons easy to find • Good navigation throughout Cons • Scrolling of live area is inconvenient for smaller screensSTEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 User Experience Design | Y1439 | X 481.99AF | Instructors: Jaime Levy Russell + Mark Sloan
  18. 18. E-COMMERCE APPLICATION: “palette” mental model PAGE 18analogy becoming a painter palette Paint Inspiration Setup Shop Inspiration Concept for subject Browse Galleries Support Other Artists Concept Browse Vote on for Shop T-Shirt Gallery Other Shops Choose Canvas Choose Template Paint Subject Design Products Show at Gallery Publish ShopSTEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 User Experience Design | Y1439 | X 481.99AF | Instructors: Jaime Levy Russell + Mark Sloan
  19. 19. E-COMMERCE APPLICATION: “palette” card sorting PAGE 19user tasksSetup Shop Inspiration Concept Choose Design Publish Browse Vote on for Shop Template Products Shop Gallery Other Shops edit product social browse vote change profile input template upload media publish gallery stores demo color choose search tags design site stores template read comment name input change choose text shop comments on stores create edit store category back- design design overview account text ground store email choose publish sign in concept address fonts products store owner nameSTEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 User Experience Design | Y1439 | X 481.99AF | Instructors: Jaime Levy Russell + Mark Sloan
  20. 20. E-COMMERCE APPLICATION: “palette” features PAGE 20value matrix 1 Feature Matrix Development Front End Feature Description User Value Business LOE Score Phase LOE LOE SETUP SHOP Edit Profile Allows users to edit profile 2 1 1 1 2 2 Input Tags Users type in tags for searching 1 1 1 1 1 1 Input Store Name Users type in store name in a form field 2 3 1 1 6 1 Input Category Users type in category in a form field for searching 3 1 1 1 3 2 Input Store Concept Users type in store concept in a form field 1 1 1 1 1 3 Input Email Users type in email address 3 1 1 1 3 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 1 3 3 2 18 3 Choose Template Choose from select templates of shopify stores 1 1 2 2 4 1STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 User Experience Design | Y1439 | X 481.99AF | Instructors: Jaime Levy Russell + Mark Sloan Change Background Change background color to light or dark.
  21. 21. 2 1 1 1 2 2 Input Tags Users type in tags for searching 1 1 1 1 1 1E-COMMERCE APPLICATION: “palette” features PAGE 21 Input Store Name Users type in store name in a form field 2 3 1 1 6 1 Input Category Users type in category in a form field for searching 3 1 1 1 3 2value matrix 2 Input Store Concept Users type in store concept in a form field 1 1 1 1 1 3 Input Email Users type in email address 3 1 1 1 3 3 Feature Matrix Input Name Users type in name in a form field 1 1 1 1 1 1 Development Front End Feature Description User Value Business LOE Score Phase LOE LOE CHOOSE TEMPLATE Change Color SETUP SHOP Change colors of navigation bar and link colors 1 3 3 2 18 3 Edit Profile Allows users to edit profile 2 1 1 1 2 2 Choose Template Choose from select templates of shopify stores 1 1 2 2 4 1 Input Tags Users type in tags for searching 1 1 1 1 1 1 Change Background Change background color to light or dark. 2 1 2 3 12 1 Input Store Name Users type in store name in a form field 2 3 1 1 6 1 Edit Text Edit content of product description and titles 2 2 2 2 16 2 Input Category Users type in category in a form field for searching 3 1 1 1 3 2 Save Drafts Save progress without publishing site 2 3 2 2 24 3 Input Store Concept Users type in store concept in a form field 1 1 1 1 1 3 Input Email Users type in email address 3 1 1 1 3 3 DESIGN PRODUCTS Change Product Template Choose products toin a form field Input Name Users type in name sell: men’s t-shirts, women’s t- shirts, canvas bags 1 1 3 1 3 1 2 1 18 1 3 1 Upload Design User upload for product design for front and back of product 1 1 2 2 4 1 Choose Design User chooses from a library of assets CHOOSE TEMPLATE 2 1 2 3 12 1 Change Color Change colors of navigation bar and link colors Type in Text Design User will be able to type in text for designing product, 1 3 3 2 18 3 printed on front or back 2 2 2 2 16 2 Choose Template Choose from select templates of shopify stores Choose Fonts Choose fonts from library of fonts, when typing in text 1 1 2 2 4 1 for designs 1 3 3 2 18 3 Change Background Change background color to light or dark.STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 User Experience Design | Y1439 | X 481.99AF | Instructors: Jaime Levy Russell + Mark Sloan 2 1 2 3 12 1 Publish Products Publish each product after finishing the design for each
  22. 22. E-COMMERCE APPLICATION: “palette” features PAGE 22 CHOOSE TEMPLATE Change Color Change colors of navigation bar and link colors 1 3 3 2 18 3 Choose Template Choose from select templates of shopify stores 1 1 2 2 4 1value matrix 3 Change Background Change background color to light or dark. 2 1 2 3 12 1 Edit Text Edit content of product description and titles Feature Matrix 2 2 2 2 16 2 Save Drafts Save progress without publishing site 2 3 2 2 24 3 Development Front End Feature Description User Value Business LOE Score Phase LOE LOE DESIGN PRODUCTS SETUP SHOP Template Choose products to sell: men’s t-shirts, women’s t- Change Product shirts, canvas bags 1 3 3 2 18 3 Edit Profile Allows users to edit profile 2 1 1 1 2 2 Upload Design User upload for product design for front and back of product 1 1 2 2 4 1 Input Tags Users type in tags for searching 1 1 1 1 1 1 Choose Design User chooses from a library of assets 2 1 2 3 12 1 Input Store Name Users type in store name in a form field 2 3 1 1 6 1 Type in Text Design User will be able to type in text for designing product, printed on front or back 2 2 2 2 16 2 Input Category Users type in category in a form field for searching 3 1 1 1 3 2 Choose Fonts Choose fonts from library of fonts, when typing in text for designs 1 3 3 2 18 3 Input Store Concept Users type in store concept in a form field 1 1 1 1 1 3 Publish Products Publish each product after finishing the design for each product 1 1 2 2 4 3 Input Email Users type in email address 3 1 1 1 3 3 Save Drafts Save progress without publishing product to site Input Name Users type in name in a form field 2 1 2 3 12 1 1 1 1 1 1 1 PUBLISH SHOP Social Media Sharing CHOOSE TEMPLATE Share to facebook and twitter after publishing site 2 1 2 3 12 3 Change Color Change colors of navigation bar and link colors 1 3 3 2 18 3 Publish Shop Publish drafts to community 2 2 2 2 16 1 Choose Template Choose from select templates of shopify stores 1 1 2 2 4 1 Shop Overview Demo shop as a preview before publishing site 1 3 3 2 18 1 Change Background Change background color to light or dark.STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 User Experience Design | Y1439 | X 481.99AF | Instructors: Jaime Levy Russell + Mark Sloan 2 1 2 3 12 1
  23. 23. Save Drafts Save progress without publishing product to site 2 1 2 3 12 1E-COMMERCE APPLICATION: “palette” features PAGE 23 PUBLISH SHOP Social Media Sharing Share to facebook and twitter after publishing sitevalue matrix 4 2 1 2 3 12 3 Publish Shop Publish drafts to community 2 2 2 2 16 1 Feature Matrix Shop Overview Demo shop as a preview before publishing site 1 3 3 2 18 1 Development Front End Feature Description User Value Business LOE Score Phase LOE LOE BROWSE GALLERY Browse Gallery Browse gallery in a grid with pagination 2 1 2 3 12 2 SETUP SHOP Search Search bar for users, calling to tags store owners Edit Profile Allows users to edit profile created for each store concept 2 2 2 2 16 1 2 1 1 1 2 2 Read Comments Read comments other users submitted to each store Input Tags Users type in tags for searching concept 2 1 2 3 12 2 1 1 1 1 1 1 Vote Stores Vote on stores with a “like” button Input Store Name Users type in store name in a form field 2 2 2 2 16 2 2 3 1 1 6 1 Demo Stores Demo shop to get a feel for concept by clicking through Input Category Users type in category in a form field for searching navigation; store will not be able to checkout and buy 1 3 3 2 18 3 3 1 1 1 3 2 Comment on Stores Submit comments on each store concept by clicking on Input Store Concept Users type in store concept in a form field store concept in the gallery 2 2 2 2 16 2 1 1 1 1 1 3 Create Account Create account to comment or start store: user profile Input Email Users type in email address includes email, name, password, and/or store info 1 3 3 2 18 1 3 1 1 1 3 3 Sign In Sign in will be on every page; sign in is not necessary to Input Name Users type in name in form field browse gallery, exceptafor posting comments and voting 2 1 2 3 12 1 1 1 1 1 1 1 CHOOSE TEMPLATE Change Color Change colors of navigation bar and link colors 1 3 3 2 18 3 Choose Template Choose from select templates of shopify stores 1 1 2 2 4 1 Change Background Change background color to light or dark.STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 User Experience Design | Y1439 | X 481.99AF | Instructors: Jaime Levy Russell + Mark Sloan 2 1 2 3 12 1
  24. 24. E-COMMERCE APPLICATION: “palette” Sitemap PAGE 24sitemap LEGEND single page 0.0 page stack HOME first level shop setup wizard 1.0 2.0 1.0.0 1.0.0 BROWSE GALLERY SHOP SETUP GALLERY SHOP 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.2 DETAIL 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 SHOPSTEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 User Experience Design | Y1439 | X 481.99AF | Instructors: Jaime Levy Russell + Mark Sloan
  25. 25. E-COMMERCE APPLICATION: “palette” SITEMAP PAGE 25SCREEN DESCRIPTIONS0.0 HOME 2.1 SHOP INFO DETAILSThe main purpose of the site is to create a shop and browse at The user is presented with a few form fields to get started withother shops created in the community. The user is presented with the setup, filling out basic info: name, email, and concept of thean option to either browse or setup a shop. shop in a few words.1.0 BROWSE SHOPS 2.2 SHOP TEMPLATESThe user will browse through other shops that were created as The user is presented with three templates of shop designs toa source for encouragement, inspiration and market research. choose from. The user will be able to edit the template afterA grid of all shops will be available for the user. Clicking on a choosing one as a base.thumbnail of a shop will bring the user to the detail view.A call to action for creating their own shop will be available 2.3 PRODUCT TEMPLATESin the navigation menu. The user will choose from three products to get started: Men’s T-Shirt, Women’s T-Shirt, and Canvas Bag. After1.1 DETAIL VIEW FOR SHOP choosing a template for the product, the user will designThe user will be able to comment and comment on the shop, the product then publish to the store. The user will only bebased on images and a description. A call to action for going to allowed to edit one product at a time.the shop will be available, as well as a call to action for creating anew shop. 2.4 PUBLISH AND CONFIRM The user will be able to publish the site to the Pallette2.0 SHOP SETUP OVERVIEW Coummunity to get votes and feedback (or the user can save theThe user is presented with an overview of the steps required progress for later).to create a shop, explained with instructional videos. A call toaction button will initiate the “shop setup wizard.”STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 User Experience Design | Y1439 | X 481.99AF | Instructors: Jaime Levy Russell + Mark Sloan
  26. 26. Palette BROWSE GALLERY CREATE SHOP Search GOE-COMMERCE APPLICATION: Products Shop Products Home Shop Details Shop Template Shop “palette” 1.0.0 WIREFRAMES PAGE 26 OVERVIEW SHOP DETAILS SHOP TEMPLATE SHOP PRODUCTS PUBLISH The Other Shop Selected Template: Now, just complate this form and you’re all set with this product! 4 PAGE LAYOUT Log In | Cart (0) 1 Instructions: dolor sit amet, consectetuer adipiscing elit. Aenean Palette commodo ligula eget dolor. Aenean massa. Cum sociis natoque 1st You must log in to submit a design: 2 penatibus et magnis dis parturient montes, nascetur ridiculus mus. 3 HF03v1 Header and Footer details If you have an account, login here. BROWSE GALLERY CREATE SHOP If not, click here to join us then come back! Search GO Username Sign In Now Password Page Layout for All Pages 2nd Give your design a title: Username All pages throughout the site have three components of the site: Header, Main Content, Footer. The main content will change Other Shop Password Title Here Discover and create your shop. The [Product Name] 3rd Upload your design. Required: JPG, GIF or PNG file: Remember me on this computer with each page, but the header and footer remain consistent. header Tag 1, Tag 2, Tagis Sign In Palette 3 a platform for you. Learn more. Header This design file MUST be a 640 pixel wide jpg, gif or png no more than 800 pixels tall and under 250kb. Forgot your: Username? Password? Choose File no file selected Not Yet a Member? 1. Logo- Links user to Home 0.0 on click 2. Global Navigation- “Browse Gallery” takes user to Browse 1.0 FOLD 1000 X 700 PX Create an account for access to the gallery of shops on Palette. 4th About your design and “Create” takes user to shop setup, Shop Overview 2.0. main content Be sure to describe any requirements for specialty inks or print methods. If Browse Gallery of Shops you’re submitting a Loves design, please describe your design’s relation to 3. Search- User will be able to search shops based on tags or the theme. This will appear on your submission page as a description of upienim your design. Equat. Soluptam vellorunt ommolor aximinctae numetum, quibustiist quiandamet etur? Qui deseritio beriore sectur, corem aruptatur? search based on criteria: categories, username, or template Text Here. Qui conse intempor aceped que dendi nima dolorporrum lant. Browse Now 4. Log In and Cart links for purchasing products from stores. Project of the Day How to Video Product Template of the Day Learn more. Learn more. Learn more. Footer © 2012 Palette. All rights reserved. Contact | Terms Conditions | Privacy Statement 5. Copyright info for Palette. footerFOLD 1000 X 700 PX 6. Footer page links- Contact Page, Terms Conditions, and 5th Tag your design (at least 1 tag are required). Privacy Statement are on their own separate pages. Choose from the following tags. It helps people in the community find your store and get feedback! Selected tags: Select Here Cute 6th I agree to the Legal Terms and understand my design can be dropped from scoring early if it gets a low score. Add another product. Currently have [#] *You must add at least one product before products in the store (can edit later). going to the next step. Add Another Next Step 5 5 © 2012 Palette. All rights reserved. Contact | Terms Conditions | Privacy StatementSTEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 User Experience Design | Y1439 | X 481.99AF | Instructors: Jaime Levy Russell + Mark Sloan
  27. 27. E-COMMERCE APPLICATION: “palette” 1.0.0 WIREFRAMES PAGE 27 0.0 HOME Log In | Cart (0) Palette HF03v1 BROWSE GALLERY CREATE SHOP Search GO Landing Page 1 2 Sign In Now Site Purpose Username Landing page for the application that introduces application features to new and frequent users. Other Shop Password Discover and create your shop. The Remember me on this computer Sign In 1. Hero Feature- Carousel is 100% above fold. The content is Palette is a platform for you. Learn more. Forgot your: Username? Password? the onboarding area with a link to “learn more” that takes the Not Yet a Member? user to 2.0 Shop Setup Overview. Create an account for access to the The Carousel includes paging dots to indicate the number of slides the user will view. gallery of shops on Palette. 4 3 Browse Gallery of Shops 2. Sign In / Sign Up- Allows user to sign in or register account. Equat. Soluptam vellorunt ommolor upienim aximinctae numetum, quibustiist quiandamet etur? Forgot Username and Password will take user through modal layer flow for username/password retrieval. Qui deseritio beriore sectur, corem aruptatur? Qui conse intempor aceped que dendi nima dolorporrum lant. Browse Now Project of the Day How to Video Product Template of the Day Create an account link will take user through modal layer flow Learn more. Learn more. Learn more. for creating a new account. © 2012 Palette. All rights reserved. Contact | Terms Conditions | Privacy Statement 3. Feature Banners- Three banners to feature shop of the week, application feature, and new product/shop templatesFOLD 1000 X 700 PX available for the user to use on their shop. 4. Text Link- Allows user to see new feature via text link.STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 User Experience Design | Y1439 | X 481.99AF | Instructors: Jaime Levy Russell + Mark Sloan
  28. 28. E-COMMERCE APPLICATION: “palette” 1.0.0 WIREFRAMES PAGE 28 1.0 browse shops Log In | Cart (0) Palette HF03v1 BROWSE GALLERY CREATE SHOP Search GO Home 1.0 Browse Shops 1Home Gallery Browse Gallery of Shops All Men Women Gifts 3 Sort By: Select Site Purpose 2 Women Animals Tag 1 Relevance The user will browse through other shops that were created as a Other Shop Name source for encouragement, inspiration and market research. Cute 4 The Newest Film Food 1. Sub Nav- Filter items to select tags from drop downs. Funny Typography First level category: all, men, women, gifts Second level category: animals, cute, film, food, funny, 5 typography 2. Tags- After selecting item from Sub Nav, selected tags will Dark Theme Blue Theme Shop Name Shop Name Tag 1, Tag 2, Tag 3 Women, T-Shirts, Cute Tag 1, Tag 2, Tag 3 Tag 1, Tag 2, Tag 3 appear below Sub Nav. 3. Sorting- The drop down includes three options for sorting out content in the gallery: Relevance, Name, Newest. To the right of the drop down, the arrows down/up arranges sorting in descending/ascending order.FOLD 1000 X 700 PX Shop Name Tag 1, Tag 2, Tag 3 Shop Name Tag 1, Tag 2, Tag 3 Shop Name Tag 1, Tag 2, Tag 3 Shop Name Tag 1, Tag 2, Tag 3 4. Shop Thumbnails- Image of shop design. 5. Shop Title/Tags- Shop title and tags for each shop. Clicking the title will bring the user to the shop’s detail page: 1.1 Detail View. The tags are not links. 6. Pagination of Gallery- “Previous” links to the previous page. If the user is at page 1, this link is disabled. The current page number is not a link. If the user is in the last page, “Next” link Shop Name Shop Name Shop Name Shop Name Tag 1, Tag 2, Tag 3 Tag 1, Tag 2, Tag 3 6 Tag 1, Tag 2, Tag 3 Tag 1, Tag 2, Tag 3 is disabled. Only 2 numbers before and after current page will Previous 1 2 3 4 5 Next be displayed. © 2012 Palette. All rights reserved. Contact | Terms Conditions | Privacy StatementSTEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 User Experience Design | Y1439 | X 481.99AF | Instructors: Jaime Levy Russell + Mark Sloan

×