Perfect Pitch Toddler Learning, Ear Training Screen
Screenshot From Apple App Store
Frame from Figma Community
Mark Singer
UX Designer
Here Comes Treble
Interdisciplinary Teams Compete in a Three-Day Hackathon Challenge to Design and Build Educational Apps for Children
Mockup Frame is from Figma Community
We Teamed Up To Solve a Problem
All teams were given a task to design educational apps for children over a three-day period. My role was one of two UX Designers on an interdisciplinary team made up of folks in Software Engineering, and Data Science. The greater team talked about different directions we could go in, and eventually landed on designing a music app, to teach kids how to play and sight-read piano music.
A Toddler Ear-Training App Inspired The Project
A Robust C&C Analysis Shaped Our Direction
I looked at a total of twenty competitors and comparators. Some competitors were specific to teaching piano to kids, and some were general music learning apps. Comparators were varied, as I looked at gaming, language learning programs (including the fun TV series Muzzy), ASL applications, crafting applications, and speech therapy applications.
One app in particular, Perfect Pitch Toddler Learning, inspired everyone on the team the most, which was an app to ear-train toddlers. It used stickers to help the kids associate notes with things they were already familiar with. This really resonated with the team and inspired the features we hoped to incorporate in our own project.
Mood Board Compilation
Images From Unsplash
Mood Board and Ideating Starts The Design Process
One of the first things I did was to set up a mood board, to get inspired. I compiled images in multiple categories to help me generate ideas, with some of those images including:
Primary color
Things kids see everyday (i.e. books, color pencils, classrooms, schools etc.)
Musical Instruments Against Primary Colors
Research indicated the importance of primary colors, bright colors, large font, and pictures when designing for kids. User research compiled by the ux team indicated the friendliness of rounded edges, and pastel colors. The popular cartoon Bluey came up during my team's user research, which became the perfect source material to design a color palate from.
Typography Sample
Background Image In Text From Unsplash
Color Palette Inspired by Bluey
Image of Bluey From of Google Images
Melody, 4-Year Old Toddler
Toddler Image From Unsplash
Dancing Figure Illustration from Icons8 Megacreator
Musical Note Illustration from Flat Icon
User Journey
I suggested a template for journey mapping that included areas for us to explore the user's emotions, user flows, system flows, and opportunities to address user needs/pain-points. Together, the UX team explored the user's journey through the eyes of the user persona Melody, a four-year old toddler playing a new game to learn music. It was important for us to understand Melody's journey, so that we could design a product that fits her needs. More specifically, my focus was the user flow/system flow (or, "music app," and, "kids").
Some key insights my team got from this process were:
Use simple nursery rhyme songs
Walk the child gently through the flow
Only give positive feedback
Reinforce correct notes
User Journey Map
Practice Sequence User Flow
User Flows
I explored two scenarios discussed by the team to really understand the interactions our persona, Melody, would likely undertake.
The first flow I created was a Practice Sequence, which shows what it would look like for Melody to choose a song and practice. This was important because it gave the team a visual as to how the app would work.
The second flow was a play sequence, which would encourage the child to play a song by memory (with visual assistance, of course). User research showed that it might be too challenging for a young child like Melody to recall a song they just learned, but it opened the door for a conversation on what to do after Melody ended her practice.
Play Sequence User Flow
Composite Image of My Sketches
Sketches Synthesize Research
The design team did a few rounds of exploratory Crazy-8 sketching together to help us translate research into viable ideas for the next phase of the UX process, known as prototyping or the design phase. I explored logistical aspects, different features (like stickers), and how Melody would pick out her favorite song to play.
From this point, we compiled everyone’s sketches into a content placement chart, to see where there were similarities and differences in our sketches. This helped us better organize this new information in a way that could set us up for success in the next phase of design.
Changing the Background on the Sticker Page
Prototyping Creates a MVP
My team designed a prototype in Figma that responded to user research trends of the importance of positive reinforcement in kid’s learning, and the C & C analysis I did. I designed the sticker book flow, which allows Melody to place stickers anywhere in her own personal space and customize the background. My inspiration for this was old scrapbooks that people used. I was reinventing them, for a digital audience. Due to the time constraints of the project, we did one iteration to see how children like Melody and their parents responded to the design.
Usability Testing With Child
Designed with Icons8 Mega Creator
User Testing
Before handing off to engineers, my team did a round of testing to reveal possible usability problems in a remote setting. Testers found the application easy to use and intuitive, which allowed us to proceed to the next phase with confidence.
Hand-Off To Engineers
One and a half days into the Hackathon, me and the design team met with the software engineering team on Figma to share our deliverables so they could work their magic and really run with our designs.
My contributions to those deliverables that were most relevant to the engineers that day were UI elements such as color palates and typography suggestions, and wireframe flows.
One thing that came out of this meeting was the feasibility of features and elements of our designs. There were limitations to what could be engineered in the time we had, and at the end of the day we needed to be able to create a fully operational product, to present to all the teams at the EOD the following day.
Prototype Walk-Through
Click Here To See Prototype
I experienced cross-functional teamwork in an agile setting.
I Learned Teamwork
I learned how to advocate for my ideas, working with designers, and a great interdsciplinary team with folks in design, data science, and software engineering. I learned about what a great resource data science folks can be for ideating, and better understanding the problem, and how time constraints can effect feature development in the engineering process. Overall, this Hackathon was a great achievement for me. Here Comes Treble was a great success and we are already working on our next project. I’m grateful for this experience and can't recommend Hackathons enough for early-career designers to get their feet wet in agile teamwork.
1
Iteration
6
Screens
12
cups of coffee