uxdi at ga: project 2/truespirit ecommerce desktop website

eCommerce Desktop websiteProject 2

uxpolas.tumblr.com

Description

TrueSpirit//eCommerce Desktop website Project 2

For a very demanding market of schools and parents who are expecting to find the right clothing for their children uniforms, True Spirit is a new and very specialized eCommerce retailer that brings fashionable and fresh looks.

User Personas


“Clothing should be reasonably priced.”

“I want our family to fit in.”

“I want to make sure the parents’ needs are met, alongside admin. goals.”

User Goals

save money

feel comfortable

e!ciency

save money

feel comfortable

e!ciency

fit in

feel comfortable

e!ciency


John

Jess

Sarah

save money

User Goals

e!ciency

feel comfortable

fit in 10%

30%

30%

30%

Brand Goals Business Goals

be fashionable/ aspirational

price oriented

communicative service

be pragmatic

sell more

show a clear path

%


Ideation Process/1st Iteration

Card Sorting



Sitemap



Concept-modeling the User



Sitemap vs User Flow


Ideation Process/2nd Iteration

Wireframe vs Sitemap vs User Flow


Ideation Process/3nd Iteration

Wireframe vs User Flow


Ideation Process/Steal Peers’ Ideas

Wireframes


Ideation Process/Omnigra"e Phase

Omnigra"e Wireframes


Ideation Process/Usability Testing

Two mellow girls


Ideation Process/Usability Testing

Yeah, right!


Sitemap/Primary Navigation

TrueSpirit//eCommerce Desktop website

Home

School Merchan.

Outerwear

Activewear

Outfits

SweatersPolo Shirts

Formal ShirtsTank TopsHoodiesT-ShirtsJackets

PantsSkirts

LeggingsBeltsSocks

JacketsGloves

GymshortsHeadbands

HoodiesT-ShirtsSocks

Tank Tops

BeltsSocksGloves

BackpacksHeadbands

Outfits

Accessories

Girls

Tops

Bottoms

Outerwear

Activewear

Outfits

SweatersPolo Shirts


PantsBeltsSocks

JacketsGloves

GymshortsHeadbands

HoodiesT-ShirtsSocks

Tank Tops

BeltsSocksGloves

BackpacksHeadbands

Outfits

Accessories

Boys

Tops

Bottoms

Backpacks

School Code

Log In

Logo T-Shirts

Logo Hoodies

iPhone Case

School Mascot

School Code

Log In Search Bag Help

Contact #

Email

FAQ

Live Chat

On

OffPersonalized content for the specificschool’s dress code

SortSizeColorSaleView

SortSizeColor

SaleView

ProfileProfile

Checkout

Buy


Filtered content

Filtered content pulled out fromthe actual content

Primary navigation

Category

Shipping

Resturns

Sh. Policy

New Arrivals

GirlsBoys New Arrivals

BackpacksSchool Mer.

New Arrivals

GirlsBoys

BackpacksSchool Mer.




SortSizeColor

SaleView

SortSizeColor

SaleView




SortSizeColor

SaleView


Project 2

Sitemap/Secondary Navigation

TrueSpirit//eCommerce Desktop website

Twitter

Home

Follow us

Facebook

Company Policy Contact

Primary navigation

Category

Services

Youtube

Careers

About us

News Room

Security

Privacy

Shipping

Embroidery

Returns

Glossary

Email subscription

Sitemap

Shipping

Embroidery

Shipping

Embroidery

FAQ

Email

Phone #

Life chat

Project 2

John’s Flow


Start

2.0Girls

1.0Home

3.0Tops

3.0Polo Shirts

3.0White

3.0Bottoms

3.0Pants

3.0Blue

4.0Add to bag

4.0Bag

5.0Checkout

5.0Buy

End

5.0Profile

John’s Checkout Flow


Start

Checkout

No

Yes2.0

Continue as guest

2.0Keep Shopping

Create an account

