This prototype is for an ecommerce site called TrueSpirit that sells school uniforms. It allows parents to find their child's school and access a curated list of approved uniform items. The prototype includes: 1) A "Find My School" page for parents to locate their school without a code and access the customized uniform page. 2) Custom school uniform homepages that show grade-specific outfit options with product details, reviews, and a "buy now" button. 3) An administrator login for schools to edit the uniform selections. 4) A checkout process on one page with address, delivery, payment, and order review sections to complete the purchase smoothly.

1. Kelly Redznak | General Assembly UXDI NY 2013

2. About the Product
TrueSpirit is a new internet retailer for schools and parents who want a
modern school uniform for school children. It offers updated uniform
fashion including pants for girls and zip-up hoodies, provides a “musthaves” checklist from the school’s administrator for each school year, and
recommends accessories allowed by the school’s dress code.
The Challenge
The challenge is to develop an ecommerce site for a private school checklist from
school’s administrator. The site should be easy to navigate and prevent any ordering
errors along the way.

3. Competitive Analysis
True Grits:
Opportunities Identified:
•Small boutique site
•Need school code to enter site
•Very limited and non-accommodating
•Find a happy medium of flexibly and
choices
•Add some restriction so the users feel
confident purchasing the right product
•Make the process easy and efficient
Target, Lands End, Walmart:
•User flexibility
•Lots of choices
•Uniform categories are hard to find

4. Personas

5. Overall Goals

6. Process
Explored different methods for finding patterns in how users would expect to find content and
generate an overall structure.
Sketching Feedback
Card
Sorting

7. Design Iteration
Rough sketches of how the user will get from the sign in page to their specific school uniform homepage
and exploring alternative experiences of signing with and without a school code. Also, explored the
layout of the product page and school uniform gallery and how the key goals fit in.

8. Prototype Testing Testing
•Header
•Content Labeling
•Separating the main site
homepage from the school
homepage

9. Prototype
https://projects.invisionapp.com/share/XELFGIU

10. School Administrator Log in
1.0
2.0
Find My School
My Account
Check out
My Cart
1.0
5.0
Notes
Boys
Girls
Accessories
School Merchandise
Search
1.
GIRLS
8.0
Tops
Bottoms
Gym
Jackets
Accessories
Administrator Login
This feature will let the School Administrator to log in
with ease so they can make edits and curate the
school uniform selects.
Hello!
2.
For a direct link to
your school uniform
homepage, enter your
school code here
“Find my School” roll over
The roll over is an alternative for parents who don’t
have a school code to access the school uniform
homepage.
3.
School Code Log in Box
The call out box is a quick link for parents who have
their school code,
Apply
4.
Scholarship Call out
Linked call out box for Scholarships. This is great way
for the company to communicate to the customers
their brand goal.
5.
Site Map
The site map will let users search for all items from
the main website.
6.
Newsletter sign up
3.0
Editorial photo
512x380
BOYS
Tops
Bottoms
Gym
Jackets
Accessories
4.0
Learn more
about our
scholarship fund!
Boys
330x397
Girls
330x397
This will help the business stay connected with their
customers and partake with their Business Goals.
7.
Service
Quick Service links.
8.
Site Map
Alternative site map for users to search for all items
from the main website

11. Go to the Main Site
Find My School
My Account
My Cart
Notes
Check out
1.0
2.0
1.
2.
Girls
Accessories
Product Box
4.
Scroll over feature
Users can scroll over and view a higher quality of the
product. See next page for more details.
5.
Color box
The users can view the product in different colors
without opening another window.
6.
Boys
School Banner
Call out so the uses know they are on the correct
school page.
3.
Welcome to the St. Johnsbury Academy School Uniform Homepage | Girls Grade 6-8
Main Site link
This will allow users to connect back to the main site
“Buy Now” button
Search
School Merchandise
Girls Tops
3.0
7.0
«
»
4.0
Polo Shirt
$14.99
Buy Now
5.0
Sweater
$14.99
Buy Now
T-Shirt
$14.99
Buy Now
Tank Top
$14.99
Users can click the button to quickly buy the product
and view the product page with one click.
Buy Now
6.0
7.
Users can scroll through the product gallery with the
left and right button.
Girls Bottoms
»
«
Skirt
$14.99
Buy Now
Pants
$14.99
Buy Now
Leggings
$14.99
Buy Now
Pants
$14.99
Buy Now
Girls Jackets
«
Scroll button
»

12. Find My School
Go to the Main Site
My Account
My Cart
Check out
Notes
1.
“Size Chart” scroll over
Users can view more info on fit and size
2.
“Product Details” scroll over
Users can view more info on care instructions and
quality.
3.
“Customers also bought” section
For users who want suggested options
4.
“Product Reviews” sections
For users who would like to get more details on the
product and personal experience.
5.
Seal of Approval from School
Homepage Uniforms > Shirts > Polo Shirts
Polo Shirt
$14.99
5.0
item: 3483745
ved b y
Appro bury
s
St.John y
Academ
-8
Girls 6
Size
1
1.0
Size Chart
Color
Quantity
1
Product Details
2.0
Add to Cart
3.0
Customers also bought:
Save to My Shopping List
4.0
Product Reviews:
Far far away, behind the word mountains, far from the
countries Vokalia and Consonantia, there live the blind
texts. Separated they live in Bookmarksgrove right at the
coast of the Semantics, a large language ocean.
Far far away, behind the word mountains, far from the
countries Vokalia and Consonantia, there live the blind
texts. Separated they live in Bookmarksgrove right at the

13. My Account
Go to the Main Site
Check out
My Cart
Notes
1.
CHECKOUT
1
1.0
Address
Edit
Review Order
Polo Shirt
Item: 3483745
Size: Small
Color: Green
1x $14.99
Total: $14.99
2
Delivery
S n a dD liv r
ta d r e e y
$ .0
8 0
Your order will ship UPS and
will be delivered by USPS
E p e sD liv r
x r s e ey $ 0 0
2 .0
Your order will ship 2nd Day
Air USPS
SUBTOTAL
Shipping
Sales Tax
$14.99
$ 8.00
$ 2.00
Promo Code
Done
3
Gift or Rewards Card
TOTAL
Payment
Credit Card
Customer Service
Returns
Credit Card Number
343374983749874
Month
03
Enter your card’s security code:
Year
2014
What is this?
$24.99
Checkout page
The checkout form is located on one page so the
process is simple and fast. After the users have filled
out their info, they can click done and the box will
close.