Joining mid-project, I needed to quickly adapt to the situation and understand where the team was at. Given the app's focus on learning habits, I paid particular attention to user onboarding, frustrations, and learning patterns. I worked closely with a team of developers to translate mockups and testing feedback into something tangible.

After solidifying my vision for the app through research, my supervisor encouraged me to begin designing ideas. However, with my user-centered design background, I wanted to first understand the app’s current user experience. Knowing the team had usability videos, I requested access to their UserTesting.com account and spent two days reviewing the videos. I carefully noted user behaviors and pain points to inform my design decisions.

During my analysis, I focused on what users were doing well, the challenges they faced, recurring actions, and their talk-aloud feedback. I later revisited my notes, highlighting frequently observed issues and compiling a list of common themes. This process revealed key findings that I addressed in subsequent redesigns:

1. Users struggled to identify which keys on the app corresponded to their actual piano.

2. The current UI colors lacked meaningful functionality.

3. While users performed well with notes close in range, they often missed notes when the next key was further away.

The ideation and prototyping stage consumed the majority of my time during the internship. My process involved sketching ideas, creating high-fidelity mockups in Sketch, reviewing designs with my mentor, and handing them off for development. Afterward, the team would review usability videos of the updated designs and iterate on the process.

Since the team already had a functioning app, my focus wasn’t on rebuilding the keyboard from scratch. Instead, I worked on redesigning its look and feel, enhancing the user experience, and creating secondary features. I relied on sketching primarily for new designs or concepts that didn’t yet exist, as it allowed me to quickly explore multiple directions.

Some of my sketches evolved into mockups, like the example shown here from an early sketch file. Each mockup underwent small iterations, with most keyboard variations differing primarily in color. This project marked my first experience extensively relying on color as a design element. I explored numerous iterations, carefully considering accessibility for color blindness as well. A selection of these designs ultimately progressed to the final deliverable.

To demonstrate how the keyboard progressed more linearly, I have 4 hand-picked screens below. On the left is the original keyboard. On the right are the mockups that I think best demonstrate how I addressed the usability issues from the research. To address the issue with not being able to recognize the keys on the app to a real life keyboard, I realized this had to do with how obscurely the middle C was being represented, so I changed the color to blend in with the keyboard and act like a glowing key. To address the color issue, I identified a more cohesive color scheme. To address the piano note issue, I added the piano key name to each piano note.