Frame 3.3 (2).jpg

Little Einstein

JJJJJ

LITTLE EINSTEIN

Online STEM Toy Store UX/UI Design

 
 

Quick Look (On Behance)

Overview

Frame+(25).jpg

This project is a teamwork project in the UX class (Spring 2018). In this project, we were supposed to design an online web store for our client Little Einstein, which is a STEM toy store. This project is aiming to train our comprehensive abilities on UX research rather than UX design.

 

My Role

Frame (47).png

I was responsible for the client's research, user research (persona) and competitive research. Also, I finished the website wireframe redesign and UI design work after the class.

 

Challenge

Frame 4.40 (2).jpg

solution

Frame 4.41 (2).jpg
 
 
 

Research

Frame (81).jpg
 

Frame+(24).jpg

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 inventory on technology and electronics products geared towards kids ages 4 - 15.

 
 
 
Frame+(26).jpg

client’s needs

The owner hopes the online store can not only be a commercial place but also an educational place.

 
Screen Shot 2019-01-28 at 4.45.17 PM.png

Competitors

According to our client’s requirement, we reviewed three existing online stores to get inspiration and did a simple marketing position analysis to figure out what should our position be. Based on the first research, we decided to firstly balance commerce and education. Secondly, pay attention to interaction and add the cultural part.

 
Screen+Shot+2018-09-05+at+2.07.42+PM.png
Frame 4.27 (6).jpg
Frame 4.33.jpg
Screen+Shot+2018-09-05+at+2.08.05+PM.png

CONTEXTUAL INQUIRY

We went to a local toy store to take a contextual inquiry. We did a questionnaire at first and prepared to interview the employees, the customers and the kids (if it is possible). The lucky thing is we met the co-owner directly (the middle one on the last page). He shared lots of precious information with us. And we met two customers in total to know their commercial needs. According to our contextual research, we collected the information from our interview and divided it into two parts.

 

Click the image to enlarge it

persona

We designed four personas to correspond to the grandparent group, the parent group, the relative and the kid group. Our target users are educated and well-being family. They all have different needs for buying toys online because they value different aspects of toys. The elder group prefers to use toys to build more connections with their grandchildren. The parent group prefers to educate their children better with STEM toys. The relatives may think higher of the online shopping experience while the kids mainly buy toys based on their interests.

 
 
 

Ideation

Frame (82).jpg
 

Frame 4.27 (8).jpg
Frame 4.35.jpg
Frame 4.33 (1).jpg
Frame 4.34.jpg

customer’s needs & solutions

According to our research, we extracted all of the potential customers’ needs and came up with the solutions accordingly. For the grandparent group, it is important for them to know what is popular among kids now and know which toy is better, so we designed the hottest product recommendation function and allow users to compare toys in the shopping cart directly, rather than browsing different pages repeatedly. For the parent group, we come up with a new sorting method - Ability Radar map to let them select toys based on what kids can learn from it quickly. We also provide a community page for them sharing their parenting experience. For the relatives, they have a higher requirement for the shopping experience. They want to select an appropriate toy within a short time, so the product filter and smart shopping assistant will help them. Kids are mainly focused on the toy itself so we provide abundant teaching resources and online playgrounds to allow them to take a try.

 
Frame 4.36 (2).jpg
Frame 4.38.jpg

little einstein’s needs & solutions

Additionally, we also review Little Einstein’s needs and noticed that our client also wants the kids can stay on the online store longer and can keep paring related cultures with each toy. Thus, we designed the weekly challenge activity to appeal the kids visit their website frequently to improve the user stickiness. We also decided to move the related cultures and stories behind the toys to the product’s intro page, which may let each of the toys be more special, attractive and meaningful.

 
Group 11 (3).jpg
Frame 4.37 (5).jpg
Group 11 (4).jpg
Frame 4.39.jpg

SPECIAL category sorting - Ability RADAR MAP

At first, we sorted the products mainly by STEAM, but it is not that useful because each toy can be classified into more than one category. Thus, we decided to set up the ability radar map as the main category method. The advantage is ability radar map allows the product to have all of the five elements but also can be marked as the highest ability element. It will be more scientific in organizing all of the toys better and it will also highlight the parent group’s need for STEAM toy’s educational part.

