1. Homepage
Sign In
Girls
Boys
Gear
Search
Sale
Find your school
& get your shopping list
Branding Image toitem he re
A fe at ured
communicate what the brand is
all about
Enter your school's
city and state
e.g. Portland, OR
Go
Main call to action opens up
model to locate the correct
school, student's age and gender.
"Check out our sale"
Featured Item with mass
appeal
Scholarship Program
Site Categories
About True Spirit
Your Order
Administrators
Girls
Company History
Careers
Scholarship Program
News Room
Shipping Info
Return Policy
Your Cart
Administrator Portal
See our Catalog
Talk with a Representative
Boys
Accessories
Sale

2. Homepage Girls
Sign In
Girls
Boys
Gear
Search
Sale
Tops
Bottoms
Outerwear
Accessories
Formal Shirts
T Shirts
Sweaters
Tank Tops
Leggings
Skirts
Shorts
Gym Shorts
Pants
Jackets
Hoodies
Belts
Headbands
Socks
Find your school
& get your shopping list
Branding Image/Promotional
A fe at ured item he re
Image to communicate what
the brand is all about
Enter your school's
city and state
e.g. Portland, OR
Go
Fly-outs appear on hover.
"Check out our sale"
Featured Item with mass
appeal
Scholarship Program
Site Categories
About True Spirit
Your Order
Administrators
Girls
Company History
Careers
Scholarship Program
News Room
Shipping Info
Return Policy
Your Cart
Administrator Portal
See our Catalog
Talk with a Representative
Boys
Accessories
Sale

3. Homepage Boys
Sign In
Girls
Boys
Boys
Gear
Search
Sale
Tops
Bottoms
Outerwear
Accessories
Formal Shirts
T Shirts
Sweaters
Tank Tops
Polos
Pants
Shorts
Gym Shorts
Jackets
Hoodies
Belts
Socks
Gloves
Find your school
& get your shopping list
Branding Image/Promotional
A fe at ured item he re
Image to communicate what
the brand is all about
Enter your school's
city and state
e.g. Portland, OR
Go
"Check out our sale"
Featured Item with mass
appeal
Scholarship Program
Site Categories
About True Spirit
Your Order
Administrators
Girls
Company History
Careers
Scholarship Program
News Room
Shipping Info
Return Policy
Your Cart
Administrator Portal
See our Catalog
Talk with a Representative
Boys
Accessories
Sale

4. Homepage Gear
Sign In
Girls
Boys
Gear
Search
Sale
Backpacks
School Logo Merchandise
School Mascot Plush Toys
School Logo T Shirts
iPhone Cases
School Logo Hoodies
Find your school
& get your shopping list
Branding Image/Promotional
A fe at ured item he re
Image to communicate what
the brand is all about
Enter your school's
city and state
e.g. Portland, OR
Go
"Check out our sale"
Featured Item with mass
appeal
Scholarship Program
Site Categories
About True Spirit
Your Order
Administrators
Girls
Company History
Careers
Scholarship Program
News Room
Shipping Info
Return Policy
Your Cart
Administrator Portal
See our Catalog
Talk with a Representative
Boys
Accessories
Sale

5. Homepage Student Details
Sign In
Girls
Boys
Gear
Search
Sale
Get your shopping list
x
Below are our partner schools in
San Francisco, CA
Find your school
Select your student's school
Enter your
Branding Image/Promotional
Atherton Schools
school's city and
A fe at ured item he re
state
Image to communicate what
the brand is all about St. Luke's Academy
Image
Image
Summit Academy
Truman Academy
Switches to an advanced
search modal, with
various search options
Image
Go
Image
Scroll bar
Can't find the right school?
Are you shopping for girl or boy clothes?
Girl clothes
Boy clothes
"Check out our sale"
What grade is your student in?
Featured Item with mass
appeal
Select
Get my
shopping list!
Options limited by school
choice above.
▼
+ Add a student
Scholarship Program
Opens a new modal to
enter in another student's
info.
Site Categories
About True Spirit
Your Order
Administrators
Girls
Company History
Careers
Scholarship Program
News Room
Shipping Info
Return Policy
Your Cart
Administrator Portal
See our Catalog
Talk with a Representative
Boys
Accessories
Sale

