e-commerce mobile web application

CASE STUDYECOMMERCE MOBILE WEB APPLICATION

UX DESIGN BY: SUHASINI VEMPATI

STUDENT PROJECT 2UXDI, 2014

GENERAL ASSEMB.LY

Monday, 27 January 14

ABOUT THE PRODUCT

TrueSpirit is a new internet retailer for schools and parents who want a modern school uniform

for K-12 children. It offers updated uniform fashion including pants for girls and zip-up hoodies,

provides a “must-haves” checklist from the school’s administrator for each school year, and

recommends accessories allowed by the school’s dress code. Unlike traditional suppliers, True

Spirit encourages visitors to express their tastes—with some limits.


PROJECT BRIEF- Design a mobile website optimised for iPad, for True Spirit’s online store- Produce a clickable prototype in Omnigraffle that demonstrates the key user’s journey from initial entry to the site and a checkout process- Document high-level research and findings, design spec and interaction for key screens


PERSONAS MARKET RESEARCH


R E S E A R C HMethod 1- PersonaWe studied the needs and goals of 3 personasSarah- a busy mum who is new to uniformsJohn- a single dad with a high-school age daughterJess- school admin tasked with finding online uniform retailers for parents


Method 2- Competitive analysis

To understand the process involved in online shopping, I studied many e-commerce sites- Net-a-porter, Boyausaur, e-bay to name a few and a few online uniform sites like Lands end, Made for school.

This exercise was also detrimental in understanding the UI patterns of an e-commerce website

Method 3- Research best practice e-comm for web and touchTo understand the considerations of touch interface and how it differs from website


Method 4- Card Sorting

Card Sorting helped us to get an idea of the IA for our website

Method 5- Site maps

Once the IA for our site was in place, we made a site map. This determined where our elements would live


Method 6- User FlowsJOHNJohn being an experienced online shopper felt like a Returning Customer

Home screen Express checkoutProduct listing Adds to cart

Signs up for newsletter

Signs In

Views

BrowseProduct page

Selects

Gives True Spirit a great review

Shipping and returns policy

Order confirmation

User flow for John: A returning customer

Proceeds to checkoutHome screen Express checkoutProduct listing Adds to cart

Signs up for newsletter

Signs In

Views

BrowseProduct page

Selects

Gives True Spirit a great review

Shipping and returns policy

Order confirmation

User flow for John: A returning customer

Proceeds to checkout


User Flow for SARAHSarah felt like a New Customer

Based on this study of our personas, we were able to sketch out their journey through our website, from entry to checkout

Sarah User Flow: New Customerhttp://generalapparelwest.com/products/shirts/001

School essentials Product listing

Product page

Wishlist

Adds to cart CheckoutGuest

checkout

Billing and shipping

Order confirmation

Payments

Signs up for a/cBrowse

Site link provided by school admin

Sarah- New customer

A busy mother who is new to private schools and their uniforms. She likes to save items while shopping and buy them at the end of day

“I want my family to fit in”

Motivations - To be provided a clear way to find son’s required clothing- Education about care, comfort and fit- Upfront clarity on returns


R E S E A R C H F I N D I N G SBased on the many research methods we worked on, we sketched and identified the target customer’s pain points and goals.

Sarah- As she is new to uniforms, she would prefer all the essentials in a bundleJohn- Experienced and dad to a teenage daughter, he may want to buy specific items


U S E R S C E N A R I O S

Finding an individual itemExpress Checkout

Finding a school “Essentials” uniform product listingNew Customer Checkout


S K E T C H E S - P E R S O N A L A RT I FA C T

Keeping our personas close and their user flows we all went away to make our versions of the website.

I chose Sarah’s persona to inspire my sketches and wireframes


W I R E F R A M E S - P E R S O N A L A RT I FA C T

Our ServiceFree shipping in AustraliaFree returns in Australia

Easy exchanges

Secure and safe Contact usxxxxxxxxxxxxxx

