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

Image alt tag
Here Comes Treble

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
Here Comes Treble

Perfect Pitch Toddler Learning, Ear Training Screen

Screenshot From Apple App Store

Frame from Figma Community

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.

Here Comes Treble

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.

Here Comes Treble

Typography Sample

Background Image In Text From Unsplash

Here Comes Treble

Color Palette Inspired by Bluey

Image of Bluey From of Google Images

Here Comes Treble
Here Comes Treble

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

Here Comes Treble

User Journey Map

Here Comes Treble

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. 

Here Comes Treble

Play Sequence User Flow

Here Comes Treble

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. 

Here Comes Treble

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. 

Here Comes Treble

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.

Here Comes Treble

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