Truespirit E-commerce - Design Spec

  • 203 views
Uploaded on

 

More in: Lifestyle , Business
  • 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
203
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
3
Comments
0
Likes
1

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. Design Specifications Prepared for: True Spirit By: Deepa Dhupelia, James Feng, Sara Michelazzo Last update: Jan 25, 2014 Student Project. General Assembly UXDI Summer 2014
  • 2. Site Map 0.0 Home User flow: Sarah 1.0 Account 1.1 Log in 1.2 Register 2.0 Boys 1.3 Profile 2.1.1 Formal shirts 2.1.2 T-shirts 2.1.3 Polo shirts 2.1.4 Tank tops 2.1.5 Logo shirts 2.1.6 Jackets 2.1.7 Hoodies 2.2 Bottom 2.3 Accessories 2.2.1 Pants 2.2.2 Shorts 2.2.3 Gymshorts 3.2 Bottom 2.4 Sales 3.3 Accessories 3.2.1 Pants 3.3.1 Socks 3.1.2 T-shirts 3.2.2 Shorts 3.3.2 Gloves 3.1.3 Polo shirts 3.2.3 Gymshorts 2.3.1 Socks 2.3.2 Gloves 2.3.3 Belts 2.3.4 iPhone case 2.3.5 Plush toy 3.4 Sales 3.1.1 Formal shirts 6.0 Terms & Conditon 7.0 Quality Statement 8.0 Privacy 9.0 Shipping & Return 3.3.3 Belts 10.0 About us 3.1.4 Tank tops 3.1.5 Logo shirts 3.1.6 Jackets 3.1.7 Hoodies 3.1.8 Sweaters 2.1.8 Sweaters 5.0 Saved list 4.1 Shipping info, card info & Check out 3.1 Top 2.1 Top 4.0 Shopping bag 3.0 Girls 3.2.4 Skirts 3.3.4 Leggings 3.3.5 iPhone case 3.3.6 Plush toy 10.1 Company Intro 10.2 Scholarship program
  • 3. Navigation Schema - Header User flow: Sarah 1 2 3 4 5 GIRLS BOYS SHOP BY SCHOOL SIGN IN REGISTER BOYS SHOP BY SCHOOL SIGN IN REGISTER Global navigation 1 GIRLS TOPS Girls > T-shitst and tops > polo shirt BOTTOMS ACCESSORIES Formal shirts Jackets Skirts Socks iPhone case T-shirts Hoodies Pants Headbands Plush toy Polo shirts Sweaters Shorts Gloves Tank top Logo Hoodies Gymshorts Belts SALES > Logo shirts Leggings Contextual navigation USER TEST user test line-heigh
  • 4. Navigation Schema - Header 2 User flow: Sarah 1 2 3 4 5 GIRLS BOYS SHOP BY SCHOOL SIGN IN REGISTER SHOP BY SCHOOL SIGN IN REGISTER Global navigation 2 GIRLS TOPS Girls > T-shitst and tops > polo shirt BOYS BOTTOMS ACCESSORIES Formal shirts Jackets Pants Socks iPhone case T-shirts Hoodies Shorts Headbands Plush toy Polo shirts Sweaters Gymshorts Gloves Tank top Logo Hoodies Logo shirts Belts SALES > Contextual navigation USER TEST user test line-height
  • 5. Navigation Schema - Header 3 User flow: Sarah 3 GIRLS BOYS 4 SHOP BY SCHOOL SIGN IN REGISTER Global navigation 3 GIRLS BOYS SHOP BY SCHOOL SIGN IN REGISTER Select School Girls > T-shitst and tops > polo shirt St. Luke’s ▼ GO 4 GIRLS Girls > T-shitst and tops > polo shirt Search BOYS SHOP BY SCHOOL SIGN IN REGISTER GO Site search
  • 6. 5 Navigation Schema - Header 4 User flow: Sarah 5 GIRLS BOYS SHOP BY SCHOOL Global navigation SIGN IN REGISTER 5 GIRLS BOYS SHOP BY SCHOOL SIGN IN REGISTER 2 ITEMS ADDED TO BAG NOTE ON BEHAVIOUR: the quick bag opens every time something a new item is added. From the menu if you click on the bad this menu will open. If you click on sign in/ register you will be send to the sign in /register page when you can fill your information. When you are logged in you will read there Hi your name and clicking on it will open your profile page Polo shirt $15 Pants $12 SUBTOTAL $37 GO TO BAG SAVED ITEMS Shopping Bag
  • 7. Navigation Schema - Footer & Breadcrumbs User flow: Sarah CONTEXTUAL BREADCRUMBS Home> Girls > Tops > Polo Shirt FOOTER SERVICES ABOUT US FOR SCHOOLS GET HELP Shipping & tracking Company info Admin area Feeling stuck? Sizes & Conversions Our Quality Find your school +61 5647 474637 Easy returns Jobs How to wash Scholarships Contact us Term of use | Privacy and Cookies Copyright 2014 help@truespirit.com.au
  • 8. Navigation Schema - Filter User flow: Sarah FILTER FILTER FILTER COLOR SIZE SORT BY: XS S M L lowest price on top XL ▼
  • 9. User flow: Sarah Provided suites Go through them & Choose one Home Page Provided suites or Build Own? Jess YES Interested? Build own Choose School Entrance Choose Boys/Girls NO Product Page Note This is the product set page,which includes a list of products recommended by TrueSpirit Choose Subcategory NO YES Has Account? Filter by school dress code Like none Like all, Like some, or like none? Like some Like all Results page Add preferred items to cart Add all items to “Saved Items” YES Stay Logged in? NO Go through them & Choose one NO YES This is a single product page Want to log in? NO Note Product Page Back to Provided suites page or Build own? Provided suites Build own Log in Like it? YES Add item to “Saved Items” Note Finish Browsing NO Once Logged in: Jess can access all previous records of her preference. She can resend the same required products list to parents or edit some preference and send it. K kindergarden 1-6 primary 7-10 high school 11-12 senior YES Group items for grade selecting must have or recommended Note Information needed: school name. school address. school contact. Jess’s contact Preview Page? Saved Items Page Set up school profile & Account Note Note Generate product & url Email url to parents
  • 10. User flow: Sarah Click url Landing page When Sarah refer back to the saved items later Choose Year and Gender Sarah * default preview on list view Results page No Saved list page te List all predefined products(chosen by admin ). Provides must-have and recommended items. Go through & choose one Note Remove from saved list Go through & choose one NO NO Like it? YES YES Like it? When finish shopping Add to cart NO Buy it now? YES Check out Add to cart Save it later Want to know more Check out process flow Product page NO Save it later NO Buy it ? Add to cart YES Like it? YES Sarah can inspect the product page for detail info
  • 11. User Flow: Checkout NO Check out Check out as a guest Has Account? 2 John & Jess Shipping info page(blank page) YES 1 YES Stay logged in? Pay NO 3 YES Want to register? NO Log in Confirmation Email Sent receive order confirmation email Shipping info page(autofilled) Check point & Pay receive order confirmation email 1 Once Logged in: 1.All shipping info sections rare autofilled by recorded info. 2.John& Jess canard new address, choose shipping address for current purchasing session if multiple addresses are recorded. 3. Edit saved items ( delete, change quantity) 4. Enter/Edit credit card info. 5.Verify the recorded profile. 2 Info needed: Name. Contact. Shipping & billing address. Credit Card info, mail. John & jess can edit added items(delete, change quantity) 3 Provide John & Jess with easy register method e.g. : check box with text: “I want to register a membership”. Once the box ticked, the profile is saved to DB
  • 12. 1.0 HOMEPAGE WHAT PROBLEM IS BEING SOLVED WITH EACH ELEMENT? GIRLS 1 2 3 5 FREE DELIVERY Free delivery erases a barrier for buying online: cost of shipping. This is good for frugal users like John, and those who shop online for convenience like Sarah. Enjoy school and express your style 1 EASY RETURNS Having an easy return option helps alleviate concerns for users such as John and Sarah. We’ve highlighted this point for error recovery - shoppers have an easy way to correct a mistake purchase. REVIEWS Rather than just making statements about our product quality and level of service, we have provided reviews from current customers, to reinforce these points and reassure new customers like Sarah and John. FREE DELIVERY FOR PURCHASES OVER $50 4 SALES We’ve made it easy for frugal shoppers like John to access sales items. This also helps the business to deal with remaining stock from past seasons. FEATURED ITEMS We’ve provided a snapshot of some of our current products, so that shoppers can get an idea of average prices, and have a quick entry point if they are just browsing. This also makes it easy for frugal shoppers to compare sales prices with regular item prices. EASY RETURNS. All you need is the included delivery stickers! Attach these and drop off at the post office. 3 CHECK OUT OUR SALES “I can’t believe my kid’s t-shirts look brand new after more than 40 washes” IMAGE 5 IMAGE Sarah Jackson Customer, and mother of 3. HOW TO WASH 6 SIGN IN REGISTER CAROUSEL The carousel provides users with information about the brand: The messaging is modern and fresh. Images and text are used to convey the “why, how and what” for the company. 2 4 SHOP BY SCHOOL BOYS Polo shirt $ 30 Polo shirt $ 30 FEATURED ITEMS 6 IMAGE Polo shirt IMAGE $ 30 Polo shirt IMAGE $ 30 Polo shirt IMAGE $ 30 Polo shirt $ 30
  • 13. CATEGORY PAGE - QUICK BUY VIEW GIRLS WHAT PROBLEM IS BEING SOLVED WITH EACH ELEMENT? 1 1 SHOP BY SCHOOL BOYS Polo t-shirt $ 30 BREADCRUMBS Breadcrumbs assist with user orientation, and give the structure of the site. For users, we are teaching them the hierarchy of the site, so that they learn navigation. Users also know where they are at a glance, and how to go back. Size Size Help L M 3 XL ADD TO BASKET Machine wash cold, gentle cycle Polo t-shirt $ 30 SAVE ITEM Color 4 FILTER Helps efficiency of online shopping, for those who have little time to shop (eg. Sarah in her lunch breaks. Size Size Help Quantity XS S M L SAVED ITEMS Quick way to build favourites lists - for users like Sarah who like to save to purchase later. Also users like Jess: to help her build lists of recommendations for parents. Machine wash cold, gentle cycle Polo t-shirt $ 30 CLICK TO ZOOM XL 1 100% cotton. CLICK TO ZOOM 6 S 100% cotton. SIZE HELP Standard measurements for our product line: for customers like John and Sarah who want to make sure they buy the right thing. 5 SAVE ITEM 1 Quantity QUALITY INFORMATION In line with TrueSpirit’s promise: We only sell quality products, we have included information about garment materials, wash and care instructions, and a zoom function to focus on the fabric. Also for customers like Sarah, who want to be educated about care and comfort of the garments. 4 XS 5 6 Color CLICK TO ZOOM 3 FILTER 2 Home > Girls > Tops > Polo Shirt ALTERNATIVE VIEWS This is the list view of our products, which allows easy scroll and quick 1-click selection straight to shopping bag. This is for our experienced users and regular visitors to the site, those that are more tech savvy like Jess, and process efficient like John. 2 SIGN IN REGISTER Color 100% cotton. Machine Size wash cold, gentle cycle L XS S M ADD TO BASKET SAVE ITEM
  • 14. CATEGORY PAGE - QUICK VIEW GIRLS WHAT PROBLEM IS BEING SOLVED WITH EACH ELEMENT? 1 SHOP BY SCHOOL BOYS SIGN IN REGISTER FILTER 1 Home > Girls > Tops > Polo Shirt ALTERNATIVE VIEWS This is the list view of our products, which allows easy scroll and allow users to see many items at a time IMAGE Polo shirt IMAGE $ 30 Polo shirt IMAGE Polo shirt $ 30 Polo shirt $ 30 Polo shirt $ 30 $ 30 Polo shirt $ 30 Polo shirt Polo shirt $ 30 Polo shirt $ 30 Polo shirt Polo shirt 100% cotton. $ 30 IMAGE $ 30 Polo shirt IMAGE $ 30 $ 30 IMAGE IMAGE IMAGE CLICK TO ZOOM Polo shirt IMAGE IMAGE IMAGE IMAGE Polo shirt $ 30 IMAGE IMAGE Polo shirt IMAGE $ 30 IMAGE $ 30 Polo shirt Machine wash cold, gentle cycle $ 30
  • 15. PRODUCT PAGE WHAT PROBLEM IS BEING SOLVED WITH EACH ELEMENT? GIRLS 1 2 3 4 NAVIGATION To enable users to go back to results, you don’t loose the results of the previous searches or filters. BOYS SIGN IN REGISTER FILTER Home > Girls > Tops > Polo Shirt 1 NEXT > < BACK TO RESULTS LARGE IMAGES AND MULTIPLE VIEWS Take a close look at our product - what you see is what you get in our large images with views of all angles. Users like Jess want clear information about our offering. Polo t-shirt $ 30 SAVE ITEM Color DETAILED DESCRIPTION Provides information about the make up, care, comfort and fit. So that we can educate our users like Sarah, and inform school administrators like Jess. COMPLETE THE UNIFORM (ALTERNATIVE NAVIGATION) Users who select a product from this product page, can easily see the matching uniform items. This provides a quick and easy way to purchase an entire uniform. (For users like Sarah who want to make sure they have the right products, and John who looks for efficiency). SHOP BY SCHOOL Size Size Help XS Quantity S M L XL 1 100% cotton. ADD TO BASKET Machine wash cold, gentle cycle CLICK TO ZOOM 2 You'll get year-round use out of this light-as-air top. Made from smooth micro fiber enhanced with quick-dry and odor neutralizing properties, it can be worn as an inner layer or as a top. COMPLETE UNIFORM 4 IMAGE Polo shirt IMAGE $ 30 Polo shirt IMAGE $ 30 Polo shirt IMAGE $ 30 Polo shirt $ 30 3
  • 16. SCHOOL LANDING PAGE GIRLS 2 VIEW BY YEAR Quick and easy image view of the school’s entire range of uniforms by grade. Users know whats coming for future years of their children at St Luke’s School. SHOP BY SCHOOL SIGN IN / REGISTER St. Luke’s School WHAT PROBLEM IS BEING SOLVED WITH EACH ELEMENT? 1 BOYS Kindergarden Boys Kindergarten Girls 1 IMAGE IMAGE VIEW VIEW FREE DELIVERY AND EASY RETURNS Information on these offers for this view as well (as Sarah may not go through the home page if she goes straight to the landing page). 1-6 Primary Girls IMAGE 1-6 Primary Boys IMAGE VIEW VIEW 7-10 High School Girls 7-10 High School Boys IMAGE IMAGE VIEW VIEW 11-12 Senior Girls 11-12 Senior Boys IMAGE IMAGE VIEW 2 FREE DELIVERY FOR PURCHASES OVER 50$ VIEW EASY RETURNS All you need is already in the box, attach the new delivery stickers at the box and call the number to organize the pick up
  • 17. HOME CATEGORY PAGE GIRLS WHAT PROBLEM IS BEING SOLVED WITH EACH ELEMENT? SHOP BY SCHOOL BOYS SIGN IN REGISTER Home > St Luke’s School > 7-10 High School Boys SCHOOL PAGE - BY YEAR Shows compulsory and recommended items. Shows an image of the complete summer and winter uniforms, so that parents know what pieces to buy, and what the complete outfit should look like. Compulsory items SHOPPING LIST IMAGE IMAGE IMAGE COMPLETE SUMMER OUTFIT COMPLETE WINTER OUTFIT COMPLETE GYM OUTFIT SHOPPING LIST Recommended Accessories IMAGE Backpack IMAGE $ 50 Gloves IMAGE $ 15 Belt IMAGE $ 20 iPhone Case $ 30
  • 18. CATEGORY PAGE - QUICK BUY VIEW WHAT PROBLEM IS BEING SOLVED WITH EACH ELEMENT? SCHOOL - RELATED COMPULSORY SHOPPING LIST GIRLS BOYS SHOP BY SCHOOL SIGN IN REGISTER FILTER Home > St. Lukes’s School > 11-14 Senior Boys > Compulsory items A shopping list of the minimum required (compulsory) items. This is for Jess to make it easy for parents like John and Sarah to find the right items, quickly. John and Sarah feel assured that they are buying the right items for their kids. Polo t-shirt $ 30 SAVE ITEM Color Size XS Size Help S M L 1 Quantity ADD TO BASKET 100% cotton. CLICK TO ZOOM XL Machine wash cold, gentle cycle Polo t-shirt $ 30 SAVE ITEM Color Size Size Help Quantity XS S M L 1 100% cotton. CLICK TO ZOOM Machine wash cold, gentle cycle Polo t-shirt $ 30 CLICK TO ZOOM XL Color 100% cotton. Machine Size wash cold, gentle cycle L XS S M ADD TO BASKET SAVE ITEM
  • 19. SHOPPING BAG GIRLS WHAT PROBLEM IS BEING SOLVED WITH EACH ELEMENT? 1 Shopping Bag ITEM IMAGE 1 SHOP BY SCHOOL BOYS COLOR SIZE 3 2 Done Payment QUANTITY PRICE REMOVE $15 X PROGRESS INDICATOR To show users where they are and how many steps are involved in checkout process. M 2 SIGN IN REGISTER COUNTDOWN TO FREE DELIVERY Everyone is concerned about fair prices, we have provided a transparent way to see how close you are to a free delivery. 1 Polo T-shirt Edit EASY RETURNS REMINDER At checkout, we give users a reminder that they can always return if the item doesn’t fit. Important for online shopping and giving our users comfort. M 1 $15 Pants Edit SUBTOTAL 2 $30 Spend another $20 to qualify for FREE DELIVERY Shipping Costs 3-5 days 3 $6 Shipping Costs overnight delivert CONTINUE SHOPPING X $15 We all know our kids grow fast! Never fear - We have an easy return policy (read more) TOTAL $36 PROCEED CHECK OUT
  • 20. SHOPPING BAG GIRLS SHOP BY SCHOOL BOYS Shopping Bag SIGN IN REGISTER Done Payment DETAIL WHAT PROBLEM IS BEING SOLVED WITH EACH ELEMENT? Name 1 ERROR MESSAGE To help users recognise and recover from error. Validates the input at the same time the user completes the fields. Surname 1 Email Email required Phone Shipping address Is the billing address different from the shipping address? PAYMENT We support Amex, Visa and Mastercard Name Card Number Expiry / CVC Pay with PayPal BACK TO BAG CONFIRM 2
  • 21. SHOPPING BAG WHAT PROBLEM IS BEING SOLVED WITH EACH ELEMENT? PROFILE SAVE Users can save their details for next time, so they have a record of purchases and a quick way to re-order. GIRLS BOYS SHOP BY SCHOOL SIGN IN REGISTER Congratulations! You’ll receive your order shortly. Would you like to keep all of your entered details on file for next time? We’ll send you an email to check which details you’d like to keep on file. YES, SAVE FOR NEXT TIME
  • 22. SIGN IN GIRLS BOYS SHOP BY SHOOL Welcome to TrueSpirit Email This is your registered email Password Forget Password? Cancel Login Don’t have an account, register one SIGN IN REGISTER
  • 23. Register GIRLS BOYS SIGN IN REGISTER SHOP BY SHOOL Welcome to TrueSpirit For helping you better, we need you to set up your profile as following 1 Validating Formate, Uniqueness while users are typing Validating Required Fields after users press the register button Name: 1 Email: Password: Password Confirmation: Address (optional) Better to fill in your normal shipping address, which can make your purchase much quicker Unit: Street: State Suburb: Postcode: Cancel Register
  • 24. John’s profile page GIRLS BOYS Your Profile Hi, John Edit Account Info Name: John Smith Email: John@sample.com Password: SHOP BY SCHOOL ************ Shipping Address 1000/2B Dawn Ave, Waveton, NSW, 2069 + Add New Shipping Address
  • 25. John’s profile page -Editing Page GIRLS BOYS SHOP BY SCHOOL Cancel Your Profile Account Info Name: John Smith Email: John@sample.com Password: ************ Password Confirmation: ************ Shipping Address Unit: Street: Suburb: Postcode: Hi, John 100 2B, Dawn Street Waveton 2070 State NSW Save
  • 26. John’s profile page -Add New Address GIRLS SHOP BY SCHOOL BOYS Your Profile Edit Account Info Name: John Smith Email: John@sample.com Password: ************ Shipping Address 1000/2B Dawn Ave, Waveton, NSW, 2069 New Shipping Address: Unit: Street: Suburb: State Postcode: Cancel Hi, John Save
  • 27. John’s profile page GIRLS BOYS Your Profile Hi, John Edit Account Info Name: John Smith Email: John@sample.com Password: SHOP BY SCHOOL ************ Shipping Address 1000/2B Dawn Ave, Waveton, NSW, 2069 101/2 Smith Ave, St Leonards, NSW, 2069 + Add New Shipping Address
  • 28. Admin Page GIRLS WHAT PROBLEM IS BEING SOLVED WITH EACH ELEMENT? BOYS SHOP BY SCHOOL Home > Saved Items Saved Items 1 2 3 PROGRESS INDICATOR To show users where they are and how many steps are involved in checkout process. COUNTDOWN TO FREE DELIVERY Everyone is concerned about fair prices, we have provided a transparent way to see how close you are to a free delivery. EASY RETURNS REMINDER At checkout, we give users a reminder that they can always return if the item doesn’t fit. Important for online shopping and giving our users comfort. SIGN IN REGISTER Select All Group By Grade Product Title Color Ungrouped Clothes(6) Accessaries(0) Polo Shirt Pant Short Polo Shirt Pant Short
  • 29. GIRLS BOYS SCHOOLS SIGN IN REGISTER Home > Saved Items Saved Items Group By Grade Ungrouped Items (3) Select All 1-7 Grade (3) Name Shirt new group Polo your eg:1-7 Grade Pant Cancel Short Polo Shirt Pant Short Save
  • 30. GIRLS BOYS SCHOOLS SIGN IN REGISTER Home > Saved Items Saved Items Group By Grade Ungrouped Clothes (6) Select All Accessaries(3) 1-7 Grade(3) Polo Shirt Pant Short Polo Shirt Pant Short
  • 31. PURCHASE HISTORY GIRLS BOYS Hi, John SCHOOLS Home > Purchase History Purchase History Select All Order Again Product Title Color Size Qty. Polo Shirt 8 1 Pant 8 1 Short 8 1 Skirt 8 1