Yes

No

3.0Shipping

3.0Payment

3.0Place Order

5.0Password

4.0Confirmation

End

1.0View Bag

Profile

Fold

(SEASONPROMOTION)

(SAVINGSPROMOTION)

(GENERAL NEW ARRIVALS BANNER)

SweatersPolo ShirtsFormal ShirtsTank TopsHoodiesT-Shirts

TOPS SORT SIZE COLOR SALE

Jackets

PantsSkirtsLeggingsBeltsSocks

BOTTOMS SORT SIZE COLOR SALE

JacketsGloves

OUTERWEAR SORT SIZE COLOR SALE

ACTIVEWEAR SORT SIZE COLOR SALE

GymshortsHeadbandsHoodiesT-ShirtsSocksTank Tops

PRODUCT NAMEPRODUCT DETAIL X.XX$




PRODUCT NPRODUCT DET

211 222 3 5 6 ...4

XX






211 222 3 5 6 ...4

XX






211 222 3 5 6 ...4

XX






211 222 3 5 6 ...4

XX

OUTFITS SORT SIZE COLOR SALE

Select a State

Select a City

FIND YOUR SCHOOL EASY

School Name

SUBMIT

School Code

SUBMIT

OR

GIRLS BOYS BACKPACKS School Code GO FIND MY SCHOOL SearchSCHOOL SPIRIT

SHIPPING LOG INHELP 0

* State

* City

* School Name (6 characters max.)

* School Code

BOYSGIRLSALL

BOYSGIRLSALL

BOYSGIRLSALL

BOYSGIRLSALL

John’s Flow/Home Wireframe


Fold

(SEASONPROMOTION)

(SAVINGSPROMOTION)


SweatersPolo ShirtsFormal ShirtsTank TopsHoodiesT-Shirts

TOPS SORT SIZE COLOR SALE

Jackets



JacketsGloves









211 222 3 5 6 ...4

XX






211 222 3 5 6 ...4

XX






211 222 3 5 6 ...4

XX






211 222 3 5 6 ...4

XX


Select a State

Select a City

FIND YOUR SCHOOL EASY

School Name

SUBMIT

School Code

SUBMIT

OR

BOYS BACKPACKS School Code GO FIND MY SCHOOL SearchSCHOOL SPIRIT

SHIPPING LOG INHELP 0

* State

* City


* School Code

TOPS BOTTOMSJacketsGloves

OUTERWEAR ACTIVEWEAROutfit 1Outfit 2Outfit 3Outfit 4Outfit 5

OUTFITSBeltsSocksGlovesBackpacksHeadbands

ACCESSORIESBelts

Formal ShirtsLeggingsGlovesT-Shirts

NEW2T-4T4-6X/77-1416-20

SIZESPantsSkirtsLeggingsBeltsSocks

Sweaters


Tank TopsSocksT-ShirtsHoodiesHeadbandsGymshorts

Polo Shirts

GIRLS

Polo Shirts

BOYSGIRLSALL

BOYSGIRLSALL

BOYSGIRLSALL

BOYSGIRLSALL



ACCESS TO PRODUCTS:

•“Girls” drop down menu to access to “Polo Shirts” subcategory.



ACCESS TO PRODUCTS:

•“Girls” drop down menu to access to “Polo Shirts” subcategory.

•“Home Page” quick thumbnail gallery formed by collapsable categories (local navigation).

(SEASONPROMOTION)

(SAVINGSPROMOTION)


Sweaters

Formal ShirtsTank TopsHoodiesT-Shirts

TOPS SORT SIZE SALE

Jackets



JacketsGloves









211 222 3 5 6 ...4

XX






211 222 3 5 6 ...4

XX






211 222 3 5 6 ...4

XX






211 222 3 5 6 ...4

XX


Select a State

Select a City

School Name

SUBMIT

School Code

SUBMIT

OR

* State

* City


* School Code

BOYSGIRLSALL