Easy exchanges Free shipping Free returns

Sign inAbout us

Wishlist Easy exchanges Free shipping Free returns

Sign inAbout us

Wishlist

For SchoolsFor ParentsBags n stuffGirlsHome

Contact us (02) 9456 7899

Home

Find your school

Proud partners of various schools

Grammar’sSchool

St.IvesSchool

Aidan’s AnglicanSchool

St.John’sSchool

Epping HeightsSchool

James RuseSchool


Sign inAbout us

Wishlist

For SchoolsFor ParentsBags n stuffGirlsTabBoysHome

Contact us (02) 9456 7899

Home Boys


Easy exchanges



Sign inAbout us


Sign inAbout us

Wishlist


Contact us (02) 9456 7899

Home

Home->Boys->Collections->Essentials


Product info Product info

Product info Product info

True Spirit HomeBoys

Tops

Bottoms

Collections

Accessories

Tops

GirlsAccessories

Refine BySize

Colour

Qty

School selection

Essentials for St.Lukes

Contact us (02) 9456 7899


Easy exchanges



Sign inAbout us


Sign inAbout us

Wishlist


Contact us (02) 9456 7899

Home

Product Info Care Reviews

Pack includes

PriceColour

SizeQty

Add to cart

Product Title

Related Recommended

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

Home->Boys->Collections->Essentials


Contact us (02) 9456 7899

1

1 When customer adds/removes to cart, the “Shopping bag” populates appropriately


Returning customer

text

textPassword

New customer

Account Shipping Payment Thank you

text inputEmailEmail

Sign in

Checkout as guest

Back

Billing and shipping address

Full Name

CityAddress

Country

Post/Zip code

text

text

text

text

Order Summary

Place Order

GuestAccount

Shipping Payment Thank you

2

Email

text

Ship to a different address

State

Payment

Order confirmation

Sub total: $

Thank you

1

2

3

4

Need help?

1

1 We need your email to send you order confirmation


Easy exchanges


Please check you email inbox shortly, a confirmation is on its way

Thank you for your purchase. We appreciate it

Home

1 Item added

Product titlePriceQty

Continue shopping Checkout

Shopping cart popover1

1 Displays when customer adds to cart from the Product page


G R O U P D E S I G N G O A L

Findings

Our team created individual wireframes that were optimised for iPad while keeping the in mind...

We needed to simplify the messaging and flow for a truly responsive mobile web-experience.

Based off our personas, the design needed to be clear and simple to suit users of various abilities, whilst still being informative and optimised for mobile web.

-We all came together and identified the elements to go into a clickable prototype using Omnigraffle. -We scribed for each other.-We tested on iPad

T E S T I N G


S U M M A RY

As a team- Research methods suitable for e-commerce site- The site we designed catered to a Returning Customer and express checkout- Our product Core Experience enables busy parents to find a single item and check-out quickly AND find a selection of items required by child’s school and check-out easily on an iPad.- Created a clickable prototype created in Omnigraffle and a Design Spec document consisting of Sitemap, Navigation Schema and User Flows

My individual case study- Design with New Customer in mind- Personal artifacts include sketches and wireframes

T H A N K Y O U


T E S T I N G R E S U LT S

User testing tasks1. You are buying a polo shirt for your daughter. Show me how you would go about it2. You are a new customer. Take me through your checkout process3. You are a returning customer. Take me through your checkout process

A few findings...- 4 out of 5 participants used the navigation on the Homepage to go to the product page- One participant could not see the difference between the Sign up and Guest checkout as

he felt he would have given his details anyway- Search bar double-up, un-necessary- One participant thought that the Order summary meant Order confirmation. - 2 out of 5 preferred Guest Checkout even though they were returning customers

Recommendations were flagged for future iterations.


e-commerce mobile web application

Design

e t c h e s p e r s

modern school uniform

parentsfor schools

school year

new customer http

r e f r

schoolsfor schools

schools administrator