INTRODUCTION
Tapatune is a digital learning experience that helps you build your foundation in music theory, one tap at a time!
This gamified learning experience will give you the tools to launch your music journey and to learn your first real musical instrument! You’ll learn how music works by diving into the core concepts behind many of our favourite tunes.
Tap your way through the lessons by using a virtual keyboard to trigger sounds. Complete lessons and collect starfish along the way to unlock new songs to play and apply your knowledge.
MY ROLES
DESIGN CONTEXT
The Problem
The idea of learning music theory can be intimidating for some people. This can be especially true if you’ve tried before but it didn’t work out the way you hoped. Maybe the style of instruction didn’t appeal to you or the material became too advanced, too quickly.
For those who are new to the topic of music theory, this can cause a lot of frustration leading some people to give up on their goal of learning music altogether.
The Solution
Design an app that would give people an approachable, engaging and hands-on way to learn music theory, allowing people to gain a core understanding of music theory and feel confident enough to embark on learning their very first instrument.
PROJECT OVERVIEW
IDEATION PROCESS
User Flow
Prioritizing the educational aspect of Tapatune, the user flow is streamlined to get users from the log in screen to the “Learn” dashboard as quickly as possible, allowing them to immediately begin their first lesson or pick up where they left off in their last session.
Alternatively, someone who has already been collecting points and completing lessons might not want to continue learning right away after opening the app. Once logged in, users can decide whether they want to go to the “Rewards” or “Practice” pages without going through unnecessary navigation.
VISUAL DESIGN + BRANDING
Working with Themes
“tap-a-tune”
The visual branding is heavily influenced by wordplay on “Tapatune”. When initially conceptualizing my app idea, I wanted the name to be visually appealing, grab people’s attention and have a strong connection to the visual design.
I eventually landed on the current title, which I loved for two reasons. First, the name was very literal, which meant its meaning and intention would be understood upon first impressions. Secondly, it had a built-in theme that I could really get creative with! Inspired by the Roman god Neptune (the god of freshwater and the sea), I chose a bold colour palette, themed branding and engaging imagery that reflects deep underwater themes!
Colour Accessibility
Because of Tapatune’s dynamic colour palette, a focus on colour accessibility was paramount. Using the Colorblindly Google Chrome extension, I reviewed each UI colour through the lens of various types of colour deficiencies and adjusted the palette accordingly.
PROTOTYPING WITH FIGMA
Component States
Focusing on the interactivity of components was priority for this project. Intuitive usability and instant user feedback for the virtual keyboard and other sound-triggering elements was vital, while I was able to implement more dynamic animations in other areas of the app.
Frame Size
I built the Figma prototype for Tapatune using an iPhone 13 & 14 frame size at 390×844 screen resolution, placed inside a set of iPhone 14 mockups using Figma plugins.