BOYSGIRLSALL

BOYSGIRLSALL

BOYSGIRLSALL

Polo ShirtsColor Name

Color Name

Color Name

Color Name

Color Name

Color Name

COLOR

SHIPPING LOG INHELPGIRLS BOYS BACKPACKS School GO MY SCHOOL SearchSCHOOL SPIRIT 0

White

Fold

John’s Flow/Gallery Wireframe


ACCURATE SEARCH:

•By filters.

(GIRLS)

Sweaters



Polo Shirts

Fold











TOPS SORT SIZE SALE

BOTTOMS

OUTERWEAR

ACTIVEWEAR

OUTFITS

ACCESSORIES

CONTACTSERVICESPOLICYCOMPANYFOLLOW US

Color Name

Color Name

Color Name

Color Name

Color Name

Color Name

White

COLOR

John’s Flow/Gallery Wireframe


ACCURATE SEARCH:

•By filters.

•By alterable breadcrumbs.(GIRLS)

Sweaters



Polo Shirts

Fold


POLO SHIRTPRODUCT DETAIL X.XX$




TOPS SORT SIZE SALE

BOTTOMS

OUTERWEAR

ACTIVEWEAR

OUTFITS

ACCESSORIES


White COLOR

John’s Flow/Product Detail WF


BROWSING TOOL:

•By viewing the items John will get the record of these products through his journey.

•First users get guidance by cookies that will lead them to get used to the navigation.

BOTTOMS

OUTERWEAR

ACTIVEWEAR

OUTFITS

ACCESSORIES


(rating score)

SAVE FOR LATER ADD TO BAGf



PANTSPRODUCT DETAIL X.XX$


SEE MATCHES

$X.XXNEW

POLO SHIRTCompletely impact multifunctional and wireless supply chains. Dynamically engage business meta-services.

Girls/ Tops/ Product Detail/

(rating score)

COLOR

SIZE [ SIZE CHART ]

2T-4T 4-6X/7 7-14 16-20

QUANTITY1

SHIPPING LOG INHELPGIRLS BOYS BACKPACKS School GO MY SCHOOL SearchSCHOOL SPIRIT

REVIEWS FABRIC & CARE SIZE CHART GUARANTEE

1BROWSED

0

JUST BROWSING MENUADD, REMOVE, COMPARE, SEE TOTAL PRICE…FEEL FREE!

ADD ITEMS FROM HERE AND KEEP BROWSING

(GIRLS)

BROWSING RECORD

1

Sweaters


Polo Shirts






TOPS SORT SIZE SALE White ADD MORE ITEMS AND KEEP BROWSING

SAVE ADD TO BAG

BROWSED ITEM

COLOR

Fold

John’s Flow/Product Detail WF


BROWSING TOOL:



BOTTOMS

OUTERWEAR

Sweaters


Polo Shirts






TOPS SORT SIZE SALE White

SAVE ADD TO BAG

BROWSED ITEM

(rating score)

ADD TO BAG

XX.XX$TOTAL

(rating score)

f

$X.XXPANTSCompletely impact multifunctional and wireless supply chains. Dynamically engage business meta-services.

Girls/ Bottoms/ Product Detail/

(rating score)

COLOR

SIZE [ SIZE CHART ]

2T-4T 4-6X/7 7-14 16-20

QUANTITY1


(GIRLS)

f









SEE MATCHES

$X.XXNEW



(rating score)

COLOR

SIZE [ SIZE CHART ]

2T-4T 4-6X/7 7-14 16-20

QUANTITY1


BROWSED0


JUST BROWSING MENU

ADD TO BAG

Fold

ADD ALL TO BAG SAVE FOR LATER 2

SAVE FOR LATER 1

SAVE FOR LATER 1

SkirtsLeggingsBeltsSocks









SORT SIZE SALE

COLOR

COLOR

Pants

SAVE ADD TO BAG

BROWSED ITEM