6. Homepage List 2
Sign In
Girls
Boys
Gear
5
Search
Sale
My Shopping List (5 items)
Required
items for:
Edit button returns user to
a modified version of the
previous modal screen
Find your school
add a student
Branding Image/Promotional
A fe at ured item he re
Image to communicate(remove)
what
the brand is all about
(remove)
Ideally, this fly-out would have an
animation to make it clear this is
accessible when you click the list
icon.
St. Lukes Academy
Grade 10
Boys clothes (edit)
Image
Enter your
school's city and
Pants
state
See approved options
Go
Image
Running Shorts
See approved options
(remove)
Image
(remove)
Image
(remove)
links allow users to remove
items from their shopping
list
School's logo
▶
Image
Polo Shirt
See approved options
Dress Shirt
See approved options
School Hoodie
See approved options
▶
▶
Each option takes user to a
product category page,
filtered to only their
school's approved options
▶
▶
"Check out our sale"
closes out fly-out, shows a
Featured Item with mass home
new version of the
appeal screen specific to the
user's school
OK
Scholarship Program
Site Categories
About True Spirit
Your Order
Administrators
Girls
Company History
Careers
Scholarship Program
News Room
Shipping Info
Return Policy
Your Cart
Administrator Portal
See our Catalog
Talk with a Representative
Boys
Accessories
Sale

7. Product category
Sign In
Girls
Home
▶
Boys
▶
Boys
Gear
5
Search
Sale
St. Luke's Approved Dress Shirts
St. Luke's Approved Dress Shirts
Promotional Image that indicates the category, clothing quality and fashionability
Refine By
1 2 3 4
Next
▶
Size
S (8-10)
M (10-12)
L (14-16)
XL (18-20)
Filter would be specific to the
product category
Fabric
Broad Cloth
Chambray
End on End
Oxford Cloth
Color
Product 1
$52
$65
Product 3
$72
Product 4
$65
White
Blue
Gray
Pink
Green
Product 2
Product 5
$69
Product 6
$55
1 2 3 4
Site Categories
About True Spirit
Your Order
Administrators
Girls
Company History
Careers
Scholarship Program
News Room
Shipping Info
Return Policy
Your Cart
Administrator Portal
See our Catalog
Talk with a Representative
Boys
Accessories
Sale
Next
▶

8. Product Page
Sign In
Girls
Home
▶
Boys
▶
St. Luke's Approved Dress Shirts
Boys
▶
Gear
5
Search
Sale
Oxford Shirt
Shipping Info
Details
Approved
by St.
Luke's
Return Policy
You might
also like:
Oxford Shirt
$60.99
Clicking on the user ratings
anchors user to "Helpful Tips"
section below.
Product # 12345678
Product Details
Few shirts age better than an oxford. The frays,
the fades—these are the kinds of details we love.
Color of seal would ideally match the
dominant color of the school's logo.
That being the case, we branched out from classic
fit to something a bit more modern.
Choose Color
Opens sizing
modal
Image magnifies on hover
Choose Size
S (8-10)
See Size Chart
M (10-12)
XL (18-20)
Add to Bag
Alternate Views
Goes well with:
L (14-16)
Helpful Tips:
add a helpful tip
John Doe, St. Luke's Academy
This Oxford shirt has a really hip cut to it that my son loved.
He ended up wearing it so much that I purchased an extra
two. I'd highly recommend purchasing more than one.
3 hours ago
If not signed-in, link takes user
to sign-in/up page. Then
returns user to this page and
John Doe, St. Luke's Academy
opens a modal to enter a
helpful tip.
Nullam libero purus, eleifend vitae mattis sed, sodales
euismod orci. Nam eget odio vel risus malesuada vehicula.
Pellentesque tincidunt, purus eget cursus pretium.
3 hours ago
Site Categories
About True Spirit
Your Order
Administrators
Girls
Company History
Careers
Scholarship Program
News Room
Shipping Info
Return Policy
Your Cart
Administrator Portal
See our Catalog
Talk with a Representative
Boys
Accessories
Sale

