e-commerce ux design concept case study

Download E-Commerce UX design concept case study

Post on 13-Jan-2015




1 download

Embed Size (px)


E-Commerce UX design concept case study for General Assembly UXDI.



2. OVERVIEW About the Project Learnings This case study documents the process I took to research and design a ctional e-commerce store from brief to clickable prototype in a few days. The project enabled me to research and explore best practice for:User Flows & Experience mapping Usability for Mobile web/touch- friendly interfaces I worked as part of a student team but the design deliverables Form designpresented are my own. Lean Checkout process design Team workshop management 3. THE BRIEF About the Product The Target Audience TrueSpirit is a (ctional) new internet retailer for Australian schools and parents who want quality, well-priced school uniform items for K-12 children. We were supplied with three distinct Personas.Business Goals Present uniforms as fashionTrueSpirits vision is to enable customers and their kids to Enable schools to oer must- choose the items they want from have uniform checklists for a selection of school parentsrecommended uniforms. Oer accessories allowed by the schools dress code 4. COMPETITIVE ANALYSIS(SEE APPENDIX) Most retailers in the space have poorly designed websites and many have no online stores at all. No local retailer oer easy mobile device browsing or purchase. The only potential challenger (ClothingDirect.com.au) is not a direct competitor as it oers business as well as school uniforms and so is not focused solely on parents needs. 5. GOALS OF THE DESIGN To present a fresh, modern, mobile- optimised user experience that sets TrueSpirit apart from its competitors and makes life easier for busy parents. 6. USER FLOWS & SCENARIOS 7. SCENARIOS MethodBrainstorming goals and pain points for each Persona John - Returning customerSarah - New customerJess - Corporate customer (school administrator) FindingsThe team prioritised the experience ow and must-have content for each of the three Personas Opportunities identiedNew customer provide an all-in-one Essentials product bundle for each school, so its easy for Sarah to know exactly what she needs to buy Returning customer provide an Express Checkout and clear price comparison so its a quick, ecient experience for John to buy just a few items. Business customer provide a customer Account set-up process for schools to create product bundles so its easy for Jess to provide parents with a one-stop-shop for all their uniform needs 8. USER FLOWS 9. USER FLOWS 10. USER FLOWS 11. PERSONAS ANALYSISJohn Returning Customer, Pragmatic PurchaserSarah Jess First time School Administrator Customer, Savvy SpenderNeeds Value Easy returns Credibility/Trust Checklist of all required uniform itemsFunctionality Comparison pricing Essential uniform Add/Edit school info Discounts bundle for a school and uniform Other parents advice/ requirements testimonialsFeatures Members Account Express check-out Email autoresponder offers 1-click bundle buy iPad optimised Save to Wishlist Email reminders B2B service Quality Range Product bundle order form School collateral upload Catalogue download 12. HOMECHECKOUT PROCESS BUSINESS CUSTOMER ACCOUNT PROCESSSKETCHES 13. PRODUCT PAGE ITERATIONS 14. PRODUCT PAGE WIREFRAME Notes 1.Prominent Shopping Cart tab opens slider showing all items in the Cart without navigating away from 1product page2.3Comparison pricing with retail 3.2Quantity discounts for essential items 4.School logo, name and note on the item. Info links to Schools complete 4product listing and information for 5parents.5.Conversion optimisation elements 15. THE SOLUTION Design a household calendar app that enables Deepa and Sam to co-ordinate tasks easily. QUICK CLICKABLE PROTOTYPE 16. PROTOTYPE V.1 MethodI created a quick clickable prototype using Omnigrae User Journey 1John, as a returning customer, can nd a single item and check-out quickly.ScenariosFinding an individual item Express Checkout User Journey 2Sarah, as a rst-time customer, can nd a selection of items required by her childs school and check-out easily on her iPad.ScenariosFinding a school Essentials uniform product listing New Customer Checkout 17. DESIGN PROTOTYPE 18. PROTOTYPE V2 The second iteration of the product focused on interaction design optimised for mobile web through the express checkout user journey of John, our returning customer: Views Signs up for newsletterBrowse Home screenSelects Product listingProduct pageAdds to cartProceeds to checkoutSigns InExpress checkoutOrder conrmat ionGives True Spirit a great reviewShipping and returns policy 19. USABILITY TESTING 20. USABILITY TESTING Test processWe found 5 participants willing to test our prototype. We gave them all three tasks to perform on our prototype User testing tasks1. You are buying a polo shirt for your daughter. Show me how you would go about it2. You are a new customer. Take me through your checkout process3. You are a returning customer. Take me through your checkout process 21. FINDINGS 4 out of 5 participants used the main menu on the Home page to go to the Product page, rather than the large search eld. 2 out of 5 preferred Guest Checkout even though they were returning customers Change Sign-up to New Customer to avoid confusion with Sign-In Add Back bujon on the cart Checkout could be even quicker for returning customers: Sign-In ! Shipping/Billing (auto-lled) ! Review OrderOr Sign-In ! Review Order (with Shipping/billing auto-lled)Then oer option to Save Details and join as a Member 22. THANKS AMANDA WISE, UX STRATEGY & DESIGN WISEAMANDA.WORDPRESS.COM/JANUARY 2014 23. APPENDIX THE SUPPLIED PERSONAS 24. COMPETITIVE ANALYSIS I compared the top ranking companies (organic) on Google for expected search terms:1. custom school uniforms 2. buy school uniform3. Randwick High school uniform 25. PR1 CUSTOM SCHOOL UNIFORMS Silverfleece.com.au "Search goes to landing page for school uniforms # No link to unform section in online store!!# Hard to read 26. PR2 CUSTOM SCHOOL UNIFORMS GetSmartSchoolwear.com.au "Search optimised "Phone number prominent "Friendly, distinctive brand # No search# PDF Flipbook catalogue 27. PR3 CUSTOM SCHOOL UNIFORMS CustomUniformCo.com.au "Branding distinctive and friendly "Up front pricing "Direct response copy "Repeated calls to action # Home-made design# Headless children & other misleading illustrations 28. PR4 CUSTOM SCHOOL UNIFORMS ClothingDirect.com.au "Clear, benet-focused nav "Why shop with us promo "Delivery/service up front "Live chat "Testimonials "Good photography "Easy to use sizing/ordering chart 29. REFERENCES :MOBILE WEB E-COMMERCE Reference sites include: hjp://built.bymoby.com/ mobile_checkout/ hjp://mobile.fandango.com/movies? &from=home&aid=EMBEDDEDPAGE 0&ITEM_KEY_ID= hjp://m.dillards.com/search hjp://m.crateandbarrel.com/ Asos Net a Porter hjp://vsco.co/