2. UXID 4 P2 Presentation
Page 2 | Company Profile
Company Profile
Industry: Apparel / Fashion
Demo: Parents age 24-45, middle-upper
class
Sales Channel: E-commerce
Notes:
- Seasonal business
- Repeat business is typically annual
- Average order is ~$120
- Offers schools the option to curate their
own uniform pages with school requirements
3. UXID 4 P2 Presentation
Page 3 | Project Description
Project Description
The Challenge: Create a user experience for True Spirit, an e-commerce website
that sells uniforms for students.
The Deliverables:
- High-level user flow
- Sitemap
- Navigation schema
- Wireframe of product page
- User flow for checkout with wireframes of forms for each step
- Clickable prototype of wired screens
My Solution: Create wireframes that reflect a simple Pinterest style website where
product sorting and searching occurs dynamically on a single screen. Product views
and checkout process are in lightbox to minimize screens and ease user navigation.
4. UXID 4 P2 Presentation
Page 4 | Persona
Persona
Name: Jack Bauer
Age: 41
Marital Status: Single
Number of Children: 4
Occupation: Counter Terrorist Unit
About Jack:
Jack's kids live with their Mom because
Jack is usually off killing terrorists. When
Jack isn't off killing terrorists, he loves
spending time with his 4 kids, quadruplets.
Jack doesn't do retail and is moderately
tech savvy, but he's better at firing missiles
from drones than he is shopping on the web.
Jack also supports his kids financially,
including tuition and other school needs.
5. UXID 4 P2 Presentation
Page 5 | Sitemap
Sitemap
Entry Point
Lightbox
Page
Selectable Filters
Static on Page
Action
Legend
Exit Point
Home
Find School Girls
AUTO -
POPULATE IN
SEARCH BOX
Product View
Shopping Cart
Boys
Filter 1
Filter 2
Filter 3
Girls
Filter 1
Filter 2
Filter 3
Accessories
Filter 1
Filter 2
Filter 3
AccessoriesBoys
School Page
LEFT NAV
Track Order
Customer
Support
Cart GLOBAL NAV IN HEADER
Checkout
6. UXID 4 P2 Presentation
Page 6 | User Flow
User Flows
Entry Point
Lightbox
Page
Selectable Filters
Decision Point
Action
Legend
Exit Point
Home Product View
Add to
Cart
Select
Size
Select
Color
Returning
Customer
Guest
Checkout
Sign in
Shopping
Cart
Continue
Shopping
Find School School Page
Shipping Info Billing Info Confirmation
CHECKOUT FLOW
General / First Time User
7. UXID 4 P2 Presentation
Page 7 | Home
Home
1
2
34
5
6
1. Global navigation in header with
linking to customer support, tracking
orders, cart and checkout
2. Global search for products and
schools
3. Global navigation - boys, girls and
accessories will sort products
4. Find school opens up search bar in
lightbox. Search bar will auto-
populate with school names with type
5. Left navigation with selectable
filters that sort product page.
Categories collapse and expand to
expose sub-categories
6. Product images sort dynamically
(like Pinterest) with filter click or
selection. Images laid out in four
columns, however images can
overlap columns maintaining the
integrity of the grid
8. UXID 4 P2 Presentation
Page 8 | Product View
Product View
Product view open in lightbox
1. Tabbed toggle between product
name and product description
2. Toggle between images to view
different product angles
3. Big bold product price
4. Drop down menu with color option.
Dynamically changes product color in
product images when color is
selected. Defaults to the most
popular color
5. Big 'Add to Cart' call-to-action
(CTA) that should be in an on-brand
color that stands out.
1
2
3
4
5
9. UXID 4 P2 Presentation
Page 9 | Member Log In
Member Log In
Prior to viewing cart, user has option
to log into an existing account or
continue to cart as guest.
1. Text fields for log on credentials
2. Colored 'Sign In' CTA
3. Colored 'Guest Checkout' CTA
1
2
3
10. UXID 4 P2 Presentation
Page 10 | Shopping Cart
Shopping Cart
1. Continue shopping button returns
user to hope page, quantity of items
in cart is dynamically populated in top
navigation
2. Product summary including
thumbnail image, size and color
3. Text entry for quantity, update and
remove text buttons below price. Any
changes will dynamically change the
prices in the cart summary
1
2
3
4
11. UXID 4 P2 Presentation
Page 11 | Shipping Info
Shipping Info
1. Three step checkout progress
reflected on top. The step the user is
on in selected state by shading the
tab
2. Optional account creation
3. 'Next' CTA to continue to step two1
2
3
12. UXID 4 P2 Presentation
Page 12 | Billing Info
Billing Info
1. Drop down menu to select
payment method, if PayPal select,
screen changes to PayPal login
credential in payment method pane
2. Click 'Place Order' to complete
purchase and continue to
confirmation step
1
2
13. UXID 4 P2 Presentation
Page 13 | Confirmation
Confirmation
1. Social CTAs for following
2. Done or close window to exit
experience
1 2
14. UXID 4 P2 Presentation
Page 14 | Footer
Footer
Informational footer with quick links,
social CTAs and static payment
method icons
Help & Information
Find a School
Customer Support
Track Order
Careers
Contact
Stay in Touch!
PinInsta
Twit
ter
FB
Payment Methods
MC Visa AMEX
Disc PP
15. UXID 4 P2 Presentation
Page 15 | Thank You
THANK YOU
Robby Choate
robert.c.choate@gmail.com
Clickable Prototype on InVision: http://invis.io/D41WS1WQS
