Little Einstein – E-Commerce UX
This E-Commerce website is meant to represent the fictional brand of Little Einstein which celebrates learning while allowing kids to experiment and play with technology. My team and I built a website with E-Commerce elements as well as an interactive Playground area to demo STEAM toy kits to meet the challenges of the design brief.
Project Overview.
Project Time: 4 weeks (January 30, 2017 to February 27, 2017)
This E-Commerce website is meant to represent the fictional brand of Little Einstein which celebrates learning while allowing kids to experiment and play with technology. Our challenge was to build a prototype web experience that would inspire parents to shop for STEAM (Science, Technology, Engineering, Art, and Math) toys while feeling like they made a good investment on a toy that will give the gift of learning. Full UX Design class project brief here.
Our Solution: Our prototype featured traditional E-Commerce elements that are modeled after popular shopping websites so users would feel an air of familiarity when shopping. Our interactive concept area, the Playground, would allow users to creatively interact with various STEAM kits to build and prototype these kits online through an interactive interface. The Playground was designed to allow for a hands-on area that seeks to mimic in-person, interactive toy demos.
My Role: For this project, I served as Project Manager and UX Researcher & Designer. I helped keep our team on track on this relatively short project. I also participated in observation sessions, moderated usability testing, and made interface decisions with my team.
The Team: Our team consisted of four Integrated Digital Media graduate students at New York University's Tandon School of Engineering. The Little Einstein project was our first UX design group project. All members of the group brought different perspectives on UX design as we all had different backgrounds including graphic communications management, management of information systems, information technology, and mathematics and philosophy.
Observations of Toy Store Behavior.
Our team went to toy stores to observe the behavior of parents and children in the toy buying process. Our essential takeaway from observing behavior was that parents and kids both liked to interact with the toys before making purchasing decisions. We noticed this behavior in all the stores we went to that had a demo or open box area available.
Brainstorming.
After observations, we started out by brainstorming what we wanted to include on the website, including standard eCommerce elements as well as incorporating client requests from the design brief. We wanted to add a more playful aspect to an online toy store and tried to fit an interactive play space that kids and parents could use to "test out" DIY kits.
This diagram showcases our brainstorming session.
User Personas and User Flows.
Our user personas were developed based on our observational research as well as the design brief. We identified three main personas and created user flows on how they would typically interact with an online shopping website.
Christina Wilson (Mother)
Christina is a 36-year-old civil engineer living in New York City. She has a loving husband, an 11-year-old daughter, and an 8-year-old son. She wants the best for kids, so she usually buys toys with high educational value.
Aiden Cheng (Grandfather)
Aidan is a 62-year-old postal worker in San Francisco. Aidan has a wife and an adult child. His child is married with one daughter. Aidan usually likes to buy toys with educational and entertainment value for his granddaughter in the hopes it will be helpful for her future.
Andres Peralta (Teenager)
Andres is a 15-year-old in tenth-grade student living in Orlando. Andres has interest in robots and circuitry and already thinks he might want to go to college for mechatronics and robotics. He loves checking out kits online and saving them to his list in hopes that his parents will buy them for him for his birthday or the holidays.
Product Collection & Card Sorting.
We collected a list of 50 products that we thought would be appropriate in the Little Einstein online store and sorted it into categories based on a couple of closed card sorting sessions.
Additionally, card sorting was used to sort website features into corresponding pages. We wanted to be sure that users could navigate the site but also not include so many extra features that they would be turned off by using the site.
Paper Prototype.
Our team created a paper prototype. This iteration included all the standard eCommerce pages including the Home Page, Product Listing, Product Description, Shopping Cart, Checkout, and User Account.
We also created a prototype for the online playground, but it was hard to test on paper.
Paper Prototype Testing & Feedback.
Multiple users tested this prototype, many of whom were fellow Integrated Digital Media graduate students. Some of our testers were also aunts or uncles, so they’ve also had experience purchasing toys for kids. The critical feedback we received include:
Feels familiar (like Amazon)
Easy-to-use because of the familiarity
Needs a more prominent search bar (not easy to find, and not the first thing people went to look-up products)
Users wanted to see previous purchases in an Order History page
Ability to gift purchases as some users are a long distance from who they purchase for
Axure Interactive Prototype.
Our team created the interactive prototype in Axure. This prototype was built based on the paper prototype and the feedback we received from the initial user testing.
The Playground – A New Interactive Concept.
My team had to be fearless to explore new ways of interacting in an E-Commerce environment outside of traditional E-Commerce elements. We created a new interactive concept area where users could drag-and-drop parts from STEAM-based learning kits to create and design their own projects.
How it works: When the user selects Playground from the navigation bar, they are taken to a kit selection page that allows them to pick a kit they would like to demo. Afterward, they are taken to the interactive testing page you see above. Here, they will be able to drag-and-drop parts from the parts box on the left onto the board on the right. Pieces will snap together and users can create projects from the parts available to them. They can then “run” the design to see if the project was built correctly. A limited amount of parts will be available as making all elements from a kit available would be essentially making the kit free to use online.
From describing this page to our user testers, many of them believed that this section of an E-Commerce site could be educational for kids and parents as well as provide a demo option, which is rarely seen onE-Commerce sites.
Interactive Prototype Feedback.
Multiple users also tested this interactive prototype. The critical feedback we received in regards to this prototype include:
Straightforward and familiar
What is the MakerSpace? Users were not sure about the purpose of this space.
Users didn't know where to go when we asked them to play with or test a product.
Checkout experience was excellent, straightforward to reorder from account order history.
Who are we talking to for the Live Chat? Users weren't sure, so they didn't click it.
Iterative Changes
Based on the feedback we received, we made the following changes for the final submission of the project:
Changed the "MakerSpace" to the "Playground" (Upon retesting, users could now correctly navigate here without assistance).
Added a "Try in the Playground" button to Product Description page.
Emphasized the "Playground" to be different from the product categories.
Changed "Live Chat" to "Chat with Alberta," indicating that she was the Owner and the Toy Expert.
Redesigned some inconsistencies including changing all "Add to Wish List" buttons to the heart symbol.
