trueSpirit design spec lissa doty v2
8
Design Specifications Prepared for: General Assembly's UX Design Immersive By: Lissa Doty Last update: Dec 5, 2013 Student Project. General Assembly UXDI Winter 2013 trueSpirit
Transcript of trueSpirit design spec lissa doty v2
Design Specifications
Prepared for: General Assembly's UX Design Immersive
By: Lissa DotyLast update: Dec 5, 2013
Student Project. General Assembly UXDI Winter 2013
trueSpirit
1.0 Home
2.0 Girls
2.1.Tops
2.2 Bottoms
2.3 Outerwear
2.4 Accessorie
s
3.0 Boys
3.1 Tops
3.2 Bottoms
3.3 Outerwear
3.4 Accessorie
s
4.0 School Spirit
4.1 iPhone case
4.2 Logo Hoodie
4.3 Logo Tshirt
4.4 Plush Toy
4.5 Backpack
5.0 Search
Sort
Size
Color
Sign In
6.0 Bag
6.1 Buy
6.2 Email
6.3 Edit
7.0 Footer
7.1 About Us
7.2 Customer Service
7.3 FAQ
7.4 Social Media
1.1 Find School
1.1.1 Results
1.1.1.1 School Page
Same search as
home
Sitemap
Navigation Schema
Tops
Girls Boys School Spirit Search Bag Footer
Tops
Formal ShirtsPolo
Shirts
T-Shirts
Tank Tops
Polo Shirts
Formal Shirts
T-Shirts
Tank Tops
Sweaters
Hoodies
Sweaters
Hoodies
About Us
Customer Service
FAQ
Social Media
iPhone CaseLogo
HoodieLogo T-Shirt
Plush Toy
Backpack
Results Buy
Edit
User Flow: Sarah Green, first time user
HOMEPAGESCHOOL LANDING
PAGE
First time user
Finds School SWEATER Searches for sweaters
Adds sweater to bag, shopsmore, views bag
BAG Signs up, creating a profile BAG
Enters email address for son, emails bag
BAG ON IPHONESon views bag
on iphone, editsitems, sends back
EDITED BAG Sarah views editedbag, then buys it CHECKOUT
Carrier 12:00 PM
Page Title
http://truespirit/email/8746325 Google
Cardigan SweaterRequired $45
Medium
School Clothing List
Product Description
Quantity 1
ADD
Wireframesiphone email
Notes
1
2
3
4
5
6
1. Swipe down to see the school's list of clothing. Required items arelisted first. All items are marked as either Required or Optional. All items are clickable, and when they are clicked, the Product page is displayed as it is here.
2. Users can give a thumbs up/down by clicking on the appropriate icon. This up/down info is displayed in the sender'sbag.
3. Swipe up to see a complete product description. Swipe downwhen you're done to make it disappear.
4. Recipient can change sizes and colors. Edited are reflectedin the sender's bag.
5. Swipe left/right to view the contents of the bag, one pieceat a time.
6. Recipients can add items.
SearchGirls Boys School Spirit
Wireframes
f
Home Page - find school
ABOUT US CUSTOMER SERVICE FAQS
CURATED COLLECTIONSClassic Prep
or, by school number:
SEARCH FOR YOUR SCHOOL
GO
By name of school:
or, by city and state:
SIGN IN
FEATURED ITEMS
POLO SHIRTS DRESS PANTS JACKETS
SIGN UP
FINDYOUR
SCHOOL
2
4
1
3
5
Notes1. Clicking on the trueSpiritlogo returns you to the home page.
2. Shopping bag, currently empty. Numbers will displayto the left of bag, indicatingnumber of items.
3. Header "floats" abovescrolling page.
4. Clicked tag has pulleddown School Search.
5. Links to social media.
SearchGirls Boys School Spirit
Wireframes Product Detail Page top half
Required
Cardigan Sweater
Price
Price
Cool Gear
Optional
Optional
• Our own soft blend of cotton and cashmere for warmth and coziness
• Machine washable• Classic style and comfort
Medium Size Chart
Added!
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.
Leather Belt
Deluxe Backpack
$45
$55
$15
Boys
Home / Boys / Tops / Sweaters
+ Add a child You are shopping for a child in 9th grade Shopping List
SIGN UP!SIGN IN 15
63
4
12
8
7
Notes1. Clicking here will promptparents to enter schoolinfo for another child.
2. School info bar "floats"with header as page scrolls.
3. Info on the child for whom the parent is currently shopping.
4. Parents are prompted to Sign Up when they addan item to the Shopping Bag.
5. Indicates the number ofitems in the Shopping Bag.
6. School clothing list forthe current student.
7. Image of the back ofthe sweater.
8. Indicates that an item has been added to theShopping Bag.
SearchGirls Boys School Spirit
Wireframes Billing & Shipping
+ Add a child You are shopping for a child in 9th grade Shopping List
ACCOUNT
Sarah Green
Billing Info
1432 Magnolia
Address Line 2
Zip CodeCity
Phone Number
AL
Note / Special Instructions
CONTINUE
Order Summary
Cardigan Sweater
Long Sleeved Polo
Item Quantity
Long Sleeved Polo
Price
Medium
Medium
Medium
1
1
1
$45.00
$19.00
$19.00
x
x
x
SUBTOTAL
TAX
SHIPPING
$0.00$83.00
$0.00
GRAND TOTAL $83.00
3
edit
edit
edit
Notes
34
2
6
1 5
1. Name and email addressautofilled from account info.
2. Border color indicateswhere customer is typing.
3. Customer can changeQuantity by clicking here.
4. Clicking on this X willdelete them item.
5. Clicking on Edit allowsthe customer to changethe Color, Size, and Quantity of the item.
6. Clicking here takes the customer to the next stageof the the billing process, if everything is correct.
