PERSONAL PROJECT

soma toma

Timeline

~2 weeks

PERSONAL PROJECT

soma toma

Timeline

~2 weeks

PERSONAL PROJECT

soma toma

Timeline

~2 weeks

PERSONAL PROJECT

soma toma

Timeline

~2 weeks

I wanted a mixing board and pomodoro timer baby

I had the idea for soma toma about a year ago when I became slightly annoyed over my music and pomodoro timer not being synced (aren't all great works a result of slight annoyances?). My idea was to have a mixing board with a few types of sounds (including one for music) where everything was synced with the timer.

Since my programming skills are rudimentary, I had no idea how I'd pull this off, so the idea sat on the shelf. I tried a ton of timers and productivity apps over time to fill the void, and none seemed to have the right balance of simplicity and customization. If I did ever find a way to build soma toma, it would sort of fall here:

Just a simple timer

Full-fledged productivity app

soma toma

I wanted a mixing board and pomodoro timer baby

I had the idea for soma toma about a year ago when I became slightly annoyed over my music and pomodoro timer not being synced (aren't all great works a result of slight annoyances?). My idea was to have a mixing board with a few types of sounds (including one for music) where everything was synced with the timer.

Since my programming skills are rudimentary, I had no idea how I'd pull this off, so the idea sat on the shelf. I tried a ton of timers and productivity apps over time to fill the void, and none seemed to have the right balance of simplicity and customization. If I did ever find a way to build soma toma, it would sort of fall here:

Just a simple timer

Full-fledged productivity app

soma toma

I wanted a mixing board and pomodoro timer baby

I had the idea for soma toma about a year ago when I became slightly annoyed over my music and pomodoro timer not being synced (aren't all great works a result of slight annoyances?). My idea was to have a mixing board with a few types of sounds (including one for music) where everything was synced with the timer.

Since my programming skills are rudimentary, I had no idea how I'd pull this off, so the idea sat on the shelf. I tried a ton of timers and productivity apps over time to fill the void, and none seemed to have the right balance of simplicity and customization. If I did ever find a way to build soma toma, it would sort of fall here:

Just a simple timer

Full-fledged productivity app

soma toma

I wanted a mixing board and pomodoro timer baby

I had the idea for soma toma about a year ago when I became slightly annoyed over my music and pomodoro timer not being synced (aren't all great works a result of slight annoyances?). My idea was to have a mixing board with a few types of sounds (including one for music) where everything was synced with the timer.

Since my programming skills are rudimentary, I had no idea how I'd pull this off, so the idea sat on the shelf. I tried a ton of timers and productivity apps over time to fill the void, and none seemed to have the right balance of simplicity and customization. If I did ever find a way to build soma toma, it would sort of fall here:

Just a simple timer

Full-fledged productivity app

soma toma

Summary

Based on an old wireframe and general idea floating in my head, I was able to create soma toma within 12 days thanks to ChatGPT-4. Try it out while you read about it!

Iterating as Designer & Developer

The original wireframe had enough information to help me kick off the project, but there were a lot of open questions. One big open question was: would users need to log in to a music streaming service to bring in music other than royalty-free options I planned to provide? Ultimately I was making this for myself, but I hoped others would use it, too.

The original wireframe had enough information to help me kick off the project, but there were numerous open questions. Can the audio fade in and out? Is this something people should authenticate into with their music streaming service? Do people really need to track how many sessions they've completed? Ultimately I was making this for myself, but I did hope others would end up using it, too.

Those open questions could be answered later on. I needed to know if I could get the core idea to work and if it felt good to mix 3 different audio tracks together. This is what the original proof-of-concept looked like live:

All of the open questions could be answered later on. I needed to know if I could get the core idea to work and if it felt good to mix 3 different audio tracks together. This is what the proof-of-concept looked like live:

Even with the first royalty-free sounds I could find, I knew instantly the core idea was solid. It felt like I was transported to an entirely different environment; one where all my productivity dreams would come true!

Part of being a designer is obsessing over details. I wanted all sounds to fade in and out when being turned on or off. After tons of back and forth with ChatGPT-4 attempting to squash bugs, I realized this was beyond mine or its capabilities. I had to move forward without audio fading.

Adding Personality to Soma Toma

Since the core functionality was there and audio fade had been nixed, now it was time to hunt for sound effects and flesh out the visual design. I spent a decent bit of time poking around the internet for royalty-free sounds, but Pixabay seemed to have the best selection.

Their selection led me to reconsider my higher-level sound categories. Rain was really a kind of ambiance, and Café was really a setting or environment. Designating higher level categories would allow for variation and additional interesting combinations, like being able to hear birds in a library.

Above was the first polished visual design for Soma Toma. I based it around a looping animated video that I had purchased through UI8 (the rippling sphere) since it would be the most dominant element on the page. Although I do enjoy motion design, it's not my forté and I didn't want to dedicate significant time to creating something from scratch, so I was happy with this constrained direction.

Above was the first polished visual design for Soma Toma. I based it around a looping animated video that I had purchased through UI8 (the rippling sphere) since it would be the most dominant element on the page. It would play while a session was active, and pause while the session was paused or had ended. I was happy with this constrained direction and didn't think it was worth it to dedicate time to creating my own motion design from scratch.

Unfortunately, I started having trouble with the video element. I wasn't able to align its background color with the css-based background color of the page, and there were issues syncing it with the audio. I wasn't happy with the file size either, since it went against the simple ethos of the app. Out of frustration, I shifted my efforts back to hunting for more sound effects.

This time while hunting for sound effects, I noticed a lot of the highest quality sounds were from the user 'Pixabay' (which must be Pixabay's internal sound design team). They were more interesting than what I was able to search for manually on my own, so I started digging through their whole collection.

Some of the sound effects were a little too interesting.

I desperately want to know who Daniel G is. Why his name is necessary in this sound file?!

Around the time I discovered "beer foam" or "conductor announcement on japanese train", I realized I had the opportunity to add significant personality and quirkiness thanks to the audio. To top it off, I had the perfect looping Lottie animation I could use in place of that rippling sphere video, so I altered the visual design to match.

The result is a minimal design with subtle bells and whistles, meant to be out-of-the-way but fun when you interact with it. In keeping with the simple ethos, I decided all music should come from YouTube. Their API is perfect for this, and no login is required.

I haven't really marketed it, but I did receive a decent reaction through a LinkedIn post. Let me know what your favorite sound sandwich is! Here's the link again if you skipped it earlier (shame).

Check out me philosophizing about design →

Read my design philosophy →

Matt Baird is a Digital Product Designer currently looking for his next role

Matt Baird is a Digital Product Designer currently looking for his next role

Matt Baird is a Digital Product Designer currently looking for his next role

Matt Baird is a Digital Product Designer currently looking for his next role