Secret Interactive STEM App

2016-2017
Native iOS
UX Design
Visual Design
Design Systems
Motion Design

The tl;dr:

I know you're probably not going to read this whole page. So, to summarize:
This project covered design & development of two iOS mobile apps for an audio company with a very cool new product: a DIY speaker or headphones kit aimed at kids & teens to teach them the science of sound while they assembled and experimented with their devices. I was one of two designers, among a creative director, two to three developers, project manager, and two client stakeholders. We handled discovery of the product and its features, visual design, a whole lot of motion design, and collaboration with the dev team as the products were built and eventually shipped.
Now you can just focus on the pretty pictures.

One of the coolest projects I've worked on was for [Name Redacted], a leader in audio products. They had a wildly inventive new product aimed at teaching children & teens the science of sound through a build-your-own speaker or headphones kit. I helped design a companion app for the instructions and interactive activities and games.

The client came to us with the physical product almost complete, and basically a spreadsheet of the activities they were thinking of with some simple prototypes. I was one of 2 designers who got to take it from there into a fully fleshed out product.

Gamifying Learning

These products were aimed at young audiences (ages 8-14, either at home or in a school/camp setting) so we knew the experience had to be engaging and fun. We devised a timeline approach - each level in the app is either a step of the assembly, an activity to experiment with sound, or a mini-game. With every step that is completed, the next level is unlocked.

Some examples:
  • Connect the speaker control board to bluetooth
  • Assembly: connect the coil and magnet to the control board
  • Activity: play different tones while the coil is over the magnet
  • Game: Turn the coil into a rocket that can blast off

Activity: measuring the speed of sound by moving the headphone "pucks" farther apart

Activity: experimenting with stereo & mono audio

Activity: learning how loud sounds needs to be before it can damage hearing. The circle changes size and color based on the ambient volume around the device.

Activity: changing the pitch of sounds the microphone picks up

Assembly instruction steps

Icons & illustrations

Progressive Disclosure

   

How do we ensure that users don't get overwhelmed with educational content, and keep the activity fun? At the end of each activity, there was a learning moment - time for content to explain what really happened with what they just played with. We arranged this content in a few steps:

  • Congratulations screen: you did it!
  • Congratulations + brief content: a short block of explanatory text
  • Learning moment: explanatory text + video
This method allows users to choose how much content they want. Are they someone flying through the app, or someone who really wants to learn the science? The aforementioned timeline also allows them to revisit activities & learning moments after completion.

Motion Design

I did animations for most assembly steps to show clearly how each part fit together. We received CAD files from the client, which were exported to vector files, colored, shaded, and animated in AfterEffects, and delivered via Lottie for seamless "plopping" into the app.

< Back

View All
Next Project >

Motion Guidelines

Now What?

Direct

Send me an email

Social