Your SlideShare is downloading. ×
E-commerce Mobile Web Application
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

E-commerce Mobile Web Application


Published on

Student Project 2 …

Student Project 2
UXDI, 2014 @ General

Published in: Design, Business, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 2. ABOUT THE PRODUCT TrueSpirit is a new internet retailer for schools and parents who want a modern school uniform for K-12 children. It offers updated uniform fashion including pants for girls and zip-up hoodies, provides a “must-haves” checklist from the school’s administrator for each school year, and recommends accessories allowed by the school’s dress code. Unlike traditional suppliers, True Spirit encourages visitors to express their tastes—with some limits. Monday, 27 January 14
  • 3. PROJECT BRIEF - Design a mobile website optimised for iPad, for True Spirit’s online store - Produce a clickable prototype in Omnigraffle that demonstrates the key user’s journey from initial entry to the site and a checkout process - Document high-level research and findings, design spec and interaction for key screens Monday, 27 January 14
  • 4. PERSONAS MARKET RESEARCH Monday, 27 January 14
  • 5. RESEARCH Method 1- Persona We studied the needs and goals of 3 personas Sarah- a busy mum who is new to uniforms John- a single dad with a high-school age daughter Jess- school admin tasked with finding online uniform retailers for parents Monday, 27 January 14
  • 6. Method 2- Competitive analysis To understand the process involved in online shopping, I studied many e-commerce sites- Net-a-porter, Boyausaur, ebay to name a few and a few online uniform sites like Lands end, Made for school. This exercise was also detrimental in understanding the UI patterns of an e-commerce website Method 3 - Research best practice e-comm for web and touch To understand the considerations of touch interface and how it differs from website Monday, 27 January 14
  • 7. Method 4- Card Sorting Card Sorting helped us to get an idea of the IA for our website Method 5- Site maps Once the IA for our site was in place, we made a site map. This determined where our elements would live Monday, 27 January 14
  • 8. Views Signs up for newsletter Browse Home screen Selects Product listing Product page Adds to cart Proceeds to checkout Signs In Express checkout Order confirmation Gives True Spirit a great review Shipping and returns policy Method 6- User Flows JOHN John being an experienced online shopper felt like a Returning Customer Monday, 27 January 14
  • 9. User Flow for SARAH Sarah felt like a New Customer Based on this study of our personas, we were able to sketch out their journey through our website, from entry to checkout Sarah User Flow: New Customer Sarah- New customer Wishlist Billing and shipping Site link provided by school admin School essentials Product listing Product page Browse Adds to cart A busy mother who is new to private schools and their uniforms. She likes to save items while shopping and buy them at the end of day Checkout Order confirmation Guest checkout Signs up for a/c “I want my family to fit in” Motivations Payments - To be provided a clear way to find son’s required clothing - Education about care, comfort and fit - Upfront clarity on returns Monday, 27 January 14
  • 10. RESEARCH FINDINGS Based on the many research methods we worked on, we sketched and identified the target customer ’s pain points and goals. Sarah- As she is new to uniforms, she would prefer all the essentials in a bundle John- Experienced and dad to a teenage daughter, he may want to buy specific items Monday, 27 January 14
  • 11. USER SCENARIOS Finding an individual item Express Checkout Finding a school “Essentials” uniform product listing New Customer Checkout Monday, 27 January 14
  • 12. S K E T C H E S - P E R S O N A L A RT I FA C T Keeping our personas close and their user flows we all went away to make our versions of the website. I chose Sarah’s persona to inspire my sketches and wireframes Monday, 27 January 14
  • 13. W I R E F R A M E S - P E R S O N A L A RT I FA C T About us Free shipping Easy exchanges Free shippingshipping Free returns Easy exchanges Easy exchanges Free returns Free Free returns Sign in About us Contact us (02) 9456 7899 Home Home Tab Boys Boys Girls Girls Bags n stuff Bags n stuff For Parents For Parents For Schools For Schools About us Sign in Free shipping Easy exchanges Free returns Free shipping Free returns Easy exchanges Wishlist Free shipping Easy exchanges Free returns Free shipping Free returns Easy exchanges Wishlist Home Home Home Home Tab Boys Girls Girls Bags n stuff Bags n stuff For Parents For Parents Wishlist Contact us (02) 9456 7899 Contact us (02) 9456 7899 Tab Boys Girls Girls Bags n stuff Bags n stuff For Parents For Parents For Schools For Schools For Schools For Schools 1 Home->Boys->Collections->Essentials Home->Boys->Collections->Essentials Find your school Essentials for St.Lukes Pack includes Product Title True Spirit Home Price Colour Boys Tops Size Qty Bottoms Collections Accessories Add to cart Tops Product info Product info Girls Accessories Refine By Proud partners of various schools Size Product Info Colour Grammar’s School St.Ives School Aidan’s Anglican School School selection Product info Care Product info Related St.John’s School Epping Heights School Our Service Free shipping in Australia Free returns in Australia Easy exchanges Contact us xxxxxxx xxxxxxx Our Service Free shipping in Australia Free returns in Australia Easy exchanges Secure and safe Contact us xxxxxxx xxxxxxx Free shipping in Australia Free returns in Australia Easy exchanges 1 Monday, 27 January 14 Recommended James Ruse School Our Service Secure and safe Reviews Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. Qty Secure and safe Sign in Contact us xxxxxxx xxxxxxx When customer adds/removes to cart, the “Shopping bag” populates appropriately
  • 14. Back Account Shipping Payment 1 Email text New customer Returning customer Email Email text Thank you Need help? 1 Order Summary Shopping cart popover 1 1 Item added text Address text Product title Price Qty City text Sub total: $ Country Password Checkout as guest Payment 2 Billing and shipping address Full Name text input Shipping Guest Account Thank you Continue shopping text State Sign in Post/Zip code text Ship to a different address Place Order 2 Payment 3 Order confirmation 4 Thank you Please check you email inbox shortly, a confirmation is on its way Thank you for your purchase. We appreciate it Home 1 Our Service Free shipping in Australia Free returns in Australia Easy exchanges Monday, 27 January 14 Secure and safe Contact us xxxxxxx xxxxxxx We need your email to send you order confirmation 1 Displays when customer adds to cart from the Product page Checkout
  • 15. GROUP DESIGN GOAL Findings Our team created individual wireframes that were optimised for iPad while keeping the in mind... We needed to simplify the messaging and flow for a truly responsive mobile webexperience. Based off our personas, the design needed to be clear and simple to suit users of  various abilities, whilst still being informative and optimised for mobile web.  TESTING -We all came together and identified the elements to go into a clickable prototype using Omnigraffle. -We scribed for each other. -We tested on iPad Monday, 27 January 14
  • 16. S U M M A RY As a team - Research methods suitable for e-commerce site - The site we designed catered to a Returning Customer and express checkout - Our product Core Experience enables busy parents to find a single item and check-out quickly AND find a selection of items required by child’s school and check-out easily on an iPad. - Created a clickable prototype created in Omnigraffle and a Design Spec document consisting of Sitemap, Navigation Schema and User Flows My individual case study - Design with New Customer in mind - Personal artifacts include sketches and wireframes THANK YOU Monday, 27 January 14
  • 17. T E S T I N G R E S U LT S User testing tasks 1. You are buying a polo shirt for your daughter. Show me how you would go about it 2. You are a new customer. Take me through your checkout process 3. You are a returning customer. Take me through your checkout process A few findings... - 4 out of 5 participants used the navigation on the Homepage to go to the product page - One participant could not see the difference between the Sign up and Guest checkout as he felt he would have given his details anyway - Search bar double-up, un-necessary - One participant thought that the Order summary meant Order confirmation. - 2 out of 5 preferred Guest Checkout even though they were returning customers Recommendations were flagged for future iterations. Monday, 27 January 14