9. Product Page 2
Sign In
Girls
Home
▶
Boys
▶
St. Luke's Approved Dress Shirts
Boys
▶
Gear
3
1
Search
Product Name
Sale
$ 60.99
When approved item is
added to the bag, the
Size: Large
number in the checklist goes
Color: Burgundy down, while the number in
the bag goes up.
Oxford Shirt
Quantity: 1
Shipping Info
Details
Approved
by St.
Luke's
Return Policy
Oxford Shirt
Continue Shopping
$60.99
You might
also like:
$ 60.99
Go to Checkout
Product # 12345678
Product Details
Few shirts age better than an oxford. The frays,
the fades—these are the kinds of details we love.
That being the case, we branched out from classic
fit to something a bit more modern.
Choose Color
Choose Size
See Size Chart
Button fades
S (8-10)
M (10-12)
XL (18-20)
Added to Bag
Alternate Views
Would go well with:
L (14-16)
Helpful Tips:
add a helpful tip
John Doe, St. Luke's Academy
This Oxford shirt has a really hip cut to it that my son loved.
He ended up wearing it so much that I purchased an extra
two. I'd highly recommend purchasing more than one.
3 hours ago
John Doe, St. Luke's Academy
Nullam libero purus, eleifend vitae mattis sed, sodales
euismod orci. Nam eget odio vel risus malesuada vehicula.
Pellentesque tincidunt, purus eget cursus pretium.
3 hours ago
Site Categories
About True Spirit
Your Order
Administrators
Girls
Company History
Careers
Scholarship Program
News Room
Shipping Info
Return Policy
Your Cart
Administrator Portal
See our Catalog
Talk with a Representative
Boys
Accessories
Sale

10. Shopping Bag
3
Sign In
Girls
Boys
Gear
Search
Sale
< Return to Shop
Shopping Bag
Product Name
$60.99 x 1 = $60.99
$ 60
Items total
Size: Large
Quantity:
Delete
1
▼
$ 121.98
Est. Tax
$ 13.02
Est. Shipping
Color: Burgundy
Opens a
confirmation modal
Bag Summary
$ 15.00
Opens edit options
on same page
Est. Total:
Edit
$ 150.00
Checkout
$ 60
Goes to sign-in
page
Size: Large
Color: Burgundy
Quantity:
Delete
- or -
$60.99 x 1 = $60.99
Product Name
1
▼
Ideally freely
editable, with realtime updating
We make returns easy
learn more
Edit
See shipping options
Enter your promotional code:
Submit
Clicking submit
keeps user on
same page, but
updates info.
You might also like:
Both open modals.
Site Categories
About True Spirit
Your Order
Administrators
Girls
Company History
Careers
Scholarship Program
News Room
Shipping Info
Return Policy
Your Cart
Administrator Portal
See our Catalog
Talk with a Representative
Boys
Accessories
Sale

11. Shopping Bag Edit
3
Sign In
Girls
Boys
Gear
Search
Sale
< Return to Shop
Shopping Bag
Product Name
$60.99 x 1 = $60.99
$ 60.99
Size:
S (8-10)
M (10-12)
L (14-16)
Bag Summary
Items total
XL (18-20)
$ 121.98
Est. Tax
Est. Shipping
Color:
Quantity:
1
$ 13.02
$ 15.00
▼
Est. Total:
Update Item
Delete
$ 150.00
Checkout
Checkout
- or -
$60.99 x 1 = $60.99
Product Name
$ 60
Size: Large
Color: Burgundy
Quantity:
Delete
1
▼
We make returns easy
learn more
Edit
See shipping options
Enter your promotional code:
Submit
You might also like:
Site Categories
About True Spirit
Your Order
Administrators
Girls
Company History
Careers
Scholarship Program
News Room
Shipping Info
Return Policy
Your Cart
Administrator Portal
See our Catalog
Talk with a Representative
Boys
Accessories
Sale

