Feel the Beat
Designing a rhythm training game for people who don’t consider themselves gamers or musicians.
Software: Photoshop, Illustrator, After Effects, Unity
Lumosity is a brain training app on iOS, Android, and the web. It’s a platform where players engage with over 60 different interactive mental workouts.
Goal: Add value for current subscribers by making something different than any other game in our library.
Strategy: Create a rhythm training game using a “call and response” interaction, where the player hears the music first and then they join in.
Timeline: Around 6 months to get the web MVP version and another 3 months for the mobile port
Team:
Developer: William Delventhal
Art: Brendan Milos (lead), Bryan Young
Design: William Delventhal (systems), Brendan Milos (UX/UI)
Project leads: Shelby MacLeod(product), Eli Delventhal (dev), Sarah Sax(art), Lance Vikaros(education)
Design and test interactive prototypes in collaboration with the developer to find a solution that was both intuitive and supported the educational goals of the game.
Driving the narrative theming process to arrive at a solution that worked for our core users and aligned with our brand.
Creating high quality production assets including illustrations and animations for the course.
Technical implementation into Unity including the animation and UI design to work for both web and mobile platforms.
Research & Constraints
We began by interviewing several cohorts of people in order to help establish some direction on how to approach this project.
Select an group of users to read some of the insights we discovered.
-
Our users don’t consider themselves gamers, so it was important to demonstrate real world benefits. Our users also tend to skew older, have lower technical proficiency, and some portion of our audience even has physical limitations like poor eyesight, hearing, or motor skills issues.
Based on marketing segmentation research and user interviews, we targeted a subset of our subscribers who prioritize learning new skills and exploring different activities over strict self-improvement in familiar tasks.
-
We interviewed a lot of musicians and rhythm game developers at the start of the project. We learned a few key takeaways that informed our design philosophy:
Rhythm is intuitive to learn at a basic level, but that improving that skill is very difficult.
It’s easy to make levels that are too challenging for players.
People desire to make music as part of a group.
-
Multiple scientific studies have shown that rhythm and music training can enhance attention, speech and language skills, perception and working memory, and motor skills. The corpus callosum also known as the “wiring” that connects the two hemispheres of your brain is also shaped by this type of training. In this case it seems to be related to the coordination of auditory and motor skills needed to play music.
-
Due to the small team size and high replayability of our games, this meant we would need to procedurally generate the rhythms to meet the required quantity of unique levels. The design challenge would be making the end result sound like music.
Gameplay UI Wireframes
Usability of the core gameplay mechanic was the highest priority. Once we had a usable and engaging prototype of that, we could shift focus onto the overall user progression.
Gameplay HUD
Early on, we chose to represent the rhythm as a circle because it aligns well with the “call and response” method of learning music that plays out like a game of Simon Says.
Player Input
After testing player input options for the web version, we decided to start players at the “F” and “J” keys of the home row, because of two factors:
The neutral hand position prevented awkward postures or hand cramping.
The keys have physical bumps on them to help users locate the keys.
Motion Design Explorations
Motion was an essential aspect of core gameplay, communicating to players how accurately each drum beat was being played to the complexity of the rhythms presented to players.
User Testing
The most important goal at this phase is clarity of the core task. Do users know how to interact and are they getting the support they need when struggling?
Pain Points
The spinner visual was confusing. We used it as a visual helper to get users started, then made it disappear after they were successfully interacting for a bit. This confused them and they thought they were done playing.
Solution: Remove the spinner! We get the user to understand audio is required from the start and work on reinforcing the beat visually through secondary motion queues like matching animation speeds to the tempo.
Levels were too hard! Our initial plan was to start with 2 player controlled drums and ramp up to 4. However, our users tended to skew older and less musically inclined.
Solution: Start with 1 drum for player input and focus on keeping a steady tempo on the first difficulty level before introducing any variation to patterns.
User Flows
For user progression, we settled on accuracy over time, which helped distill the target metric to an easy-to-communicate goal post. As they gain proficiency, players would ramp up in difficulty thorough mechanics like more drums to play and advanced musical concepts like syncopation.
NUX Tutorial
By the end of the tutorial, players should understand that they need to use audio, know which keys to press, and be able to hear a consistent beat like a metronome.
Narrative Theming
Before we could move forward with a visual direction, we needed to settle on a narrative theme that felt on brand and appealing to our core users.
Once the team had settled on a few solid options, I created short animations queued up to audio to gauge the appeal with our core audience.
User Research Takeaways
I conducted user testing on the narrative theming options based on appeal and clarity with cohorts of both paid subscribers and free users who were interested in learning music.
Here are the key takeaways
The themes that were more musical scored higher on clarity.
Having a retro theme resonated with specific age groups in our audience.
Humor was appealing, because it helped users to relax and approach rhythm training with less anxiety.
Visual Design
I was inspired by the MTV generation of music videos, montages, group dancing, and big hair. The 80’s dance aerobics theme appealed to the nostalgia in our demographic and workout culture fit perfectly with the aspirational tone of self-improvement in brain training.
Mood board created at the beginning of production.
Visual Motif - Cassette Tapes
Early explorations of the visual design for the UI and screen flow were focused on the idea of picking up a cassette tape to play music for the workout class. Leveling up would unlock new tapes with more challenging songs.
Sketches applying the Retro 80’s musical workout theme to the screen flows.
Character Design
Characters in the game served three functions:
Player input controls the dance movements of the characters, with each of the drum inputs mapped to one side of the body. This added feedback to player input.
Their idle animations are mapped to the tempo of the song so that they always match the beat. This added a secondary visual prompt to support users.
They add humor to the game. Based on our user tests, this helped reduce player performance anxiety around playing music.
The character designs are based on user personas created by our marketing research. I modeled them after common kinds of people one would see in the gym, pushing the shape language of each to feel unique.
The "Enjoyer" persona is drawn to brain training games for the fun and novel aspect. They use the product more casually.
The "Learners" persona are users who continually seek out different ways to educate themselves and are open to trying new things.
The "Improvers" persona are the users that want to maximize their score and performance. They are on the upper end of engagement in our product.
Final Designs
Title screen setting the narrative for a musical aerobic class..
Level select screen is represented by a box of cassette tapes.
Animated transition to the gameplay screen inspired by 80's montages.
Gameplay screen with dancers that move to your inputs.
Results screen that rates your progression on a boombox, where unlocking a new level is represented by a cassette tape.
Score screen inspired by synth wave sunset imagery.
On mobile, the level select is the first screen users see when opening the game.
The drum input labels have been changed to numbers and the scene is simplified including only one dancer.
The assessment screen has been recomposed to be vertical.
On mobile, the score screen is simplified to an animated modal across all games.
Iconography
Impact
Player Testimonials
“Love it love it love it! The cassette tapes, the aerobics dancers, the music. It is fantastic.” - Cynthia
“Really enjoy the theme and sound effects. Great idea for a game!” - Esther
“I play Piano and drums and am LOVING this game!!!” - Laura
“As an aerobics instructor in my real life. I live on the beat. This is a great game for new instructors to use.” - Cebie
“I know how much music helps the brain with memory and this game does even more as it assists in the brain with coordination of the fingers.” - Leanora