• Save
UXDi Sydney Project 2 Individual Case Study - E-commerce Mobile Website
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 360 views
Uploaded 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. ...

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.

More in: Design , Technology
  • 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
360
On Slideshare
349
From Embeds
11
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 11

http://kathrynux.wordpress.com 11

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. Mobile Website Case Study Kathryn Sadler ! Student Project 2 General Assembly UXDi Sydney January 2014
  • 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. PERSONAS
  • 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. Card sorting Draft site maps
  • 6. SITE MAP
  • 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. WIREFRAMING • Keeping our personas in mind, we sketched initial wireframes, starting at the bottom of our hierarchy with the Product Detail page.
  • 9. WIREFRAMING A few of my initial sketches
  • 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. WIREFRAMING My Omnigraffle wireframes of our key pages
  • 12. NAVIGATION SCHEMA
  • 13. CHECKOUT PROCESS • Before defining the checkout pages of our site, we again reviewed competitor sites and drafted the user flows through checkout.
  • 14. CHECKOUT USER FLOW
  • 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. 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. Thanks! kathrynux