12. Sign In
Sign In
Girls
Boys
Gear
Search
Sale
< Return to Shopping Bag
Have an Account
with True Spirit?
Proceed as a
New Customer
Email
Next
Password
Allows users to
send a passwordupdate link to their
email address
Forgot your password?
Sign In
Proceeds to oneclick checkout
page
Site Categories
About True Spirit
Your Order
Administrators
Girls
Company History
Careers
Scholarship Program
News Room
Shipping Info
Return Policy
Your Cart
Administrator Portal
See our Catalog
Talk with a Representative
Boys
Accessories
Sale
3

13. Shipping
3
Sign In
Girls
Boys
Gear
Search
Sale
< Return to Bag
1. Shipping Address
2. Billing Info
3. Thank You!
Shipping Address
Bag Summary
Full Name
Product Name
$ 60.99
Product Name
Street Address
$ 60.99
Items total
Zip Code
Entering zip code
automatically populates
a city/state text field to
the righ.
$ 121.98
Tax
$ 13.02
Shipping
We'll use your zip cod to
find your city & state
$ 15.00
$ 150.00
Total:
Shipping Options
Standard Shipping
$ 15
3 - 6 business days
Selection will update
bag summary in
real-time.
Expedited Shipping
Bag summary is
sticky, and remains
visible no matter
where you scroll.
$ 20
2 - 3 business days
Next
Site Categories
About True Spirit
Your Order
Administrators
Girls
Company History
Careers
Scholarship Program
News Room
Shipping Info
Return Policy
Your Cart
Administrator Portal
See our Catalog
Talk with a Representative
Boys
Accessories
Sale

14. Billing
3
Sign In
Girls
Boys
Gear
2. Billing Info
1. Shipping Address
Search
Sale
3. Thank You!
Billing Address
Bag Summary
My billing address is the same as my shipping address
Product Name
$ 60.99
Name on Card
Product Name
Michael Bush
$ 60.99
Street Address
Items total
19070 NW Northshore Ct.
Zip Code
Tax
Portland, OR
▼
$ 13.02
Shipping
City & State
97229
$ 121.98
$ 15.00
Total:
$ 150.00
Card Info
Bag summary is
sticky, and remains
visible no matter
where you scroll.
Faded cards indicate which
are accepted. When card
number is entered, the
corresponding card-type
lights up.
Name on Card
Card Number
Expiration Date
MM
▼
YY
▼
Security Code (?)
Create Your Account
Zoom through your next checkout
Email Address
Create Password
Confirm and Pay
Site Categories
About True Spirit
Your Order
Administrators
Girls
Company History
Careers
Scholarship Program
News Room
Shipping Info
Return Policy
Your Cart
Administrator Portal
See our Catalog
Talk with a Representative
Boys
Accessories
Sale

15. Reciept Page
Sign In
Girls
Boys
Gear
Search
Sale
Your purchase went through.
Thank you for your order!
3
Continue Shopping
An email receipt was sent to: michaelf@gmail.com
Product Name
Your order will be sent to:
$ 60.99
Size: Large
Color: Burgundy
Michael Bush
Quantity: 1
19070 NW Northshore Ct.
Portland, OR 97229
Product Name
$ 60.99
Size: Large
Color: Burgundy
And will arrive on:
Quantity: 1
December 12th - 15th
Subtotal: $121.98
Tax: $13.02
Shipping: $15.00
Billing Info
Billing Address
Master Card
Michael Bush
XXXX XXXX XXXX 2345
19070 NW Northshore Ct.
Total: $150.00
Portland, OR 97229
Site Categories
About True Spirit
Your Order
Administrators
Girls
Company History
Careers
Scholarship Program
News Room
Shipping Info
Return Policy
Your Cart
Administrator Portal
See our Catalog
Talk with a Representative
Boys
Accessories
Sale