• Save
UX Pitch: Palette
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

UX Pitch: Palette

  • 2,052 views
Uploaded on

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

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

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,052
On Slideshare
2,052
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

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

Transcript

  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  • 29. E-COMMERCE APPLICATION: “palette” 1.0.0 WIREFRAMES PAGE 29 Log In | Cart (0) 1.1 detail view for shop Palette HF03v1 BROWSE GALLERY CREATE SHOP Search GO Home > 1.1 Detail View Browse Gallery of Shops Home > Gallery > [username] shop Site Purpose All Men Women Gifts Sort By: Select The user will be able to vote and view shops made by other users. 1 3 Other Shop Blue Theme The 1. Main Image- Screen shot of shop template with products, by [username] Score this Design! then edited with CSS/HTML by the user. 2. Other Views- Small thumbnail previews of the other views of Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean the shop (Gallery, Product Detail Page, Cart). 4 commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus 3. Shop Name and Username that corresponds to shop created by user. The current rating of the shop is displayed below the 5 title. The description of the shop entered by that user is listed Share with Friends: below that. 4. Scoring Shop- The users of the community votes on the shops in the gallery. Similar to Netflix.com, the user will vote 6 by clicking how many stars the shop deserves (five being the VIEW SHOP most a shop can receive per vote). Inspired? Create your own shop 2FOLD 1000 X 700 PX By default: On Click: Selected: Average of 60,930 ratings: 4.1 stars 5. Social Media Sharing- Users will be able to share to social networks by Facebook Likes, Twitter tweets, Google Plus, and Pinterest Pins. © 2012 Palette. All rights reserved. Contact | Terms & Conditions | Privacy Statement 6. Call to Action Buttons- “View Shop” will take user to the live shop with e-commerce workflows (1.2). The text link “Create your own shop” will take users to Shop Setup Overview (2.0).STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 User Experience Design | Y1439 | X 481.99AF | Instructors: Jaime Levy Russell + Mark Sloan
  • 30. E-COMMERCE APPLICATION: “palette” 1.0.0 WIREFRAMES PAGE 30 1 2 Palette Shop Preview USE THIS THEME Don’t like this theme? You can start from scratch 1.2 BUY FROM SHOP Home > 1.1 Detail View > 1.2 Buy from Shop My Account | Cart (0) 3 Other Shop Other Shop The The New Items Popular Canvas Sort By: Select Search GO Site Purpose Popular Vintage Relevance Name The user is presented with a live shop, allowing users to go Newest through a real, working e-commerce site for purchasing products. The site’s branding is framed with Palette’s branding at the top. 1. Palette Logo- Logo is within frame without obstructing view of selected shop. An indicator to let user know this screen is a California Design [Shirt] Name [Shirt] Name [Shirt] Name shop preview is to the right of the logo. Popular, Vintage, T-Shirt Tag 1, Tag 2, Tag 3 Tag 1, Tag 2, Tag 3 Tag 1, Tag 2, Tag 3 2. Call to Action- Users will be able to use the same theme in view, applying to their own shop by clicking the “Use this Theme” Button. To the right of that, is a text link “start from scratch” to bring the user to Shop Setup Overview 2.0 to start the process. To the right of that, the “Close” Button will close out the “Palette” frame, allowing the user to focus on [Shirt] Name [Shirt] Name [Shirt] Name [Shirt] Name the live shop in view.FOLD 1000 X 700 PX Tag 1, Tag 2, Tag 3 Tag 1, Tag 2, Tag 3 Tag 1, Tag 2, Tag 3 Tag 1, Tag 2, Tag 3 3. [Username] Shop- The embedded shop that corresponds to selected shop from Gallery 1.1. Current photos are placeholders and shops will be uploaded/published by users. [Shirt] Name [Shirt] Name [Shirt] Name [Shirt] Name Tag 1, Tag 2, Tag 3 Tag 1, Tag 2, Tag 3 Tag 1, Tag 2, Tag 3 Tag 1, Tag 2, Tag 3 Previous 1 2 3 4 5 Next © 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
  • 31. E-COMMERCE APPLICATION: “palette” 1.0.0 WIREFRAMES PAGE 31 2.0 shop setup overview Log In | Cart (0) Palette HF03v1 BROWSE GALLERY CREATE SHOP Search GO Home > 2.0 Shop Setup Overview Setup Overview 1 Home Site Purpose OVERVIEW SHOP DETAILS SHOP TEMPLATE SHOP PRODUCTS PUBLISH The user is presented with an overview of the steps required 2 to create a shop, explained with instructional videos. The Other Shop Feature One 4 Now Playing 1. Breadcrumbs- Indicates progress for setting up shop for each user. User will be able to go back a step but not ahead a Feature Two 1:35 step without necessary actions, indicated in each section. 2. Feature Media Hero- Video illustrating the steps necessary to create a shop 3 Feature Three 3. Feature Media Hero Controls- Slider, rewind, play and fast forward controls for the current video playing. The volume 1:35 slider is above that. 5 4. Thumbnail Videos- A list of instructional videos for the user. Benefit 1 Benefit 2 GET STARTED TODAY 6 The title of the video is in bold type. The selected video • • [Article highlight] [Article highlight] • • [Article highlight] [Article highlight] Get started today. Labore volenimi, incimil iquassitam Need help? ? should state “now playing” below the video title. The defaultFOLD 1000 X 700 PX faceris soluptatur? Quiati to quos state for text under video title is the video length. • [Article highlight] • [Article highlight] GET STARTED volut que dolest atio to • [Article highlight] • [Article highlight] 5. Benefits of the Application- Title in bold with text listing © 2012 Palette. All rights reserved. Contact | Terms & Conditions | Privacy Statement some of the benefits of the application below title. 6. Call to Action Button- Button to get the user started in 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
  • 32. E-COMMERCE APPLICATION: “palette” 1.0.0 WIREFRAMES PAGE 32 2.1 SHOP info DETAILS Log In | Cart (0) Palette HF03v1 BROWSE GALLERY CREATE SHOP Search GO Home > 2.0 Shop Setup Overview > 2.1 Details Shop Details Home > Shop Details Site Purpose OVERVIEW SHOP DETAILS SHOP TEMPLATE SHOP PRODUCTS PUBLISH The user is presented with form fields to enter shop information. 1 Other Shop Sign In Now Instructions The 2 3 1. Instructions- Copy will guide the user on setting up the shop. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum Username Store Concept 2. Sign In Module- Sign in using existing username/password. sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Password 3. Store Concept- User will input store concept using a few [headline] Remember me on this computer sentences or less. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede Sign In 4. Tags- User will input tags for searching/filtering in the justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Forgot your: Username? Password? 4 Word count: ## community of other users. [headline] Tags (Separate by a comma) 5. New Users- User will have the option to sign up for a new account, pop up module will allow user to input information. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. 5 Not Yet a Member? 6. Next Step Button- Call to action that will bring user to the Create an account to get started. next step in the process. 6 *You must login or sign up for an account to move on to the next step.FOLD 1000 X 700 PX Next Step © 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
  • 33. E-COMMERCE APPLICATION: “palette” 1.0.0 WIREFRAMES PAGE 33 Log In | Cart (0) 2.2 SHOP templates Palette HF03v1 BROWSE GALLERY CREATE SHOP Search GO Home > 2.0 Shop Setup > 2.2 Templates Shop Template Home > Shop Details > Shop Template Site Purpose 1 OVERVIEW SHOP DETAILS SHOP TEMPLATE SHOP PRODUCTS PUBLISH The user is presented with a gallery of shop templates for the user to choose from. The Other Shop Instructions 1. Instructions- Instructs the user how to proceed. 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 mus. 2 3 2. Selected Template- Indicator on selected template. (Necessary to proceed to the next step). 4 3. Unselcted Template- Indicator of what templates have not Quick Look been selected should be obvious for the user to move to the next step. 5 4. Quick Look- Presented when user rolls over thumbnail Responsive Theme Blue Theme Dark Theme Light Theme image. Allows user to quickly browse through pictures of the Tag 1, Tag 2, Tag 3 Tag 1, Tag 2, Tag 3 Tag 1, Tag 2, Tag 3 6 Tag 1, Tag 2, Tag 3 template and other information: 2.2.1 Shop Template Detail *You must selct a template before moving to 5. Template Name and Tags- Template name provided by the next step. the site and tags pertaining to the style will help user find template in a search.FOLD 1000 X 700 PX Next Step © 2012 Palette. All rights reserved. Contact | Terms & Conditions | Privacy Statement 6. Next Step Button- Call to action that will bring user to the next step in the process.STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 User Experience Design | Y1439 | X 481.99AF | Instructors: Jaime Levy Russell + Mark Sloan
  • 34. E-COMMERCE APPLICATION: “palette” 1.0.0 WIREFRAMES PAGE 34 Log In | Cart (0) 2.2.1 SHOP template detail Palette HF03v1 BROWSE GALLERY CREATE SHOP Search GO Home > 2.0 Shop Setup > 2.2.1 Template Detail Shop Template Home > Shop Details > Shop Template > [Template Name] Details Site Purpose OVERVIEW SHOP DETAILS SHOP TEMPLATE SHOP PRODUCTS PUBLISH A quick view of the template is presented when the user clicks “quick look” on the thumbnail, from the previous page (2.2). The Other Shop Instructions 1. Main Image- Screenshot of the template, showing the style 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 mus. 1 3 of the template in current selection. Blue Theme Tag 1, Tag 2, Tag 3 2. Other Views- Small thumbnail previews of the other views of Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean the shop (i.e. Product Detail Page, Cart, etc.). Quick Look massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec 3. Template Name and Tags corresponding to shop template. quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec 4. Template Highlights- Bullet points of the templates main features and advantages over other templates. pede justo, fringilla vel, aliquet nec, vulputate eget. 4 [Template Name] [Template Name] [Template Name] Template Highlights [Template Name] 5. Use Template Button- User will be able to select template Tag 1, Tag 2, Tag 3 Tag 1, Tag 2, Tag 3 Tag 1, Tag 2, Tag 3 • • Tag 1, Tag 2, Tag 3 [Template highlight] [Template highlight] after viewing features and pictures, moving on to the next • • [Template highlight] [Template highlight] must selct a template before moving to *You step of the wizard, “shop products 2.3” 5 the next step.FOLD 1000 X 700 PX USE TEMPLATE Next Step © 2012 Palette. All rights reserved. Contact | Terms & Conditions | Privacy Statement 2STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 User Experience Design | Y1439 | X 481.99AF | Instructors: Jaime Levy Russell + Mark Sloan
  • 35. E-COMMERCE APPLICATION: “palette” 1.0.0 WIREFRAMES PAGE 35 Log In | Cart (0) 2.3 product templates Palette HF03v1 BROWSE GALLERY CREATE SHOP Search GO Home > 2.0 Shop Setup Overview > 2.3 Products Shop Products Home > Shop Details > Shop Template > Shop Products Site Purpose 1 OVERVIEW SHOP DETAILS SHOP TEMPLATE SHOP PRODUCTS PUBLISH Referring to the same visual cues from the shop template gallery 2.2, the user is presented with a gallery of product templates for The Other Shop the user to choose. Instructions 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 mus. 2 3 1. Instructions- Instructs the user how to proceed. 2. Selected Template- Indicator on selected template. 4 (Necessary to proceed to the next step). Quick Look 3. Unselcted Template- Indicator of what templates have not been selected should be obvious for the user to move to the 5 next step. [Product Name] [Product Name] [Product Name] [Product Name] 4. Quick Look- Presented when user rolls over thumbnail Tag 1, Tag 2, Tag 3 Tag 1, Tag 2, Tag 3 Tag 1, Tag 2, Tag 3 6 Tag 1, Tag 2, Tag 3 image. Allows user to quickly browse through pictures of the *You must selct a product before moving to template and other information. the next step. 5. Template Name and Tags- Template name provided by the site and tags pertaining to the style will help user findFOLD 1000 X 700 PX Next Step © 2012 Palette. All rights reserved. Contact | Terms & Conditions | Privacy Statement template in a search. 6. Next Step Button- Call to action that will bring user to the next step in the process.STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 User Experience Design | Y1439 | X 481.99AF | Instructors: Jaime Levy Russell + Mark Sloan
  • 36. E-COMMERCE APPLICATION: “palette” 1.0.0 WIREFRAMES PAGE 36 2.3.1 product template design Log In | Cart (0) Palette HF03v1 BROWSE GALLERY CREATE SHOP Search GO Home > 2.0 Overview > 2.3 Products > 2.3.1 Design Shop Products Home > Shop Details > Shop Template > Shop Products Site Purpose OVERVIEW SHOP DETAILS SHOP TEMPLATE SHOP PRODUCTS PUBLISH When the user has selected the product template for their shop, 1 2 the Product Template Design screen will appear. This allows users The Other Shop to upload their design and add info to the selected product. Selected Template: Now, just complate this form and you’re all set with this product! Instructions: dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque 1st You must log in to submit a design: penatibus et magnis dis parturient montes, nascetur ridiculus mus. If you have an account, login here. If not, click here to join us then come back! 1. Instructions- Instructs the user with a brief summary. 2. The process of adding the design to the product is in the following steps: Username 1st Step) Login Password 2nd Give your design a title: 2nd Step) Title of the design Title Here 3rd Step) Upload of design. Specs stated above upload [Product Name] 3rd Upload your design. Required: JPG, GIF or PNG file: button: must be jpg, gif, or png. Tag 1, Tag 2, Tag 3 This design file MUST be a 640 pixel wide jpg, gif or png no more than 800 4th Step) “About your design” is a brief description that will be shown on product detail page. pixels tall and under 250kb. Choose File no file selected Continued on next page...FOLD 1000 X 700 PX 4th About your design Be sure to describe any requirements for specialty inks or print methods. If you’re submitting a Loves design, please describe your design’s relation to the theme. This will appear on your submission page as a description of your design. Text Here. 5th Tag your design (at least 1 tag are required). Choose from the following tags. It helps people in the community find your store and get feedback! Selected tags: Select Here CuteSTEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 User Experience Design | Y1439 | X 481.99AF | Instructors: Jaime Levy Russell + Mark Sloan
  • 37. Palette BROWSE GALLERY CREATE SHOP Search GOE-COMMERCE >APPLICATION:Products Shop Products Home > Shop Details Shop Template > Shop “palette” 1.0.0 WIREFRAMES PAGE 37 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! Instructions: dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 1st You must log in to submit a design: 2.3.1 product template design (cont.) Home > 2.0 Overview > 2.3 Products > 2.3.1 Design If you have an account, login here. If not, click here to join us then come back! Username Password (Continued from previous page) 2nd Give your design a title: Title Here 2. 5th Step) Tag your design- Tagging is curated by site. A selection of tags to choose from is shown with a drop down. [Product Name] Tag 1, Tag 2, Tag 3 3rd Upload your design. Required: JPG, GIF or PNG file: The minimum is one tag. This design file MUST be a 640 pixel wide jpg, gif or png no more than 800 pixels tall and under 250kb. Choose File no file selectedFOLD 1000 X 700 PX 4th About your design Men Be sure to describe any requirements for specialty inks or print methods. If Women you’re submitting a Loves design, please describe your design’s relation to the theme. This will appear on your submission page as a description of Gifts your design. Animals Text Here. Cute Film Food Funny 5th Tag your design (at least 1 tag are required). Typography Choose from the following tags. It helps people in the community find your store and get feedback! 6th Step) Agree to terms with checkbox. Selected tags: 6. Add Another & Next Step buttons- “Add Another” takes the 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. user back to 2.3 Products to select a template and submits Add another product. Currently have [#] *You must add at least one product before current info. “Next Step” brings user to the final step of the 6 products in the store (can edit later). going to the next step. wizard, Publish and Confirm 2.4. Add Another Next Step © 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
  • 38. E-COMMERCE APPLICATION: “palette” 1.0.0 WIREFRAMES PAGE 38 2.4 publish and confirm Log In | Cart (0) Palette HF03v1 BROWSE GALLERY CREATE SHOP Search GO Home > 2.0 Shop Setup Overview > 2.4 Publish Publish and Confirm Home > Shop Details > Shop Template > Shop Products > Publish Site Purpose 1 OVERVIEW SHOP DETAILS SHOP TEMPLATE 3 SHOP PRODUCTS PUBLISH The user is presented with an overview of the created shop, allowing the user with saving or publishing the shop. Other Shop [Your Username]’s Shop The Tag 1, Tag 2, Tag 3 1. Main Image- Screen shot of shop template with products 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 mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, selected by the user. fringilla vel, aliquet nec, vulputate eget, arcu. 2. Other Views- Small thumbnail previews of the other views of 4 Template Highlights the shop (i.e. Product Detail Page, Cart, etc.). • • [Template highlight] [Template highlight] 3. Username’s Store Name and Tags (info from Shop Info • • [Template highlight] [Template highlight] Details 2.1). 5 Description- Small description entered by user (from Shop SAVE FOR LATER PUBLISH Info Details 2.1). 4. Template Features- Features template will have (info pulled from Product Templates 2.3). 2 5. Save & Publish Buttons- “Save” button to save project forFOLD 1000 X 700 PX later and “Publish” button to publish shop to community. © 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
  • 39. E-COMMERCE APPLICATION: “palette” CHAPTER TITLE PAGE 39E-commerce application: “Palette”HEADLINE 1STEPHEN BARROS | email@stephenbarros.com | UCLA Extension | Spring 2012 User Experience Design | Y1439 | X 481.99AF | Instructors: Jaime Levy Russell + Mark Sloan