Take a look at the live website:
smart-motors.web.app

‍

THE PROBLEM

Preparing kids for an AI-driven future

Artificial intelligence (AI) is becoming an inevitable part of our lives, and we need to prepare young people to use AI in their daily lives and understand its core principles.

The Rogers’ Lab developed Smart Motors to help elementary and middle school aged kids understand that robots can be trained with data. 

Here’s how it works:

• The Smart Motor hardware has a motor and a sensor of the kid’s choosing
• Kids connect their Smart Motor to their computer
• Kids interact with the website to train the motor output to respond to sensor input

My job was to redesign the website. 

‍

STAGE 1: RESEARCH

Evaluating the existing website

Heuristic analysis

I followed the Nielsen Norman Group’s framework for heuristic analysis to generate a list of heuristic violations and recommendations. I collected input from my colleagues, UX mentors, and professors. 

Running a lab hackathon to uncover mental models and find usability issues

I co-led a hackathon with 17 of my colleagues to observe how they interact with the existing website. Based on these observations, I created a combined Behavioral Task Analysis (BTA) and Cognitive Task Analysis (CTA) focused on how users develop mental models of the Smart Motors. 

Post-hackathon survey

I created a Google Form survey to gather quantitative and qualitative data from my colleagues after they completed the hackathon. I designed my survey questions to:

1. Quantitatively benchmark the existing website
2. Gather points of frustration or confusion with the website

We experienced technical bugs during the hackathon which drew attention away from the UX. The survey turned out to be especially important because it gave me the UX feedback I was looking for. 

Prioritizing and implementing the most urgent changes

I ranked my list of recommended UI changes from most to least urgent. Within the first week, I implemented all urgent changes that didn’t require a structural overhaul of the website. 

‍

STAGE 2: DESIGN 

Creating a kid-friendly website that matches system with real world

Kid-friendly branding

I used bright colors, rounded edges, and lots of icons so that the new website would look friendly and non-intimidating to kids. I took inspiration from kid-friendly branding such as LEGO and Scratch. 

I iterated through Figma designs, gathering feedback from colleagues and mentors. 

Low-fidelity

Medium-fidelity

High-fidelity

‍

STAGE 3: DEVELOPMENT 

Building the new, responsive website

Developing a website that looks great on desktop, mobile, and tablets

I first had to brush up on my HTML and CSS. I also Javascript from scratch within a few weeks. I learned the principles of responsive web design from online tutorials. 

I applied my knowledge from computer science classes. For example, an important part of my process is sketching out the architecture of each page before writing any code. 

Launching the website

After writing and polishing over a thousand lines of code, I made the website live using Google Firebase with the help of my colleague. Check it out! 

Take a look at the live website:
smart-motors.web.app

‍

STAGE 4: TESTING

Feedback on the redesigned website from our target users

We traveled to St. Louis to observe a week-long Smart Motors workshop of 30 kids and 2 teachers using the website I made. I observed kids using the website, asked them to think out loud, and pulled aside 8 kids to interview them. In my interview, I made the smiley face scale below. I asked the kids to show me how they felt using the website by sliding the dot. 

‍

TAKEAWAYS

Product management on a tight timeline

Prioritize features that deliver the most value. I had only 7 weeks for research, design, and development so I learned that it was impossible to implement every feature. I drew from my user research to prioritize the most important features. 

Find creative ways to gather quantitative data. During a hackathon, anytime someone shared a suggestion or frustration, I informally polled the room. “Who else would want to see this?” to get some numbers.

Seek negative feedback more than positive feedback. During hackathons, I heard the most from people who loved the website. I learned to ask questions of the quieter folks because their points of confusion led to UI improvements.