Designing Dark Noise

Today I want to talk about the process I used for designing my new app Dark Noise. It's an app for playing different ambient noises to help with sleep or focus. I'm not a designer by trade, and this is the first app I've made for iOS, so this is more of a brain dump of everything I did and less of a proposal on how design should be done.

Before I placed a pixel in any design tool, I first figured out what the guiding principles for the app were, and what features I wanted to include. I detailed this step in a separate post, but the end result was:

  • Configurability

    • Targeting pro users who want as many options and hooks to work the app into their workflow as possible
  • Speed

    • Opening app to playing sound should be as fast as possible with no compromise since this is the 99% use case
  • Keep it dark (expect fat fingers)

    • Most users will probably be using this in a dark environment, possibly without their glasses on or half asleep. Keep that in mind.

I have a little bit of experience playing around with Adobe XD, so I decided to use that to build out my mockups. I ended up loving XD so I'd highly recommend it. It's even free! 1

Round 1

The first thing I built was a player page based on the 3rd principle: Keep it dark (expect fat fingers)

Dark Noise design version 01

In case you doubted my lack of design pedigree, this was full design, not a wireframe 😅

Once you get passed the blandness, you can pretty much see the bones of the app from the beginning. An easy to hit play button, a name, and a way to get to the other sounds.

The "Create Noise" page was based on my original idea of generating the different color noises on the fly, and building a little color picker style control to let you mix your own noise. For technical/scope reasons I ended up not going this direction at all, but I do anticipate implementing a "Create Noise" feature at some point in the future.

I also had the main swiping gesture for minimizing the player there from the beginning. One cool thing about Adobe XD is that you can quickly setup prototypes with swiping gestures for animations, and then demo them interactively on the phone. So I could quickly play around with different ideas and get a sense of how they felt.

Dark Noise design version 01

Recorded on my iPhone previewing the XD prototype. I toyed around with having the player minimize to the top, but the rapid prototyping with XD quickly showed me that didn't feel right

The "Charcoal Dreams" name has an interesting back story. From the beginning I knew I wanted to add some sort of fun whimsical feel to the app. I thought it might be fun to give each noise an obnoxiously whimsical name, and if you 3D touched the name you'd get a silly description along the lines of "earthy notes with a hint of cinnamon" or something.

Since I switched strategies to using audio recordings, this didn't make as much sense, but I didn't give up on that goal of having something fun.

First video I could find of a working version of the app. This was in May, so about 4-5 months in.

This first design wasn't pretty, but the structural bones were pretty good. It gave me a direction to go on as I built out the first version of the app.

Round 2

At this stage I actually had a functional app that had a lot of the features I wanted, but it just looked... bleh. I am not a designer by trade, so I didn't really know what to do to make this look better. A designer friend at work pointed me to Mobbin. It's a simple website that allows you to view screenshots of hundreds of different well designed apps, with a pretty good search functionality.

Mobbin

Here I'm searching for "Audio Playback" patterns in apps under the "Music" category on Mobbin

Mobbin helped point me at what elements make up a good looking mobile app, and after iterating on a couple ideas in XD, I landed on a design that will start to look familiar if you've used the app.

Dark Noise design version 02

This should look familiar.

There are two interesting design details I'd like to call out.

Select Noise Arrow

I really liked the idea of the initial view you see of the app being a super simple page with a big play button, but that meant I had to hide the other sound options behind the second screen. I ended up with a slightly unusual design that treated the first page you see as a maximized player that you have to swipe down to reveal the rest of the app.

I was worried it wouldn't be immediately clear how you're supposed to proceed from that page if you wanted to change your noise, so I borrowed a design element from my first MacBook Pro and gave the down arrow a little "breathing" animation. I'm hoping the gentle bounce and opacity change will draw a new users eye enough to guide them through the app, but also not be an annoying distraction in the future.

Icon Animations

One thing I really like about some other audio apps is when it's visually clear when audio is playing so if your speakers are muted you have an indication that sound should be coming out. For example, in Overcast, a darker tint color bounces on the pause button along with the audio that's playing to let you know that there is sound being played.

