Overview
Online Toy Store UX Design
Design an online web store for our client Little Einstein, which is an STEM toy store. This project is aiming to train our comprehensive abilities on UX research rather than UX design. I was solely responsible for the client's research, user research ( persona research ) and competitive research.
Role
UX Design / User Research / UI Design
Collaborators
Yunzhu Li / Tianyue Wu / Yiping Wang
Design Process
Client Research
Little Einstein is a new online retailer of curated and innovative learning kits for kids. It was formerly a beloved shop in Park Slope Brooklyn that sold all types of DIY kits (both analog and digital), but the storefront was too expensive and the shop closed in 2012. The owner wants to convert the store to online only and the owner (Alberta) now wants to focus her inventory on technology and electronics products geared towards kids ages 4 - 15.
Clients’ Needs
Based on our client’s proposal, we collected her actual needs at first as below. Basically speaking, the owner hopes the online store can not only be a commercial place but also an educational place. Client’s Proposal: https://docs.google.com/document/d/17otbNLOrgR5PGGUqmFHieRR8GgzZTxuzT0XbZ1rDN2M/edit
Brainstorm & Contextual Inquiry
According to our first research, we did three brainstorming in total to ensure the normal website’s using process is correct and smooth. We also came up with four main functions that we need: Shop, Community, Education and Profile. We especially highlight three functions to keep special.
After we had a basic understanding of online toy store, we went to a local toy store to take contextual inquiry. We did a questionnaire at first and prepared to interview the employees, the customers and the kids (if it is possible).
Persona
Comparative Analysis
So based on all of the former research, we did a complete comparative analysis and came up with our core functions as below
Card Sorting
First Version
At first we sorted the products by STEAM, but it seems not as useful as ability radar
1st User Test
We did the first user test about which category is better
Radar Graph Wins!
After tested with 5 people, we found 4 people chose the ability radar, so finally we used ability radar as the main category method
Sitemap
First Site Map
Includes Four Main Pages: Shop, Community, Education, Profile. Two global functions: Cart and Log in
Second User Test
We invited our roommates to take a test and noticed that profile and log in is repeated and the relationship between homepage and main pages are wrong
Iterated Site Map
Second version we merge profile and log in into a global function, and add the homepage as a new page
User Flow
Paper Prototype & User Tasks
Shop without signing in
Our first user Kevin said sometimes he just wants to buy something directly without log in, so we need to add a quick checkout
Sign In / Sign Up
Added different sign in/sign up pages depend on different user tasks. (By click profile and by checking out from the cart)
Image Direction
Image of the product on product page too close to related products area, sometimes misunderstanding
Wireframes
Interactive Prototype / User Testing: Interactive Prototype
Category Reminder
Category icons should have recognizable reminder
Back Links
Place order page should have button to go back to cart and the other back links
Message Page
Quick link to track package
Recommend Links
Added functions on the confirmation page to community and education part
UI Design
Homepage - AI Assistance
Community - Workshop
Cart Page - Cart Compare
Education - Online Product Test
Education Page
Shop Page - Product Page
Evaluation
Self-Evaluation