Upper Neighbor
Reimagining how users find practice content and track progress for a music lesson app
The Problem
When the first version of the Upper Neighbor app was released, users reported the following challenges:
Difficulty finding practice content
Feeling unmotivated to practice
In addition to addressing these usability issues, the client wanted to move in a different direction with the app’s visual aesthetic.
Redesign core flows of the app with a focus on the following goals:
Decrease friction in accessing practice content
Add a practice tracking feature to make progress visible
Update the UI to align with client’s vision and support usability
The Opportunity
Project Overview
THE SOLUTION
I created an MVP prototype of the revised Upper Neighbor mobile app, which allows users to easily access practice content and keep track of their practice sessions.
TIMELINE
This case study covers three months: Jun-Aug 2022
MY ROLE
I was a UX/UI Designer. I worked alongside another UX Designer, an engineer, and the client who is the founder of Upper Neighbor.
TOOLS
Figma, Zoom, G Suite
Design Process
-
1. Define & Ideate
Understand UX and UI issues; update information architecture to simplify flows and add a feature
-
2. Prototype
Create low-fi wireframes and mid-fi prototype that bring revised flows and practice tracking feature to life
-
3. Test & Iterate
Gauge user response to updated flows. Debrief usability test results and address areas of concern
-
4. Refine & Polish
Update UX based on testing and then polish UI and prepare prototype for design handoff
1. Define & Ideate: create a vision for improving the user experience of core flows
KEY OUTCOMES
Understand client’s goals for app revision
Define UX and UI issues in the current app. Collaboratively brainstorm solutions that adhere to timeline and constraints.
Simplify the “find practice content” user flow.
Conceptualize the practice tracking feature.
KEY ACTIVITIES
Run a heuristic evaluation to identify usability issues. Prioritize issues so the most pressing issues are resolved first.
Revise user flows. Simplify the “find practice content” flow. Craft the new “track practice” and “view activity” flows.
Update sitemap with revised information architecture for accessing learning modules and tracking practice sessions.
Information about the music instructors interrupts the "find practice content" flow. Content categories (series, routines, videos) are not intuitive and increase the number of decisions users must make.
The visual hierarchy doesn't help users access practice content. Some screens are overcrowded and include accessibility issues with font size and color.
Key Insight: UX and UI issues in the current design are interrelated. Simplifying the user flows and decluttering the visual design will improve the user experience.
A central issue for users was struggling to access relevant practice content. Through a heuristic analysis, I identified areas of friction in this flow: the starting point is counterintuitive, unnecessary steps slow the flow, and practice content categories are confusing.
During the ideation process, I focused on simplicity and clarity. I updated the sitemap to decrease the clicks it takes to access practice content. I confirmed which information is most essential so that it would be prominent in the visual hierarchy.
For example, the initial design prominently displayed the music teacher’s biographies. While this is helpful information, it distracts the user from finding learning content. With the new flow, users can access the teacher bio on a different page, so it doesn’t interrupt the goal of finding a particular lesson.
2. Prototype: move design from low to mid-fidelity
KEY OUTCOMES
Visualize “find lesson” and “track practice” wireframes
Collaborate with client and engineer and maintain a shared vision of the design, features, and UI
Transition from low-fidelity to mid-fidelity
KEY ACTIVITIES
Leverage the user flows and sitemap to create low-fidelity wireframes for revised flows and practice tracking feature.
Share low-fi wireframes with team and conduct feedback session.
Craft mid-fidelity wireframes and conduct feedback session.
Link up mid-fidelity prototype to prepare for the usability test
Key Insight: The wireframing process inspired changes in the functionality of the practice tracker. A low-fi rendering of this feature is shown above.
While this project largely focused on revision, the client also wanted to roll out a simple practice tracking feature. In our early discussions, this tracker was going to collect quantitative data about the time users spend practicing.
However, as I drafted the wireframes, the client was inspired to expand the practice tracker’s capabilities. Based on his experience as a music educator, he thought learners would benefit from qualitative data, which would provide a fuller picture of their progress.
Our engineer expressed the need to keep the data simple, as the timeline was tight. He proposed that we execute this by having users input self-reported data. Limiting the amount of qualitative data points and decreasing complexity would enable us to execute this feature on time.
3. Test & Iterate: Improve the design through user feedback
KEY OUTCOMES
Gauge user response to the revised flows and new practice tracking feature
Prioritize issues and focus on simple solutions that can be implemented efficiently
Document test results and user feedback for future use.
KEY ACTIVITIES
Plan usability test script aligned to research goals.
Recruit participants and run remote, moderated tests (5 participants 30 min each).
Transcribe sessions and organize data. Analyze transcripts and pull out key insights with evidence.
Update prototype with solutions that address user feedback
Key Insight: Users responded positively to the simplified flows, but they had some critiques about the new practice tracking feature.
Some users struggled to find the practice tracking feature because it clashed with their mental model. The feature was called “Stopwatch,” which they did not conceptually connect to tracking progress. We updated the name to “Track.”
The practice intentions caused friction, so I simplified the page. I removed the color coding because users did not understand the meaning of the colors. I reduced the number of decisions users would have to make by updating the instructions to “Choose one intention” rather than 1-3.
Users were not satisfied with the data points provided on the Activity page. We updated this to track weekly streaks instead of daily streaks because our users don’t have the capacity to practice daily. Initially, this page showed the total number of minutes practiced, but users felt this was too “big picture.” We added data points to show their weekly and monthly practice time, which was more concrete.
4. Refine & Polish: finalize UX & UI for the MVP design
KEY OUTCOMES
Confirm UX revisions
Define visual style
Craft high-fidelity prototype
Prepare for design handoff
KEY ACTIVITIES
Revise UX based on usability test and timeline constraints
Collaborate with the client to confirm the visual aesthetic for the MVP design
Run feedback sessions with the client to ensure high-fidelity prototype meets expectations
Make a style guide to support the engineer and make it easier for client to revise the app in the future
The gradient-style illustration looked whimsical, but felt out of place with other elements. The final blue and orange instruments worked better for cohesion.
One UX revision was to set up the activity page with data points that users found more valuable.
While the psychedelic patterns were lively and fun, I ultimately used solid colors instead, so that the visual design was harmonious across all pages
Key Insight: I prioritized simplicity over uniqueness to ensure that the visual design was cohesive.
The client had a graphic designer create some fun swirling patterns for the Module cards and instrument icons with an eye-catching gradient. When I added these colorful elements to the high-fidelity screens, I felt that they clashed with the minimalist aesthetic.
I did my best to smoothly incorporate these design assets because the client asked that they be featured.
During our feedback session, I asked for the client’s reaction to the screen that included these elements. I did not reveal my feelings, as I didn’t want to guide the client. The client noticed the same issue: the colorful assets felt out of place. Ultimately, the client felt that cohesion was more important than using the design assets that were initially requested, so I revised with this in mind.
My Impact: Final MVP Design
Easy access to learning content = start practice sessions quickly with fewer steps and minimal friction
New practice tracking feature = access quantitative and qualitative practice data to see progress and boost motivation
Activity page = validation of learner’s effort to motivate continued, regular practice
Updated UI = clean, modernized aesthetic with accessible typefaces and colors
