Upload
ayanna-seals
View
214
Download
7
Tags:
Embed Size (px)
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
Citation preview
Project:
E-Commerce WebsiteClient:
The Unicorn Kids ShopTeam: Ayanna Seals, Neill Chua, Nirbhay Shah, & Sriya Sarkar
Contents
Overview
Cardsorting
Sitemap
User Flows
Wireframes
Interactive Prototype
Usability Studies
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
Card Sorting
*Using data gathered from usability testing, this table outlines the features that are most important to include on the website.
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
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
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
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
Homepage / Login & Register
Wireframes
unicornkidsshop.com unicornkidsshop.com
Shop & Product Page
Wireframes
unicornkidsshop.com unicornkidsshop.com
Checkout & Learn Page
Wireframes
unicornkidsshop.com
unicornkidsshop.com
Tutorial & Contact Page
Wireframesunicornkidsshop.com
unicornkidsshop.com
Interactive Prototype
Interactive Prototype Link:
http://chfcxr.axshare.com/#c=2
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.