John’s Flow/Saved Product WF


BROWSING TOOL:



•By saving the viewed items, or scrolling down, the user will experience that the “Browsing Menu” collapses, letting him see a quick view of his record while he continues shopping.

ACTIVEWEAR

OUTFITS

ACCESSORIES


BOTTOMS

Sweaters


Polo Shirts






TOPS SORT SIZE SALE White

SAVED ADD TO BAG

SAVED ITEM

(GIRLS)


SkirtsLeggingsBeltsSocks









SORT SIZE SALE

COLOR

COLOR

Pants

2

SAVED ADD TO BAG

SAVED ITEM

XX.XX$TOTAL

PRODUCT NAMEPRODUCT DETAIL

COLOR SIZE

7-14 1QTY

ADD TO BAGVIEWSAVED


COLOR SIZE

7-14 1QTY

ADD TO BAGVIEW SAVED

VIEW SAVED ADD ALL TO BAGVIEW SAVEDSAVED

SAVED

SAVED

Fold

OUTERWEAR

John’s Flow/Saved Product Detail View WF


BROWSING TOOL:



•By saving the viewed items, or scrolling down, the user will experience that the “Browsing Menu” collapses, letting him see a quick view of his record while he continues shopping.

•He can always get back to a full detailed product view by going to the “View Saved” menu and make a more serious decision of adding the items to the bag.

(rating score)

ADD TO BAG

XX.XX$TOTAL

(rating score)

f


f









SEE MATCHES

$X.XXNEW



(rating score)

COLOR

SIZE [ SIZE CHART ]

2T-4T 4-6X/7 7-14 16-20

QUANTITY1

SHIPPING LOG INHELPBOYS BACKPACKS School GO MY SCHOOL SearchSCHOOL SPIRIT 0


SAVED ITEMS

ADD TO BAG

Fold

ADD ALL TO BAG

2

KEEP BROWSING?

$X.XXPANTSCompletely impact multifunctional and wireless supply chains. Dynamically engage business meta-services.

Girls/ Bottoms/ Product Detail/

(rating score)

COLOR

SIZE [ SIZE CHART ]

2T-4T 4-6X/7 7-14 16-20

QUANTITY1


GIRLS

John’s Flow/Bag Wireframe


Fold

XX.XX$TOTALCHECKOUT


ITEM COLOR

COLOR NAME

SIZE

7-14 1

QTY TOTAL

X.XX$

REMOVE


COLOR NAME

7-14 1 X.XX$

TAXX.XX$

SUBTOTALX.XX$

TAXX.XX$

SUBTOTALX.XX$

ADD +

ADD +

(2)

RETURNS

SHIPPING

TERMS + CONDITIONS

HELP

APPLYCupon Code(COUPONS PROMOTION)

*Shipping not included



BROWSED2

BAG

John’s Flow/Checkout Wireframe


Fold

NEW CUSTOMER

CONTINUE AS A GUEST

Proceed to checkout and you'll have the opportunity to create a personal account later, if you wish to do so.

RETURNING COSTUMER

LOG IN

Log in too speed up the checkout process.

Email AddressEmail Address (Required)

PasswordPassword (Required)

Forgot your password? Click here

SECURE CKECKOUTCERTIFIED

CHECKOUT

CHECKOUT FAQs TEL.:XXX-XXX-XXXXQUESTIONS? 2

John’s Flow/Checkout/Shipping WF


Fold

CONTINUE

Company Name

Company Name (Required)

Address

Address 1 (Required)

Address

Address 2

City

City (Required)

ENTER SHIPPING ADDRESS

Please Select

State (Required)

First Name

FirstName (Required)

Last Name

Last Name (Required)

Zip Code

Zip Code (Required)

Month

Day Phone (Required) Evening Phone (Required)

Day Year Month Day Year

ORDER SUMMARY

SUBTOTAL

TAX

ORDER TOTAL X.XX$Shipping & tax Details