I came up with a few ideas in After Effects, but I either couldn't figure out how to implement it properly, or it just didn't feel right once I implemented it into the app.

A couple play / pause ideas I tried out.

One idea I had pretty early on was to make a looping animation for each of the static noise icons I was already building. This sounded fun for me, but I was afraid it would take a long time and not really be worth the time it would take me.

At one point I finally decided to try it out and see how it felt. I made the animation for the White Noise icon and added it to the app, and it just felt awesome.

Some of the icons I created for Dark Noise

This solved my "playing indicator" problem, but even more importantly I found the fun I was looking for that I could use to stamp the app with my personality.

Last Thoughts

There are other small touches throughout the app, but I think this touches on the biggest ones. Like I said, I'm not a designer by trade, this is just to outline my thought process while I still remember it. Hopefully this is helpful to somebody out there.

If you have any other questions about my process or design choices, definitely reach out to me on Twitter I love talking about this stuff.


  1. I actually do have a Creative Cloud subscription, but I believe all that gets you with XD is more storage space and access to their fonts.

I'm feeling lucky

Yesterday's release of Dark Noise exceeded my wildest expectations. According to my stats from Apple, the app sold 990 copies which brought in $4,190 in sales for a take home of $2,780 after Apple's 30% cut.1

Dark Noise day 1 stats

Statistics from App Store Connect

And the reaction from the community has been unbelievable. Friends and strangers alike have said so many kind words on Twitter, personal blogs, podcasts, and even a YouTube video! And to top that all off, one of my favorite websites, MacStories, wrote up an amazing review.

A few people have asked me how I got the coverage that I did considering I had essentially zero following and zero connections a few months ago, and my honest feeling is that I didn't do anything special and simply got lucky. But I think that's kind of a cop-out answer.

In a recent podcast, Myke Hurley mentioned that he's stopped saying he got "lucky" in achieving the success he's had with his company Relay FM and started using the term "fortunate" instead. As usual, I think #MykeWasRight.

The truth is, I did work really hard and tried a lot of different things. I have no idea what really worked and what didn't, but I can at least share what I did and explain my mindset.

I'm going to try to write up as much as I can over the next few weeks while this is fresh on my mind, so keep your eyes on this feed if you're curious. If you have particular questions or topics you'd like me to cover, please reach out to me on Twitter.


  1. I'm sharing this all in the spirit of openness. I really hope this doesn't come across as bragging and please let me know if it does

Dark Noise is in the App Store 🥳

Today I released my first app to the App Store, Dark Noise. It's a simple yet powerful way to play ambient noise to help you sleep, focus, or relax.

This is the part where I'm supposed to tell you about a brilliant revelation I had that led me to solve a problem you don't even know you have. But I cannot, because that's now how all of this went down.

The truth is, Dark Noise started as a simple learning exercise and has turned into something more. I chose to build an ambient noise app because I'm very picky, and there wasn't one in the store that fit exactly what I wanted: simple, fast, and fun. There are a lot of options out there, many of them quite good, but I think I've landed on a balance of those three attributes that is truly unique.

Simple

Player and sound picker screenshots

From the beginning, Dark Noise was designed to be simple to use. I primarily use ambient noise to help me sleep, and I wanted to make something that was really easy to use at night, half-asleep without my glasses on.

The main player page has a simple big play button that stands out in the dark. And a quick swipe down will reveal all of the different noises that can be played with a tap.

Fast

Favorites, Siri, and widget screenshots

At the end of the day, an ambient noise app's job is to start a sound, and then get out of the way as fast as possible, so I designed Dark Noise to have multiple ways to quickly start your favorite sound.

You can add and reorder your favorite sounds to a section that always shows at the top of the selection page. Siri Shortcuts integrations allows you to create a shortcut to start any specific sound using only your voice, even through a HomePod! And a customizable widget and Home screen quick actions allow you to quickly activate a noise before opening the app.

Fun

Dark Noise themes

Something I learned from the wonderful weather app Carrot is that a utility app can be delightful to use. I wanted to try to make Dark Noise something that is fun to open up and interact with.

