UXID 4 P2 Presentation - True Spirit E-Commerce WebsiteFri Dec 19 2014

Robby Choate

UXID 4 P2 PresentationPage 2 | Company Profile

Company Profile

Industry: Apparel / FashionDemo: Parents age 24-45, middle-upper classSales 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

UXID 4 P2 PresentationPage 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.

UXID 4 P2 PresentationPage 4 | Persona

Persona

Name: Jack BauerAge: 41Marital Status: SingleNumber of Children: 4Occupation: 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.

UXID 4 P2 PresentationPage 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

BoysFilter 1Filter 2Filter 3

GirlsFilter 1Filter 2Filter 3

AccessoriesFilter 1Filter 2Filter 3

AccessoriesBoys

School Page

LEFT NAV

Track OrderCustomer Support Cart GLOBAL NAV IN HEADER

Checkout

UXID 4 P2 PresentationPage 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

UXID 4 P2 PresentationPage 7 | Home

Home

1

2

345

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

UXID 4 P2 PresentationPage 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

23

4

5

UXID 4 P2 PresentationPage 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

UXID 4 P2 PresentationPage 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

UXID 4 P2 PresentationPage 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

UXID 4 P2 PresentationPage 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

UXID 4 P2 PresentationPage 13 | Confirmation

Confirmation

1. Social CTAs for following

2. Done or close window to exit experience

1 2

UXID 4 P2 PresentationPage 14 | Footer

Footer

Informational footer with quick links, social CTAs and static payment method icons

Help & InformationFind a School

Customer Support

Track Order

Careers

Contact

Stay in Touch!

PinInstaTwitterFB

Payment Methods

MC Visa AMEX

Disc PP

UXID 4 P2 PresentationPage 15 | Thank You

THANK YOURobby Choate

robert.c.choate@gmail.comClickable Prototype on InVision: http://invis.io/D41WS1WQS