X.XX$

X.XX$

X.XX$


2. PAYMENT1. SHIPPING 3. REVIEW & PLACE ORDER2. PAYMENT1. SHIPPING


CHECKOUT/ SHIPPING/ ADDRESS

SHIPPINGEstimate

John’s Flow/Checkout/Shipping WF


Fold

ORDER SUMMARY

SUBTOTAL

TAX


X.XX$

X.XX$

X.XX$



SHIPPING TO

John Newman2345 Menahan St.Brooklyn, NY 11237

EDIT OR CHANGE ADDRESS

ITEMS


COLOR SIZE

7-14 1QTY COST

X.XX$


COLOR SIZE

7-14 1QTY COST

X.XX$

SHIPPING METHODSTANDARD

EXPRESS

ARRIVES 3/21 − 3/23

Shipping Details

CONTINUEBACK


CHECKOUT/ SHIPPING/ DELIVERY OPTIONS

SHIPPINGEstimate

ARRIVES 3/19 Sharp!

$X.XX

$X.XX

John’s Flow/Checkout/Payment WF


Fold

ORDER SUMMARY

SUBTOTAL

TAX


X.XX$

X.XX$

X.XX$



ENTER BILLING ADDRESSJohn Newman2345 Menahan St.Brooklyn, NY 11237

DIFFERENT FROM SHIPPING ADDRESS

Card Number

Card Number (Required)

Security Code

Security Code (Required)

Expires on (Required)

Month

Card Type

Card Type (Required)

PAYMENT INFORMATION

Year

What is this?

Name on Card

Name on Card (Required)

CONTINUEBACK

Email Address

Email Address (Required)


CHECKOUT/ PAYMENT

SHIPPINGStandard

John’s Flow/Checkout/Place Order WF


FoldCONTACTSERVICESPOLICYCOMPANYFOLLOW US

ORDER SUMMARY

SUBTOTAL

TAX


X.XX$

X.XX$

X.XX$



PLACE ORDER

SHIPPING ADDRESSJohn Newman2345 Menahan St.Brooklyn, NY 11237

Edit

PAYMENT EditVisa XXXXXXXXXXXXXX5555Expires 2/12

REVIEW & PLACE YOUR ORDERClicking Place Your Order will finalize your order.

SHIPPING TO


ITEMS


COLOR SIZE

7-14 1QTY COST

X.XX$


COLOR SIZE

7-14 1QTY COST

X.XX$

STANDARD X.XX$

ARRIVES 3/21 − 3/23

REMOVE

REMOVE

Edit DELIVERY Edit

CHECKOUT/ REVIEW & PLACE YOUR ORDER


SHIPPINGStandard

XX.XX$ ORDER TOTAL


John’s Flow/Checkout/Confirmation WF

Fold

THANK YOU FOR YOUR ORDER!

Save your information for next time

Password

Create Password (Required)

Password

Verify Password (Required)

(4-18 characters)

CREATE ACCOUNT

PRINT RECEIPT







Popular items based on your order

Order number: XXXXXXX

You’ll receive an email confirmation to [email protected] total: XX.XX$


DETAILED ORDER RECEIPT

RETURNS POLICY

QUESTIONS?

Call us at XXX-XXX-XXXX orEmail us

SHIPPING TO DELIVERY

STANDARD X.XX$

ARRIVES 3/21 − 3/23

PAYMENTVisa Ending in 5555Expires 2/12John Newman


ORDER CONFIRMATION

ITEMS


COLOR SIZE

7-14 1QTY COST

X.XX$


COLOR SIZE

7-14 1QTY COST

X.XX$

XX.XX$ ORDER TOTAL

Thanx for your kind attention folks!

uxpolas.tumblr.com

uxdi at ga: project 2/truespirit ecommerce desktop website

Design

school easy

view bagcheckoutyes2

user personas

filtered content

xxproduct n product

submitor school code

actual content

formal shirts7