e-commerce mobile web application
Post on 19-May-2015
194 Views
Preview:
DESCRIPTION
TRANSCRIPT
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.
Monday, 27 January 14
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
Monday, 27 January 14
PERSONAS MARKET RESEARCH
Monday, 27 January 14
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
Monday, 27 January 14
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
Monday, 27 January 14
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
Monday, 27 January 14
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
Monday, 27 January 14
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
Monday, 27 January 14
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
Monday, 27 January 14
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
Monday, 27 January 14
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
Monday, 27 January 14
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
Easy exchanges Free shipping Free returns
Sign inAbout us
Wishlist
For SchoolsFor ParentsBags n stuffGirlsTabBoysHome
Contact us (02) 9456 7899
Home Boys
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
Home->Boys->Collections->Essentials
For SchoolsFor ParentsBags n stuffGirlsTabBoysHome
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
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
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
For SchoolsFor ParentsBags n stuffGirlsTabBoysHome
Contact us (02) 9456 7899
1
1 When customer adds/removes to cart, the “Shopping bag” populates appropriately
Monday, 27 January 14
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
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
Our ServiceFree shipping in AustraliaFree returns in Australia
Easy exchanges
Secure and safe Contact usxxxxxxxxxxxxxx
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
Monday, 27 January 14
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
Monday, 27 January 14
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
Monday, 27 January 14
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.
Monday, 27 January 14
top related