UX/UI Case Study: Learn Piano Chords
When I was a child I was dreaming to learn how to play the piano. But as I also loved to draw it was decided to be my main direction and no piano classes were included. All I had was a broad collection of classic music to listen to and the encyclopedia on music where I read about famous composers. Skipping the following years of studies and self-discovery, now I’m a designer. And recently I was asked to work on the app dedicated to piano learning. Can you imagine what I felt about it?
Of course, I was more than happy to dive into this adventure.
The Beginning
The client presented me with the product he’s been working on—a simple app with the main idea to help users master piano chords. Clear introduction in the app, the ability to keep the user’s progress, and… a willingness to make a colorful app.
You know who’s a color lover here? ;)
The Task
- Make sure a user understands every single action.
- Stand out from other similar apps.
- Add a cohesive color palette.
Let’s Get It Started
As we’ve discussed, the app should have a dark mode and I collected some of the UI works as the examples. I started my work right from creating the final designs including the UX changes to the existing app.
The Structure
First steps
The user’s journey consists of the intro part and the preferences choice as the first steps.
You can’t move to the next step of the actual practicing without choosing tempo, inversions, and keys. If you do not choose them, there appears a kind reminder-popup with the explanation.
The gradation of the elements in a visual language consists of the input field, options to choose from (with the clear contrast for the chosen state), and the CTA button—the most prominent element.
Vertical to horizontal orientation
The following learning process has a horizontal orientation. That’s why, even though the text and countdown are turned to indicate that, we still should add an icon to symbolize the turning action—to make it user-friendly.
The horizontal orientation was chosen as it matches more the piano keys image.
Wait, piano keys are white and black
And that’s an interesting thing as the app itself has a dark mode. This means, that in any case, you can’t draw dark keys on dark background as it won’t have enough contrast. Simply check the following comparison.
That’s why my task as a designer was to keep high contrast and visibility while switching the colors in the opposite way—the black keys became bright, the white keys are dark. As the shapes and proportions of keys are instantly recognizable, this color switch isn’t a problem for the user.
Among these screens, there’s also a user’s progress that showcases the last sessions and time spent.
There’s more to add to the app on the following stages of its’ development including the gamification elements and wider choice of preferences. Also, after it’ll be released, we’ll be able to see how users interact.
The Logo
When it comes to the logo for piano learning service, there’s a very precise image of the common symbol. Is it possible to avoid the same result?
Apart from the piano, my key points were the circle of fifth, musical notes, treble clef, and more abstract shapes like waves symbolizing the music playing.
If you think it was easy to stick to a one and only idea, it wasn’t actually like that. And at a certain point, I couldn’t resist trying the piano keys as the main hero.
The main idea of the variants from the second row was to showcase a specific chord.
The disadvantage of such variants is that they start to look more like an image, a small illustration as there are too many elements collected in one place.
Then, I decided to try a different approach.
It was based on the first letters of the name—L (Learn), P (Piano), C (Chords). I also played with the shapes to bring the contrast of the straight and curved angles.
Some of the results brought a harmonious combination while in another case, the part of letters started to move around (the last in the second row above).
The final version is a composition of letters as a very compact element. And while you might not see the first letters there, you will see the abstract nature. Just as music is.
In the final logo, you will see the abstract nature.
Just as music is.
Last but not least, the textual part. From my perspective, the best solution was to put the words next to the logo having each word on its’ own line. This way, they correspond to the logo division. From the composition perspective, I aligned each letter vertically.
The Conclusion
For me, it was a very exciting project to work on. At first, I remembered my childhood dreams to learn how to play the piano. Then, I was inspired to create a bright service that helps many people to reach their dream turning on my empathy and enrich their skills.
I’m eager to see the first version alive and to continue working on developing the app further.
Thank you for reading!
You might also like:
