Mini Synth


Mini Synth playing Marble Machine by Wintergatan on an iPhone 14 Pro. The player resembles a cassette tape with a piano keyboard right below it.

Description

Mini Synth is a simple web-based synthesizer that empowers Ugandan refugees to create music digitally. The app is part of a larger project that includes educational material and activities.

Launch Mini Synth
Date
2023-04 to 2023-08
Colors
  • red
  • white
  • black
Media
  • UI/UX design
  • development
Collaborators

Background

Youth Social Advocacy Team (YSAT), a Ugandan NGO, needed an educational activity that could improve refugee computer literacy using Galaxy S21 phones provided by Samsung.

Ugandan refugee country-of-origin data visualized as paths on a three-dimensional globe. Top countries include South Sudan, the Democratic Republic of the Congo, and Somalia.

I visualized the refugees' countries of origin as part of our research process. They speak a variety of languages and come from very different cultural backgrounds.


Challenge

The refugees would drum and sing in their free time, yet lacked access to resources that would help them compose music.

How might we create an engaging activity that empowers refugees with the knowledge and tools to create music digitally?


Design

Mini Synth home page displaying a list of user-created songs. Each song is visualized as the tape seen through the bottom of a cassette tape.
Mini Synth synthesizer and soundboard. The player on top resembles a cassette tape. The soundboard below has options for a high hat, kick drum, snare drum, and three tom drums.
Mini Synth synthesizer and piano keyboard displayed horizontally. The keyboard spans the bottom half of the display and is styled to resemble a real keyboard.

The Mini Synth web app is a digital synthesizer that runs in any browser. The interface is compact yet organized. The keys and drums are color-coded, drawing a visual connection between the inputs and the track above.

Close-up of the Mini Synth keyboard. The shadows and highlights make the keyboard appear three-dimensional despite being on a flat display.
Close-up of the Mini Synth player. The sprockets and tape window resemble a cassette tape, with the thickness of the tape spools corresponding to the progress of the song.

From keyboards to cassette tapes, the interface is rich with visual metaphors. This makes the app more approachable as it resembles physical objects the refugees recognize.

  • Skip to start icon
  • Previous subdivision icon
  • Play icon
  • Pause icon
  • Next subdivision icon
  • Skip to end icon
  • Minus icon
  • Plus icon
  • Trash can icon
  • Clear subdivision icon
  • Inset subdivision icon
  • Auto skip icon
  • Menu icon
  • Info icon
  • Enter fullscreen icon
  • Exit fullscreen icon
  • Sun icon
  • Moon icon
  • Duplicate icon
  • Download icon
  • Search icon
  • Cancel icon
  • Keyboard icon
  • Beats icon
  • High hat icon
  • Kick drum icon
  • Snare drum icon
  • Tom drum 1 icon
  • Tom drum 2 icon
  • Tom drum 3 icon
  • Tape arrows

I designed a set of icons for Mini Synth to avoid alienating refugees who speak different languages. Through course activities and general usage, refugees would become familiar with the meaning of these icons.


Accessibility

An “install app” prompt on a Galaxy S21 Ultra running Chrome.
The Mini Synth app icon on the home screen of a Galaxy S21 Ultra. The icon looks like a color cassette tape.

The refugees had inconsistent internet access, which is why Mini Synth was developed as a Progressive Web App that functioned offline. All songs are stored locally on the phone.

Mini Synth running on an iPhone 14 Pro in light mode.
Mini Synth running on an iPhone 14 Pro in dark mode.
Mini Synth running on a Surface Laptop Studio in dark mode. The tape and keyboard expand to better utilize the additional screen.

While designed specifically for a Galaxy S21, Mini Synth is still responsive. The web app works on all devices and has keyboard shortcuts, reduced motion mode, and assistive technology support.


Impact

Five Ugandan refugees playing with Mini Synth around a table. Slides with teaching materials can be on the laptop in the middle of the table.

The web app and related teaching material were well-received during our first group session. Refugees were excited about the app and enjoyed sharing their creations with the group.

Someone interacting with Mini Synth during the RISD Industrial Design exhibition.

This project was exhibited at RISD's Industrial Design department where students and faculty could try out the demo. Over a week, the web app had:

  • 122Total visitors
  • 1,291Total page views
  • 184Songs created
Screenshot of the RISD article titled “RISD Students Create Design-Learning Activities for Refugee Youth.” The page is filled with a large image showing two students interacting with Mini Synth.

Mini Synth was later featured in a RISD article about the Humanitarian Innovations course that this project was a part of.

Reflecting on the project, Patrick Lumumba, our YSAT instructor, commented: “You guys never make assumptions. You always ask questions. I like this collaboration, this togetherness.”


Code

Mini Synth running on an iPad Pro with an attached keyboard.

Mini Synth is an open-source project available on GitHub. Version 1 was released in August of 2023 and all major development on the project has concluded. The code will be maintained for the foreseeable future to ensure full functionality.

If you are interested in contributing to or continuing this project, feel free to contact me.


Credits

Thank you to my teammates – Ashley Fan and Sean Lee – for their incredible contributions to the research, design, and execution of this project.

Thank you to our instructors - Sally Beiruti, Heewon Lee, and Adroa Patrick Lumumba – for their help and guidance throughout the project.

This project would not have been possible without support from the following sponsors: