Smart Motors

Redesigning a website to introduce kids to AI

UX Design

User Research


June to August 2023 (8 weeks)


Lead UX Designer, User Researcher, and Web Developer. Internship for Tufts Center for Engineering Education and Outreach.

Skills & Tools

  • Figma
  • Web development (HTML, CSS, and Javascript)
  • User interviews
  • Heuristic analysis
  • Task analysis
  • Survey design


< Back to Projects


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. 


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. 

Observation and task analysis

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. 


Drawing from research to create a kid-friendly website

Creating a kid-friendly style guide

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. 





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!


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. 

Analysis of user testing coming soon! 


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.

< Back to Projects