We also did the first user test about which category is better. After tested with 5 people, we found 4 people chose the ability radar, so finally, we used ability radar as the main category method.

 
Frame.jpg

Final Proposal

So based on all of the former research and ideation, we finally came up with our core functions: the Homepage is the collection of all of the other three pages. It will post the hottest products and activities, the ability radar category, the product and blogger recommendations. The Shop page is where the customers find and but the toys that they like. The product detail page has the related resources (including related cultures the client mentions) especially. Customers also can compare the products in the cart directly. The Community page provides different workshops, articles, forum and interest groups for both adults and kids to choose. The Education page is where the kids can participate in the weekly challenge, play toys online and watch tutorials.

 
Frame+(35).jpg

COMPARATIVE ANALYSIS

By comparing the comparative analysis, we can notice that Little Einstein has the complete online shopping process and makes up the blank of the related culture part. The Ability Radar map classification is also a special part of all of the competitors. It is mainly because Little Einstein is focusing on the STEM toys, which means this store pays attention to the toy’s educational part already.

 
 
 

Test & Prototype

Frame (83).jpg
 

 
3.jpg
4.png
 

SITEMAP & USER FLOW

The first sitemap includes Four Main Pages: Shop, Community, Education, Profile. Two global functions: Cart and Log in. We invited our roommates to take a test and noticed that profile and login are repeated and the relationship between the homepage and main pages is wrong. The second version we merge profile and login into a global function and add the homepage as a new page.

 
5.png
Frame 4.34 (1).jpg

paper prototype & user tasks

We did the paper prototype at first and set up three user tasks for the later users testing based on the difficulty levels. We designed three situations for our users and encourage them to think aloud during the whole process so we can notice that where they are confused and where they are excited with.

 
Frame 4.40.jpg
Frame 14.jpg

USER TESTING: PAPER PROTOTYPE

The listed problems are: our first user Kevin said sometimes he just wants to buy something directly without log in, so we need to add a quick checkout. Category icons should have a recognizable reminder and place order page should have a button to go back to the cart and the other backlinks.

 
 
 

interactive prototype

My partner created the interactive prototype by Axure after the first user testing and made a quick video demo about what it looks like. We used this prototype to finish the second user testing below.

 
7.png
Frame 4.41 (1).jpg

USER TESTING: INTERACTIVE PROTOTYPE

The interactive prototype went out not that well, mainly because it didn’t reflect some important functions better, like the radar map category and the compare function because of the class’s time limitation. That’s why I redesigned the wireframe and finished UI design later by myself.

 

CLIENT’S NEEDS SELF-EVALUATION

Frame+(33).jpg

USER EXPERIENCE EVALUATION (10 USERS)

Frame+(34).jpg

evaluation

Though the interactive prototype didn’t reflect some typical design very well, the feedback from the user testing is not bad. We also self-evaluate the client’s needs and the good news is we finished all of them.

Now, it’s time to move to my work: wireframe redesign and UI design.

 
 
 

Design

Frame (84).jpg

Frame 2.1 (8).jpg
 
Frame 2.2 (3).jpg
Frame 2.6.jpg
Frame 2-3 (3)_4.gif
3.2 (1).jpg
 
Frame 2.5 (3).jpg
 
Frame 2.7.jpg
 
 
Frame 2.11.jpg
community.gif
Frame 2.11 (2).jpg
 
3.6.jpg
 
Frame 2.10.jpg
 
 
 

Learnings

 

PAY ATTENTION ON TEAMWORK

This is the first time that I walk through a pure UX/UI project as the lead researcher and web designer. What I have learned from this project is teamwork is super important in UX design projects. Because of the time limitation, we divided our works into different parts and my partner was responsible for the interactive prototype while I was responsible for the documents. My partner missed some typical functions in their job and given we lacked in-time communication, we just noticed it before the user testing. That’s why later I had to redesign the wireframe and finish the UI design after the class.

It teaches me that in UX/UI projects, we should always think of ourselves as a whole team. We should never just divide the work simply and only focused on our own business. It is pretty important in UX/UI projects because our work will be tested by the users directly. If we made any serious mistakes, it will influence the testing a lot and even made it useless.