UXDi Sydney Project 2 Individual Case Study - E-commerce Mobile Website


Published on

This slide pack summarises the design processes followed for our group project for the GA UXDi course, illustrated with examples of my own artefacts.
As a group we created a clickable prototype of an iPad-optimised mobile website using Omnigraffle which we presented to the rest of the class and our project stakeholders.
Project 2 ran across weeks 2 and 3 of the UXDi course.

Published in: Design, 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

No notes for slide

UXDi Sydney Project 2 Individual Case Study - E-commerce Mobile Website

  1. 1. Mobile Website Case Study Kathryn Sadler ! Student Project 2 General Assembly UXDi Sydney January 2014
  2. 2. COMPANY OVERVIEW “trueSpirit is a new internet retailer for schools and parents who want a modern school uniform for K-12 children. Offers updated uniform fashion, … provides a “must-haves” checklist from school’s administrator for each school year, recommends accessories allowed by school’s dress code. Unlike traditional suppliers True Spirit encourages visitors to express their tastes - with some limits.” PROJECT BRIEF • Design a mobile website, optimised for iPad, for trueSpirit’s online store. • Produce a clickable prototype of the site which demonstrates a key user’s flow from initial entry through to checkout. • Document high-level research & findings, overall conceptual model, detailed flows & interaction for key screens.
  3. 3. PERSONAS
  4. 4. RESEARCH • In teams we reviewed the background material provided, including brand values, company promise & personas. • We completed a high-level competitive analysis and reviewed the UI patterns of similar e-commerce sites. • We performed a card sort to identify the most logical hierarchy of the site’s products, which led to drafting our site map.
  5. 5. Card sorting Draft site maps
  6. 6. SITE MAP
  7. 7. …MORE RESEARCH We went back to our personas and drafted key problem statements. • We ideated and sketched out possible user flows for each persona, e.g.: • Sarah may like the option to buy her son’s outfit in one step. • John might prefer to shop for individual items for his daughter. •
  8. 8. WIREFRAMING • Keeping our personas in mind, we sketched initial wireframes, starting at the bottom of our hierarchy with the Product Detail page.
  9. 9. WIREFRAMING A few of my initial sketches
  10. 10. WIREFRAMING • We frequently reconvened as a group to discuss our personas and review our wireframes, making frequent updates to page layout, copy, navigation etc.
  11. 11. WIREFRAMING My Omnigraffle wireframes of our key pages
  13. 13. CHECKOUT PROCESS • Before defining the checkout pages of our site, we again reviewed competitor sites and drafted the user flows through checkout.
  15. 15. USER TESTING • We performed guerrilla testing of our prototype on an iPad with a handful of users within our building, • This testing highlighted the value of testing early and often, as some issues were immediately flagged. • We noted the results of our testing to apply to any further updates to the site.
  16. 16. SUMMARY • The site we designed had two key journeys to checkout, catering to our key personas. • Our main aim throughout the design process was to keep it simple. • As a group, we create a clickable prototype using Omnigraffle and a design specifications document. • Please note: This was a group project carried out as part of the User Experience Design Immersive course with General Assembly Sydney. This slide pack summarises the processes we followed, illustrated with examples of my own artefacts.
  17. 17. Thanks! kathrynux