Mobile Website	

Case Study
Kathryn Sadler	

!

Student Project 2	

General Assembly UXDi Sydney	

January 2014
COMPANY OVERVIEW
“trueSpirit is a new internet retailer for schools and parents who want a modern school
uniform for K-12 ...
PERSONAS
RESEARCH
•

In teams we reviewed the background material provided,
including brand values, company promise & personas.	


...
Card sorting

Draft site maps
SITE MAP
…MORE RESEARCH
We went back to our personas and drafted key
problem statements.
• We ideated and sketched out possible use...
WIREFRAMING
•

Keeping our personas in mind, we sketched initial wireframes,
starting at the bottom of our hierarchy with ...
WIREFRAMING
A few of my initial sketches
WIREFRAMING
•

We frequently reconvened as a group to discuss our
personas and review our wireframes, making frequent
upda...
WIREFRAMING

My Omnigraffle wireframes
of our key pages
NAVIGATION
SCHEMA
CHECKOUT
PROCESS
•

Before defining the checkout pages of our site, we again
reviewed competitor sites and drafted the user...
CHECKOUT
USER FLOW
USER TESTING
•

We performed guerrilla testing of our prototype on
an iPad with a handful of users within our building,	

...
SUMMARY
•

The site we designed had two key journeys to checkout, catering to
our key personas.	


•

Our main aim through...
Thanks!
kathrynux
Upcoming SlideShare
Loading in...5
×

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

302

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
302
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
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
  12. 12. NAVIGATION SCHEMA
  13. 13. CHECKOUT PROCESS • Before defining the checkout pages of our site, we again reviewed competitor sites and drafted the user flows through checkout.
  14. 14. CHECKOUT USER FLOW
  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

×