unicorn toy shop ux documentation

14
Project: E-Commerce Website Client: The Unicorn Kids Shop Team: Ayanna Seals, Neill Chua, Nirbhay Shah, & Sriya Sarkar

Upload: ayanna-seals

Post on 26-Jun-2015

210 views

Category:

Design


7 download

DESCRIPTION

Interactive Prototype: http://chfcxr.axshare.com/home.html User Testing Videos: http://screencast.com/t/KETLjnpo http://screencast.com/t/rmJGeXuvch http://screencast.com/t/z1BXuO0RMRH

TRANSCRIPT

Page 1: Unicorn Toy Shop UX Documentation

Project:

E-Commerce WebsiteClient:

The Unicorn Kids ShopTeam: Ayanna Seals, Neill Chua, Nirbhay Shah, & Sriya Sarkar

Page 2: Unicorn Toy Shop UX Documentation

Contents

Overview

Cardsorting

Sitemap

User Flows

Wireframes

Interactive Prototype

Usability Studies

Page 3: Unicorn Toy Shop UX Documentation

Overview and Business Goals

The Unicorn Kids Shop is an online retailer of innovative learning kits for kids. It was formerly an online retailer that sold all types of DIY kits, but itnow wants to focus it’s inventory on technology and electronics products geared towards kids ages 4 - 15. The goal for The Uni-corn Toy Shop is to become the #1 resource for parents that want to incorporate hands on STEAM (Science, Technology, Engineering, Math, Art + Design) education into their kids ev-eryday learning experience. The brand of The Unicorn Kids Shop celebrates learning while allowing kids to experiment and play with technology. The new website will re�ect the STEAM focused Philosophy of The Unicorn Kids Shop by featuring new, innovativeproducts, while at the same time maintaining a fun and creative vibe. The new website should inspire parents to spend money and feel like they made a good investment on a toy that will give the gift of learning.

Deliverables

Sitemap, User Flows, Wireframes, Interactive Prototype

Tools

conceptcodify.com, Adobe Illustrator & Axure RP

Page 4: Unicorn Toy Shop UX Documentation

Card Sorting

*Using data gathered from usability testing, this table outlines the features that are most important to include on the website.

Page 5: Unicorn Toy Shop UX Documentation

Home

Site Map

Shop Learn

Search by Category

RoboticsMicrocontrollers

Projections

BasicIntermediate

Advanced

Space/AeronauticsNature

Gift Certi�cate

Search by Di�culty

Search by Price

ArduinoRasberry PiLittle Bits

Search by Brand

Best Selling

Shopping Cart

CheckoutContact Us

Login/Register

Forgot Password

New Arrivals Success Stories

Tutorials

Sale

Contact Info

About Us

FAQ

Subscribe

Shipping & Return

All Products

Replacement Parts

Page 6: Unicorn Toy Shop UX Documentation

Bev

Scenario: Bev visits the site for the �rst time and is looking for a birthday gift for her grandson

Persona 1: Bev73 Year Old GrandmotherCares about being a hip-grandmother

“I don’t want my grandkids to remember me as an old senile granny!”

Bev is the proud grandmother of 12 grandchildren that are all under the age of nine. Bev is concerned that there are too many digital distractions for her grandchildren and they are becoming “less smart” than they could be. Instead of telling her own children to turn o� the video games, or shut down the TV, Bev has decided to take the distraction problem into her own hands. She will only buy toys that are high tech, hands on, and educational. She also wants to be the cool grandmother that knows about technology.

Bev’s Go-to Brands: Nintendo, Fisher Price, Lego, Barbie

Bev’s Channels: Her daughters desktop iMac or her daughters iPad

What she needs from an online store:

- announcements about the latest high tech toy - trust that if she puts her credit card in that she will not be getting scammed - �nding a sale, because she likes deals! - she needs it to be an intelligent experience, the internet makes her feel smart and young

Pain Points:

- menus are always confusing - she can’t �gure out how to search for a product - she doesn’t like how small the images and the text appear on most websites - she wants to know the weight and dimension of all the products - back buttons vs. the browser back button is a hard concept for her to grasp - sharing is not a concept she gets

Browses New Arrivals on Shop Page

also �lters results by di�culty level

Enters site using urlBrowses Homepage

Checkout PageEnters checkout information

Con�rmation Page

Clicks “Shop”

Adds ProductTo Cart

Clicks“Checkout”Exits Site

Personas & User Flows

Page 7: Unicorn Toy Shop UX Documentation

