True Spirit Mobile Site

Prototype home page

Goal:

To design a mobile site for True Spirit that includes a school landing page and a simple way for parents to view approved uniform items.

 
 

Process:

  1. User Interviews
  2. Competitive and Comparative Research
  3. Storyboarding
  4. Persona Creation
  5. Navigation Schema
  6. Site Map
  7. Task Flow
  8. User Flow
  9. Clickable Prototype (Balsamiq)
  10. Usability Testing
  11. Iterate (Axure)


Research:

Research questions:

  • Would users prefer a full web site, a responsive/mobile site or an app?

  • How would users like to see a “must-haves” list from a retailer?
  • How do parents currently buy uniforms?  Every piece brand new each year?  Multiples of certain items? 
  • What items do parents buy from general retailers and not uniform retailers and why do they buy them there?

User research quotes

Competitive analysis

user interview findings:

  • Private Schools usually have uniform exchanges at the beginning and end of the school year. 
  • Plaid skirts and jumpers last forever and are passed on to younger students, so rarely need to be purchased new.
  • White polo’s need to be bought throughout the year, as they get trashed quickly by grubby little hands.
  • Size charts are very important, as sizes are not always dependable brand to brand.
  • Many busy moms use their phones for everything, including shopping.  Mobile/responsive sites are crucial for them.
  • My interviewees were more interested in a mobile site than an app.  They wouldn’t want to take up space on their phone with a tool that they only use a couple of times a year.
  • Users would like to see a single page with all of their options in order to skim through quickly, but would like the ability to filter for specific items at times (i.e. when stocking up on polo’s mid-year).

comparative research findings:

  • Users would prefer a mobile/responsive site that they could use on their phone.
  • Users would like to be sent to a search results page with all options for their child at their child’s grade level.  They want the ability to filter from there.
  • Buy online from uniform retailer, but purchase certain items from general retailers such as Old Navy or Lands End.
  • Items that are frequently repurchased (polo’s) are usually bought someplace with a lower price point such as Old Navy.

user research conclusions:

  • Users would prefer a mobile/responsive site that they could use on their phone.

  • Users would like to be sent to a search results page with all options for their child at their child’s grade level.  They want the ability to filter from there.
  • Buy online from uniform retailer, but purchase certain items from general retailers such as Old Navy or Lands End.
  • Items that are frequently repurchased (polo’s) are usually bought someplace with a lower price point such as Old Navy.

Open card sort results

Ideation:

functions:

  • School Landing Page
  • Ability to easily find approved uniform items for your child
  • Quickly and easily items to your shopping cart
  • Checkout

Card Sorting:


Wireframes


Usability test results

Testing

Usability Test Findings:

  • The original header was too dense.  Find other ways to communicate important information.

  • Rearranged items detail with photo on the left.  Color choice came out of a drop-down.
  • Added social sign in an streamlined sign in page.
  • Proximity of targets on screen was too close.  Not enough room for fingertips to hit just one target.