TrueSpirit Study

Case Study !Prepared for: True Spirit !By: Michael Shai-Hee Last update: Jan 27, 2014 !Student Project. General Assembly Sydney, UXDI Summer 2014

A new internet retailer for schools and parents who want a modern school uniform for K-12 children.

!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. !

Business Objective

Brand Profile

The brand profile is based on the following criteria: !• Fresh • Modern • Lighthearted • Appealing • Friendly • Curated

FASHION E-COMMERCE CUSTOMER

TRUE SPIRIT E-COMMERCE CUSTOMER

23/01/2014

User Needs

TrueSpirit aims to provide a pleasant buying experience that is both reassuring and efficient. This is unlike other fashion websites that simply offer a plethora of products that are difficult to find and navigate through.

Personas

“I hope I’m ordering the right things”

“I want to have enough information so that I know I’m buying the right thing”

Sarah

John

“I want to make sure the parents’ needs are met”

Jess

Each persona has a unique need, approach and reason for purchasing school uniform products.

User Journey and Scenario for the personas

Sarah John Jess

Writing out the user journey and scenario for each persona.

User Flow Sketch: John

Mapping out the steps John will need to go through in purchasing a white polo shirt and blue pants.

Card Sorting

Categorising the items the company will provide.

Product Page Sketches

Working out the various ways how the product categories are to be displayed.

Product Details Sketches

Determining what details to be included and how they are to be arranged on the web page.

Order Process Sketch

Determining the ordering process.

User Flow: John

John’s profile explicitly states what items he is to buy, a white polo shirt and blue pants for his daughter (High fidelity version).

Google

Search “Girl’s uniform”

Search uniform stating clothing

type (tops), child (girl), class (year

X) & school (name of school)

Girls Tops Polo Shirts

Girls Bottoms Pants

Add white loo shirt to

cartPolo Shirts

Add blue pants to cart Pants

TrueSpirit Home Page

Search Girls Bottoms

TrueSpirit Navigation

Menu

Summarised list of items in

cart

John

Full detailed list of items in cart

Checkout Process

User Flow: Sarah

Email received from school

administrator

Search uniform stating clothing

type, child (boy), class (year X) & school (name of

school)

Boys Tops

Polo Shirts

Boys Bottoms

Pants

Boys Tops

Accessories

Boys Bottoms

T-shirts

Tank Tops

Jackets

Formal Shirts

Gym Shorts

Shorts

TrueSpirit Home Page

Select Cart on TrueSpirit

Global Navigation

Boys Uniform

Product Page

TrueSpiritGlobal

Navigation

Summarised list of items in

cart

Sarah

Full detailed list of items in

cart

Checkout Process

Sweaters

Belts

Gloves

Socks

Add selected item to cart

Accessories

Hoodies

Logo t-shirts

Logo hoodies

Unisex Logo Merchandise

Backpacks

iPhone case

School mascot plush toy

TrueSpirit Navigation

Logo Merchandise

Backpacks

Unisex

Sarah’s profile did not explicitly state what items she wanted to purchase so all items are considered.

Sitemap

0.0 Home Page

1.0 Boys

1.1 Tops

1.1.2 T-Shirts

1.1.1. Formal Shirts

1.2 Bottoms

2.0 Girls

1.1.3 Polo Shirts

1.1.4 Tank Tops

1.1.5 Jackets

1.1.6 Sweaters

1.1.7 Hoodies

1.2.1 Pants

1.2.2 Gymshorts

1.2.3 Shorts

2.1 Tops

2.1.2 T-Shirts

2.1.1 Formal Shirts

2.2 Bottoms

2.1.3 Polo Shirts

2.1.4 Tank Tops

2.1.5 Jackets

2.1.6 Sweaters

2.1.7 Hoodies

2.2.1 Skirts

2.2.3 Gymshorts

2.2.4 Shorts

3.0 Unisex

2.2.2 Pants

1.3 Accessories

1.3.1 Socks

1.3.2 Gloves

1.3.3 Belts

2.3 Accessories

2.3.1 Headbands

2.3.2 Gloves

2.3.3 Belts

2.3.4 Leggings

3.1 Logos

3.1.1 Logo t-shirt

3.1.2 Logo hoodie

3.1.3 iPhone case

3.1.4 School mascot plush toy

3.2 Backpacks

4.0 About Us

Navigation Schema

UnisexGirlsBoys

Tops

Bottoms

Home

Home

Accessories About Us

Boys

Unisex

Girls

Accessories

All

Accessories

Tops

Bottoms

Accessories

Logos

Accessories

BoysAccessories

GirlsAccessories

UnisexAccessories

CompanyDescription

Returns Policy

WireFrame: Home Page

TrueSpirit Logo BOYS GIRLS

Boys Accessories About UsGirls UnisexHome

Carousel of images showing students wearing TrueSpirit school

uniforms accompanied with endorsement messages

CARTSearch byschool:

FEATURE PRODUCT 1

FEATURE PRODUCT 2

FEATURE PRODUCT 3

FEATURE PRODUCT 4

Copyright TrueSpirit Email: [email protected] Head Office No: 1234 5678 Find Us

Search byproduct:Name of School

The home page displays an overall view of products TrueSpirit offers.

WireFrame: Product Category Page

TOPS

BOTTOMS

ACCESSORIES


CART



Search byschool:


When school uniforms for boys is selected, product categories for tops, bottoms and accessories are shown.

WireFrame: Product Details Page

Carousel of displayed product images

Product Name

LargeMedium XLSmall

Size Select:

Product Description

Quantity: 1 Cost:

Shipping Information

Bundle Collections:

Bundle 1 Bundle 2 Display products viewed by other customers


CART



$30.00

Other Customers Viewed:

Add Item to cart

Search byschool:


Details for each product in the selected category (e.g. tops) is described as the user goes through the carousel of displayed items. !This is the page where the items can be purchased and placed into the cart.

Checkout Process User FlowNotes1 The user can terminate

the checkout process before final payment is made.

The checkout process begins when the user selects the cart icon.

Summarised list of items in cart

User

Full detailed list of items in cart

Billing/shipping address entered

Delivery type

Payment page

1Transaction Complete

TrueSpirit Home page

TrueSpirit Previous

page

Payment Confirmed

Select cart icon

Checkout Process Form: Address



Endorsement Messages CARTSearch by schooland/or product:


Name:

Email:

Billing Address

Checkout

Street:

Suburb:

State:

Postcode/Zip:

List of items purchased displayed and prices listed

Shipping address is the same as billing address Next >>Cancel

Country: Australia

PaymentAddress Delivery Finish

Total Cost: $200.00

The checkout process begins when the cart icon is selected.

Checkout Process: Delivery





Checkout

Next >>Cancel


Total Cost: $200.00

<< Back

Standard Delivery - FREE - within 7 days

Express Delivery - add $15.00 - within 2 days

Pick up from School

Delivery Type

Checkout Process: Payment





Checkout

Next >>Cancel


Total Cost: $200.00

<< Back

Credit Card

Paypal

Direct Deposit

Payment Type

Card Number:

Expiry Date:

CSV:

Month Year

Checkout Process: Finish





Checkout

Go to homepage


Checkout process transactions finished.

Confirmation of order will be sent via email.

User Testing

Prototype of the TrueSpirit website tested on real subjects who had never seen it. Results varied whereby some users were able to navigate to the requested product easily and others not so.

Design

TrueSpirit Study