02 Defining the solutions
How will the practice routine change with the applied design principles?
I drew a storyboard to help me visualize the user journey and illustrate an ideal scenario of how the solution would benefit users.
Storyboard
Key Design Principles
These three design principles help enhance user adoption and satisfaction that can easily add to their practice routine, which informed all aspects of the design process.
Simplicity
🎹
The ability to help users focus during the practice while documenting the session
Able to set goals based on each person’s performance
⌛
Accuracy of the practice logging and don’t create extra work to their routine
Ease of review and keep track of user’s practice activity
Productivity
💖
Incentives attract users to stay on the app
Able to create a positive environment for the user
Playful
Alignment with the stakeholder
The project founder initially proposed a reward system for redeeming event tickets alongside the AI-powered practice tracker. However, after researching user and market needs, I recommended prioritizing gamification progress tracking to better engage younger users while postponing ticket redemption due to limited demand.
We also identified some significant gaps in the current market...
Violy (一起练琴) and Andante are direct competitors, offering piano tracking apps with slightly different features. Our competitor analysis revealed a key gap, as these products overlook the needs of our target users, 10-13-year-old children and their parents, who prioritize simplicity, motivation, and easy monitoring. This gap presented a clear opportunity to design a solution that truly caters to both groups.
User Persona
I created the user persona (both kid/parent) to give the team a clear understanding of our target users, ensuring we stayed focused on their needs throughout the project.
Let me introduce our users, Rita and Mike
Rita’s son, Mike, is learning piano. She finds herself constantly worrying about Mike’s progress since Mike often lacks motivation and gets easily distracted, especially without her supervision. Rita feels exhausted and frustrated by this situation.
Goal
Ensuring Mike practices piano consistently
Effectively and effortlessly monitor practice
Provide a positive learning environment for Mike
Motivation
Challenges in motivating her child
Difficulty balancing practice monitoring with other responsibilities
Pain Point
Mike 11y
(Primary user)
Rita 42y
(Secondary user)
Child-Parent
Goal
Stay consistent on his piano practice
Social interact with the community to stay competitive
Gamify feature to spark fun during practice
Sense of progress in piano learning
Motivation
Struggles to stay focused
Lacks motivation to engage in piano practice
Feels pressured when closely monitored by parents
Pain Point
Key insights from our user research
We collected over 130 responses during our user research, gaining valuable data, and uncovering patterns in user behavior. These insights were eventually categorized into three key themes that would help guide our design decisions.
find it challenging to provide proper supervision without putting too much pressure on their kids.
56%
Parents
struggle to maintain focus and get easily distracted by their surroundings while practicing.
54%
Kids
believe that healthy competition within the piano community plays a key role in motivation.
70%
Piano Instructors
Logato
Designed a multilingual (English/Chinese), AI-powered practice logging app that provides an engaging practice experience for young piano learners while empowering parents with actionable insights, improving practice consistency, and fostering a positive learning and social environment.
Preview Final Solution
Overview
As the Founding Product Designer, I led the end-to-end design of Logato, transforming the initial concept into a functional, user-friendly product while shaping the integration of AI-powered features. I also designed a multilingual (English/Chinese) interface, ensuring seamless language transitions while maintaining clarity and usability for the users.
Key Impact
40%↑ practice consistency, helping users build stronger, more disciplined learning habits.
85%↑ of users express willingness to integrate the tool into their routine, demonstrating its effectiveness and engagement value.
Before diving into the design process, let’s take a moment to explore the final design solutions for Logato.
Sole Designer (Me)
Founder
Developer
Team
16 Weeks
Timeline
Lead Product Designer
UX Researcher
Role
Tools
AI-powered precision for effortless, accurate practice logging
Simple Logging: Kids can easily record their practice sessions with a single tap on “Start Practice.”
Enhanced Accuracy: AI-powered features ensure precise logging, making it easy to save practice sessions for records and future reference.
Clear and organized stats for tracking and sharing practice performance
Enhanced Insight: Clear and organized analytics enable parents and kids to track practice performance effortlessly.
Encourage Goal Achievement: Parents and kids can set specific goals and monitor kids’ progress, making it easy to share insights with instructor for targeted improvement.
Social engagement to encourage positive competition
Boost Engagement: Kids can actively manage their social profiles and interact with other users by comparing achievements, weekly rankings, and more.
Drive Motivation: Gamification features encourage kids to compete with friends and participate in weekly challenges, helping to inspire their practice and progress.
Problem
While young piano learners typically have instructors to guide their performance during regular lessons, challenges often arise during at-home practice, sometimes resulting in conflicts between kids and parents.
Many kids struggle to stay focused during piano practice, finding it boring and repetitive. The lack of positive peer interaction and community support further diminishes their motivation and enthusiasm.
01
Low Focus Span and Motivation
How might we encourage kids to stay focused and motivated in piano practice while reducing the pressure and challenges parents face with monitoring?
Discovering Possibilities
Stick with me as I walk you through my design process!
Parents often rely on direct monitoring, which can overwhelm kids and create a negative association with practicing. At the same time, parents struggle to consistently track practice time while managing their own responsibilities.
02
Challenges in Practice Tracking
01 Discovering the problem
As part of the initial research phase, we conducted survey to understand their needs, pain points, and expectations regarding children's piano practice.
Even though we couldn’t get direct survey responses from kids, this didn’t stop me. I ensured the survey questions covered multiple perspectives to uncover the user journey and gather valuable insights from both user groups.
I included questions such as :
What is your kid’s attitude toward piano practice?
What challenges do you as a parent have in supervising their children’s practice?
What do you think is crucial for kid’s improvement in piano practice from the instructor’s perspective?
78 survey responses received
Parent
59 survey responses received
Piano Instructor
Learning directly from our potential users
However, we did face some challenges with the recruitment of our users...
These direct quotes highlight the frustrations both kids and parents face with piano practice.
Let’s hear from their POV...
Sarah
41y / Kid 11y
My kid always feels pressured whenever I monitor her practice, but if I don’t, I’m unsure if she will concentrate on her practice.
Kevin
43y / Kid 13y
My kid is easily attracted to electronics and loses patience when practicing.
Sofia
38y / Kid 9y
My kid feels that other kids have more free time to play video games, while he has to practice piano.
Violy
Andante
Requiring
Proactive and self-motivated when practice
Quick learner, adaptable to high learning curves
Disciplined, self-taught explorer
Missing
Social interaction within the community
Automated practice tracking and performance analysis
Gamification features
03 Designing the experience
All 8 users successfully completed both tasks, and we gathered valuable feedback on the app experience as well.
What were the results?
Users think the colorful badges and variety of achievements make progress tracking more enjoyable.
Users enjoy game-like competitions while also having the freedom to accept or decline, reducing pressure to compete with others.
Users express that the logging process is easy to complete and they don’t feel distracted during practice.
Users find some practice data confusing and are unsure how certain metrics were calculated.
Users find many icons made the screen feel crowded, making it difficult to locate important CTAs.
Users think some terms lacked clarity, making it harder for them to understand key information.
The name Logato is a play on words, derived from the musical term "Legato," which means "tied together", indicating smooth, connected notes with no silence in between.
By replacing "Le" with "Lo," the name reflects our app’s purpose: logging piano practice while fostering a seamless and consistent learning experience.
🎹
For Logato’s logo, I designed a folder silhouette with integrated piano keys to symbolize structured progress and musical learning, representing how practice records can be well-organized and securely stored.
📁
=
+
02 Optimizing the practice overview for performance clarity
Parents need clear, actionable insights into their child’s progress to effectively adjust goals and refine practice routines.
To meet this need, I implemented key updates to the stats page, enhancing clarity and usability.
Converted goal display to a CTA button
The “Edit Goal” button allows users to adjust their goals more easily.
Positioning goals behind performance data helps users clearly see how much progress is needed to reach their targets.
1
Replaced data block to color coded pie chart
Simplified the interface by removing icons, as younger users might not associate them with specific meanings
The pie chart and positioning of goals behind performance data help users clearly see how much progress is needed to reach their targets.
2
Adjusted the practice time chart to show the last 7 days instead of a fixed weekly view, ensuring accurate and relevant tracking
3
Clarified date calculations
Before
After
With a solid foundation in place, I moved on to user testing with our target audience. While the internal feedback helped with conceptual clarity, user testing revealed practical usability challenges we hadn’t anticipated. We asked 8 piano learning users to conduct usability test with our hi-fi prototype.
Stage 2: Refining the experience with user testing
We requested our users to perform two main tasks during testing...
To ensure accurate practice documentation and performance tracking, users must be able to log a practice session effortlessly and manage this core function of the app.
Task 01
Log a practice session
To fully benefit from practice insights, users must be able to navigate the page effortlessly, interpret key data, understand their performance, and share reports without additional guidance.
Task 02
Navigate practice overview
UX is an endless journey, and with insights from our users, I refined key screens to address critical pain points and enhance the overall experience.
Iterate for the better
01 Redesigning the log detail page for better user comprehension
The log detail page is a key part of the user journey, appearing after every recorded session. To enhance the experience, we tested two design variations with eight users to identify their preferences and improve clarity.
01 Streamlined navigation structure
Designing is one thing, refining is another...
My design refinement process is broken down into two stages, each with distinct purposes and audiences.
Stage 1: Shaping concepts & features with internal feedback
In this stage, I focused on conceptual design and feature validation, organizing team reviews and seeking feedback from other designers. This helped refine core features, simplify navigation, and address gaps before moving to high-fidelity designs.
02 Enhanced tracking experience
Prevented kids from over-managing their practice time by constantly checking if they hit their target.
Removed the progress bar for daily goals
1
Remove the focus mode toggle switch
Prevented accidental toggling, keeping the screen clean and distraction-free.
2
Maintained accuracy by displaying only active playing time, reducing stress over idle time accumulation, to encourage a more positive and concentrate practice experience.
3
Eliminate blank timer and display only active timer
From ideas to structure
To kick off the design process, I started by creating low-fidelity wireframes to visualize core business ideas and features, focusing on functionality and aligning with stakeholders on the product's direction.
User Flow
After establishing the foundational ideas, I mapped out the main user journey to define the interactions and relationships between screens, ensuring a clear and cohesive user flow.
Flow 1: Record practice and view performance
Flow 2: Compete with friends
Reduce the structure from three tabs to two
This simplified the navigation, making the app less cluttered and easier for young users to explore.
1
Move the stats to the top left for quick access
This kept important data accessible for parents without overwhelming the primary interface for kids.
2
Add user activities, daily challenges
These elements made the app more engaging, encouraging regular interaction and motivating kids to build positive practice habits.
3
2
1
3
Before
After
2
1
3
Before
After
Option 1
3/8 users preferred
Option 2
5/8 users preferred
✅ Fully block layout adds cohesiveness
✅ Time calculations and terminology are easier to understand
✅ The collapsed notes section reduces clutter and feels less like an obligation for users
❌ Add Notes section is harder to access, as it lacks a clear CTA
❌ The check button on the top-right is less intuitive as it forces users to move their fingers across the screen to locate it
✅ Notes section is highly visible, making it easy for users who want to add notes
✅ The confirm button follows the visual hierarchy, making it easier to locate after reviewing the information
❌ Combining list and block layouts causes visual inconsistency, making it more difficult for users to quickly process information
❌ Notes section takes up unnecessary space for users who rarely add notes
Simplified information
Kept only the essential text for the prompt
Separated the title from the block layout to clarify its editability
Updated terminology for better clarity:
Focused Time → Active Time
Total Time → Session Time
1
Enhanced visuals and layout
Replaced list layouts with cohesive blocks for consistency
Introduced color distinctions to differentiate session time and active time
Made the notes section collapsible, reducing clutter while keeping it accessible
2
Kept the confirmation at the bottom to maintain visual hierarchy and minimize finger movement, ensuring a smoother flow after recording.
3
Streamlined confirmation process
Combined the best features of both option
Final Version
3
3
1
2
04 Branding
Name and logo
You might be wondering, what exactly does “Logato” mean?
I created a design system that matches Logato’s playful and simple tone, keeping the visuals fun and easy to use. I also designed badges to support the gamification features and make the app more appealing to our target users. All designs passed the WebAIM contrast checker to ensure usability.
Design system
To protect kids' privacy, I introduced animal avatars instead of profile photos, allowing them to personalize their experience safely while making progress more fun and engaging.
16px
60px
SF Pro
Aa
Regular
Aa
Medium
Aa
Semibold
Primary
#295375
Primary Text
#171815
Highlight 2
#F39E20
Highlight 1
#8CDDFF
Button
#EAEDF1
Background
#F5F5F5
Secondary
#D97727
Secondary Text
#646464
Buttons
Components
Illustrations
Badges
Typography
Color
Semi Bold | 60px
Semi Bold | 20px
Semi Bold | 16px
Medium | 16px
Regular | 16px
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
Avatars
Icon
Me
Designer’s note
The blue and orange palette creates a playful, game-like feel without overwhelming the eyes. Inspired by gaming, I designed custom, kid-friendly badges to enhance engagement and make rewards feel unique.
Prioritizing user needs vs. stakeholder goals
Our stakeholders had strong ideas about what this product should include, which made it challenging to shift the focus toward user needs beyond the features they wanted to push. I had to present compelling insights from our surveys to convince them of the importance of prioritizing features that would truly benefit our users in the P1 stage. This experience taught me how to navigate tough conversations and balance stakeholder goals with user-centered priorities, ensuring the product aligned with both visions effectively.
Maximizing research with strategic assumptions
Reflecting on the research stage, I realized the importance of making strategic assumptions about the user journey early on. By mapping potential scenarios, I could have crafted more targeted survey questions and uncovered deeper insights to guide design decisions. Working within tight constraints also taught me the value of flexibility, iterating on research and revisiting surveys as new discoveries emerge is crucial. Moving forward, I’ll prioritize proactive planning and advocate for more resources to ensure a strong foundation for design.
Prototype testing revealed strong user interest and alignment with their needs and showed willingness to incorporate the tool into their practice routine.
85%
Users satisfaction
Introduce Logato
An AI-powered gamified app that help you track your piano practice
Hover to switch language (English/Chinese)
Bridging design to development
After completing the hi-fi designs, I collaborated closely with the developer to hand off the design files and guide the development of the MVP. While technical and time constraints meant not all features could be implemented, this phase provided valuable insights for refining the app further.
01 Handoff with developer
I organized Figma files with clear documentation and annotations for easy navigation
1
I provided developer with an interactive prototype alongside each design to served as a reference and ensure the implemented features stayed as true to the vision
2
I worked closely with developers to adapt designs to technical constraints while preserving core functionality.
3
02 Early deployment: bringing Logato to life
The MVP, focused on practice logging and key tracking features, serves as a testable foundation for future iterations. While some features were postponed due to resource constraints, the core experience is now live for early feedback.
Here’s a real-time screen recording of the deployed MVP in testing, showcasing its functionality in action.
Let’s see the impacts!
Users expressed enthusiasm about features like social competition and badge collect, anticipating more regular practice sessions.
↑40%
Practice consistency
100%
Positivity from Stakeholder
"Your design decisions exceeded expectations, considering user experience from multiple angles and anticipating user interactions beyond what I envisioned for our first design!"
Reflections
Designing for a new user group
This project was a unique and rewarding challenge because designing for kids, in particular, required a lot of thought about their behaviors, motivations, and what would keep them engaged. This led to several key iterations, like simplifying the navigation from three tabs to two, making the app easier and more intuitive for younger users. Through this process, I learned the true value of inclusive design. By focusing on simplicity for kids, I also created a solution that parents found intuitive, resulting in a harmonious experience for both groups.
GLOCAL
Centralizing workflows in a B2b/B2c SaaS managment platform, increasing KPI tracking by 75%
Bullet Journal
Growing an online presence to 500K+ by enhancing social media engagement
© 2025 Ariel Lee. All rights reserved.
