1. Design Specifications
Prepared for: TrueSpirit
By: Ed Lewis
Last update: Dec 5, 2013
Student Project. General Assembly UXDI Winter 2013

2. Sitemap
1.0 Home
2.0 Boys
4.0 School
Spirit
3.0 Girls
3.1 tops
2.1 tops
1.1 login
5.0 Sale
4.1 iPhone case
4.1 iPhone case
4.2 logo t-shirt
4.2 logo t-shirt
2.1.1 t-shirts
3.1.2 logo t-shirt
2.1.2 logo t-shirt
3.1.3 formal shirts
2.1.3 formal shirts
3.1.5 tank tops
4.3 logo hoodie
4.4 plush toy
4.5 backpacks
3.2 bottoms
5.0 about us
5.4 careers
5.5 guarantee
4.4 plush toy
4.5 backpacks
5.4 careers
5.6 return policy
3.2.1 shorts
2.2.1 shorts
3.2.2 gym shorts
2.2.2 gym shorts
3.2.4 skirts
3.3 outerwear
3.3.1 jackets
2.3.3 hoodies
3.3.2 sweaters
2.3.4 logo hoodie
3.3.3 hoodies
3.3.4 logo hoodie
2.4.2 gloves
2.4.3 belts
5.6 return policy
5.7 contact
2.3.2 sweaters
2.4.1 socks
5.5 guarantee
3.2.3 pants
2.2.3 pants
2.4 accessories
5.1 news
4.3 logo hoodie
2.1.5 tank tops
2.3.1 jackets
Search
5.3 scholarship
3.1.4 polo shirts
2.1.4 polo shirts
2.3 outerwear
7.0 Footer
5.2 story
3.1.1 t-shirts
2.2 bottoms
6.0 About Us
3.4 accessories
3.4.1 socks
3.4.2 gloves
3.4.3 belts
3.4.4 headbands
5.7 contact
Search
search
results

3. User Flow : John
Notes (sample)
NEW USER
1
views
selects
HOME
SCREEN
selects
SCHOOL
FINDER
views
SCHOOL
views
SCHOOL
OUTFIT
LIST
PRODUCT
DETAIL
views
bag
ACCOUNT
SHIPPING
PAYMENT
CONFIRMATION
add to bag

4. sign in
boys
girls
school items
register
sale
bag
Search
1.0
Your school is Johnny Appleseed Elementary in Anaheim, CA
wrong school? Find yours here:
School Search
We have the 2.0 Johnny Appleseed uniforms for 2013-2014 in stock! Choose
full
a grade to get started.
fun stuff!
Image
boys
girls
iPhone case
Image
4.0
K
1-3
4-6
K
1-3
4-6
plush toy
7-8
9-11
12
7-8
1 & 2. School name is
displayed twice to make
sure shoppers know
they’re in the right
place.
3. Boys and girls sections
clearly marked with both
images and text.
school uniform shopping list
3.0
Notes
9-11
12
Image
backpack
4. Grade grouping options
are all shown here so
shopper can quickly go
to the shopping list.

5. sign in
boys
girls
school items
register
sale
bag
Search
Your school is Johnny Appleseed Elementary in Anaheim, CA
1.0
wrong school? Find yours here:
3. Pictures and names of
all of the uniform items
are shown for a visual
complete outfit.
Johnny Appleseed girls’ uniform for 2013-2014 (grade 4-6):
7.0
3.0
Image
shirt
4.0
choose size
5.0
added to bag!
fun stuff!
iPhone case
Image
shorts
added to bag!
.
Image
Image
pants
choose size
added to bag!
6.0
outfit complete!
plush toy
.
.
10% off!
Image
backpack
go to bag
4. Links bring shoppers
directly to product
pages. Images as well.
.
Image
choose size
1 & 2. School name is
displayed twice to make
sure shoppers know
they’re in the right
place.
School Search
school uniform shopping list
2.0
The
Notes
5. When item from list is
added to bag, icon
shows up to let
shoppers know their
progress.
6. Icon shows up to let
shoppers know they
have the whole outfit
they need. Discount
also shows up to
encourage to buy it all
at once.
7. Non-essential items
included here for upsell.

6. sign in
boys
girls
school items
register
bag
sale
Search
X
1.0
Home ▶ Category
▶
Sub-category
▶
Johnny Appleseed Elementary
shopping list
Product
Product name
3.0
shirt
$10.00
In Stock
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin neque arcu, venenatis et
1 of 1
Image
tincidunt tempus, consectetur imperdiet justo. Nulla dignissim venenatis cursus. Ut commodo
massa in tellus vestibulum mollis tincidunt eu sapien. Nam eget sem sed lorem sodales
pellentesque sed eget velit. Donec nunc lacus, ultrices et consectetur quis, laoreet et quam.
Curabitur nec tellus vitae erat molestie ultricies.
1 of 1
Big Kid (size 7-20)
Image
Size
S
M
Little Kid (size 4-7)
L
XL 4.0
size
chart
Color blue
Quantity
1 0 of 1
Image
Image
Image
Reviews
Image
Price
Image
pants
$10.00
$10.00
In Stock
10% off when you buy a complete outfit
Wishlist
Add to bag
shopping list
Image 2.0
shorts
$10.00
In Stock
Guarantee
Fabric Care
check out now
Shipping Info
User name
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin neque arcu,
venenatis et tincidunt tempus, consectetur imperdiet justo. Nulla dignissim
venenatis cursus. Ut commodo massa in tellus vestibulum mollis tincidunt eu
sapien. Nam eget sem sed lorem sodales pellentesque sed eget velit. Donec nunc
lacus, ultrices et consectetur quis, laoreet et quam. Curabitur nec tellus vitae erat
molestie ultricies.
Related items
Notes
1. Breadcrumbs should be
displayed for all
products, by category.
2. Each product has
multiple product shots,
including shots on
models.
3. Adding item to bag
displays progress on
outfit list.
4. Selecting size chart
displays chart with a
transparent gray overlay
behind it.

7. sign in
boys
girls
school items
register
sale
Search
color
shirt
Image
size
white
edit
quantity
M
3.0
edit
1
2.0
price
total
$10.00
$10.00
update
1.0
shorts
Image
blue
M
edit
edit
2
$10.00
delete
save for later
$20.00
delete
save for later
update
subtotal
$30.00
checkout
saved for later
Notes
1. Items in bag can be
deleted or saved for
later. Saved items drop
to bottom of screen.
2. Update links are directly
below quantities.
bag
4.0
bag
3. Each item in bag can be
edited for size and color
(if available).
4. Images of clothes are
shown to reassure
customer they bought
the correct item.