Charlie

Clicks on a Product

Clicks “Shop”

Clicks on a Product

Sets �lters toNature &

Intermediate

Exits Site

Adds ProductTo Cart

ClicksShopping Cart

Icon

Selects “Checkout” from

Dropdown Menu

Checkout PageEnters checkout information& request s reciept via email

Con�rmation Page

Sets �lters toNature & Advanced

Enters site through GoogleBrowses Homepage

Product Quick Viewreads skills learned &

reviews

Product Quick Viewreads skills learned &

reviews

Scenario: Charlie has been to the site before and needs to �nd a gift for his niece who likes bugs.

Persona 2: Charlie27 Year Old Uncle Cares about DIY learning “I made my �rst million at 21, it is OK to skip college, just DIY your educa-tion! School Sucks!”

Charlie is the youngest of 5 kids from California. He moved to NYC when he was 18 to attend Parsons for Product Design and started teaching himself how to code in html and java. At 20 he quit school and at 21 he sold his �rst company, an online dating service, for 30 million. He tries to buy the most interesting DIY tech related gift he can �nd.

What she needs from an online store:

- something that will work on all devices - product reviews - simple and clean checkout system - sorting feature that sorts by the amount of knowledge one can learn from a product

Charlie’s Go-to Brands for Kids Toys: X-Box, Lego, Apple (he gave his nieces iPads last year!)

Pain Points:

- he hates scam products, that “look” cool but are not a great learning experience- he hates stu� that is identi�ed by gender - he thinks age is limiting, so what if a 4 year old wants to program an arduino -let them do it!

Charlie’s Channels: Google Nexus(for personal), iPhone (for work), iPad mini, custom gaming machine, mac book air for meetings

Personas & User Flows

Page 8: Unicorn Toy Shop UX Documentation

Clicks “Contact Us”

Exits Site

Linea

Enters site using urlsees customer service number

at the top of the page.Browses Return Policy

Scenario: Linea is visting the site and is looking for a return polity and wants to �nd a customer service number.

Persona 3: Linea39 Year Old Mother of three girls ( 2, 5, and 8) Cares about education and sends her kids to the best public school in Brooklyn “I am proud that I send my children to public school!”

Linea grew up in a working class family in Bu�alo, NY. She has always loved engineering and science and she has a PhD in Mechanical Engi-neering from Cornell University and is working as a consultant for an architecture �rm in the Bronx. She loves showing her children how stu� works, but wants them to create learning experiences of their own. She is afraid she is too controlling of their activities and wants some DIY toys that can help them learn and become curious. Linea struggles to pay for toys, not because they are expensive, but �nds most of them to be cheesy and limiting.

What she needs from an online store:

- a store that is aware of how busy she is - easy access to customer service - product reviews - success stories and showing the product in context - product material list - she wants to know where these toys came from and if the materials are safe and environmentally friendly

Linea’s Go-to Brands for Kids Toys: My kids did not have toys, we made them from objects that we found in the yard or around the house.

Linea’s Channels: Mac Book Pro, iPhone, iPad

Pain Points

- too many clicks to get to a checkout - logging in is way to complicated on most sites - hates paying a high price for crappy quality - no emotional connection to the products or brand

Personas & User Flows

Page 9: Unicorn Toy Shop UX Documentation

Homepage / Login & Register

Wireframes

unicornkidsshop.com unicornkidsshop.com

Page 10: Unicorn Toy Shop UX Documentation

Shop & Product Page

Wireframes

unicornkidsshop.com unicornkidsshop.com

Page 11: Unicorn Toy Shop UX Documentation

Checkout & Learn Page

Wireframes

unicornkidsshop.com

unicornkidsshop.com

Page 12: Unicorn Toy Shop UX Documentation

Tutorial & Contact Page

Wireframesunicornkidsshop.com

unicornkidsshop.com

Page 13: Unicorn Toy Shop UX Documentation

Interactive Prototype

Interactive Prototype Link:

http://chfcxr.axshare.com/#c=2

Page 14: Unicorn Toy Shop UX Documentation

Usability Studies

Usability Testing Videos:

http://screencast.com/t/KETLjnpo

http://screencast.com/t/rmJGeXuvch

http://screencast.com/t/z1BXuO0RMRH

Notes:

After adding a item to the cart users would click the pop-up, “Added To Cart” thinking it would link them to the cart. Because of this we decided to change the mes-sage to “Go To Cart” and linked it to that feature.

Users apriciated having the company phone number and a chat option in the header.