I loaded it up with multiple themes, and (way to many) custom app icon options, but the thing that I'm really proud of is all of the custom animations. Each noise has a custom icon that comes to life when you start playing it. And the buttons throughout the UI have little animations peppered throughout to make the app fun and fluid to navigate.

I'm really proud of how Dark Noise came together, but it wouldn't be close to what it is today without all of the help I've received along the way. First from my friends at work who've essentially let me leech Swifty wisdom from them over the last 8 months. And also from the iOS developer / enthusiast community. Over 900 people have joined the beta and provided me with countless bug reports, feature ideas, and marketing advice. I can't express enough how helpful this has been and it's inspired me to try to lift others up more than I do.

This is just the beginning and I'm excited to see where Dark Noise goes from here. As always, I'd love to hear your thoughts and feedback on Twitter or on the Dark Noise Subreddit

The Principles of Dark Noise

At the beginning of this year I started working on my first indie app to release in the App Store called Dark Noise. It's an ambient noise app for iPhone and iPad.

At first, I had a giant list of feature ideas and no idea how to distill them into a focused product. So I started by forcing myself to pick 3 principles to guide the design.

I eventually landed on these core principles:

  • Configurability

    • Targeting pro users who want as many options and hooks to work the app into their workflow as possible
  • Speed

    • Opening app to playing sound should be as fast as possible with no compromise since this is the 99% use case
  • Keep it dark (expect fat fingers)

    • Most users will probably be using this in a dark environment, possibly without their glasses on or half asleep. Keep that in mind.

After creating the principles, I took my list of feature ideas and tried to slot them all into one of those principles. If they didn't fit, I tossed them in the backlog.

Dark Noise Principles in Action

Keeping these principles in mind as I tried to design and form an MVP was really helpful. I have a tendency to get overly excited by an idea and drop whatever I'm doing and build it. Often that's a bad idea, but sometimes it's good!

Whenever I had the thought of adding a bunch of custom app icons referencing podcasts I like, I realized it was something that might actually resonate with the pro users I was targeting. And seems to have done just that!

Dark Noise App Icons

This also played into my pricing decisions as that market tends to prefer paying up front and is a little more averse to ads. That's not to say I won't add a free tier in the future (in fact I probably will) but it's something I'm always keeping in mind as I make these decisions.

Anyway, I'm not an expert at this, heck I'm barely a beginner, but maybe you'll find my thought process interesting nonetheless.

This post is an attempt to make a more permanent record to this tweetstorm from a few weeks ago.

Thinking With Portals

Being able to learn a new software language, framework, pattern, or platform has been one of the cornerstones of my career. I'm generally pretty quick to pick something new up, and I get distracted easily so I end up doing this a lot.

I bring this up because at the beginning of this year I moved into iOS development, a whole new ecosystem1 where I didn't know the language (Swift), framework (UIKit), or any of the tooling (Xcode), and in the last week I reached one of my favorite milestones of learning a new skill: thinking with portals.

In Valve's 2007 game Portal, you have to solve a series of puzzle's using a unique "Portal" gun that allows you to arbitrarily place portals on the walls, and you can jump through them. While simple on the surface, it's deceptively complicated, and at first you sort of fumble your way through the mechanic to make it through the challenges.

Eventually you will suddenly realize you're brain automatically looks at a puzzle and starts calculating portal placements and jump trajectories, and the game's robot narrator praises you with the phrase "Now you're thinking with portals".

This same phenomenon occurs every time I learn a new software development skill. I'm not talking about the part where you know you can fumble your way through any problem with enough time, though that is exciting as well. This is the part where your brain automatically thinks within the framework or pattern you're using in the background, and instead you're free to focus on the actual design or engineering problem at hand.

This over the last week, I've stopped spending my time figuring out how to do something on my iOS projects, but instead figuring out the best design that I should do. It's a subtle difference, but it's deeply satisfying to finally cross that threshold.

The beginning of learning a new skill is always daunting, but I know that, if I stick with it, eventually I'll reach the Thinking With Portals moment and that's one of the greatest feelings in the world.


  1. I actually have done a bit of mobile development back in the day with Windows Phone 😂, but for the most part I've been up and down the web stack for my career.