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.
.png)
THE PROBLEM
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:
.png)
My job was to redesign the website.
STAGE 1: RESEARCH
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.
.png)
.png)
.png)
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:
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 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.
.png)
I iterated through Figma designs, gathering feedback from colleagues and mentors.
Low-fidelity
.png)
Medium-fidelity
High-fidelity
.png)
.png)
.png)
STAGE 3: DEVELOPMENT
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!
STAGE 4: TESTING
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.
.png)
Analysis of user testing coming soon!
TAKEAWAYS
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.
