Ambient-Mixer.com Redesign

 

In another quick UX experiment, I chose to remodel of one of my favorite online tools ambient-mixer.com. This is a great website for finding or creating ambient sounds for work, relaxation, or even to set the tone while playing table-top games. I started using it for white noise while working but now I am using it for a Dungeons and Dragons game!

Although I love the site, the aesthetics are a bit dated, and over all I am not sure the brand is really speaking to the use case. Users are often browsing the site for relaxation or even preparing to sleep, and the bright white page doesn’t apply well to that. I also noticed that the logo is based on a cardiograph which is not actually related to sound; if anything it should be a wave-form. But visuals are only half the story, so let’s dig into the features. I’ll identify the problems, and at the end show my solution in full.

Feature Problems

  • Right away we can see some issues directing the user. By driving users to Top Tracks by View first, naturally the result will be for a handful of tracks to stick there permanently. Browsing by Category is off to the side, and Highly Rated Tracks or Most Recent Tracks are both hidden behind a hyperlink. Let's reorganize that so browsing by category is the primary flow, since most people are probably looking for something they can narrow down. We'll keep the other three types on the side bar.

  • The social icons are all over the place here, let's trim the Share This Page subsection down to a single icon that allows sharing via whatever method the user wants.

  • Right now there is no way to add tracks to a playlist for later, which seems like a pretty desirable feature. We can add that.

Single Track Pages

  • Track pages currently waste a lot of space, probably due to the nature of the Mixer UI. For the purposes of this redesign, we'll assume I have free rein but am aiming to keep the functions somewhat similar to the original for user comfort.

  • I’ll change the channel bars to be horizontal, for similarity to how other multi-track audio programs present themselves, and to take advantage of the space.

  • "Vote now!" can simply be a like/dislike icon set, rather than a hyperlink that is less clear.

  • a Keyword/Tag system is critical in a system like this. Right now the categories are completely made by the webmaster, manually adding subcategories and new pages as needed. The Search function uses an overly forgiving text search of descriptions and titles (so "Ship" can return "Shop", etc.) Instead, let's go to a suggested tag system where tags are user-created (but still moderated) and tag prevalence can decide the subcategories instead; once a tag reaches a critical mass of usage it will generate a subcategory.

  • Popular Searches should be weighted to similar search terms, guiding users to the best keywords.

  • The chosen tags should auto-define the background image for the track, but it can always be overridden by the author.

The Category Page

  • The design of a Search Results page, a Category page, Featured Tracks, Highest Rated Tracks, etc. currently are all completely separate individual pages, but going forward they can follow the same design based on refining by tag. This should reduce the amount of manual curation needed from the Webmaster, and be quick to navigate by the user

Pricing, or Download Page

  • When trying to download a particular track, you are currently directed to a store page that looks like this.

  • Since images are pre-selected and many will match, they don't serve the purpose of identifying the track on their own here. We need to show the full information about the track so there's no risk of confusion or paying for the wrong one.

  • The pricing method being by track length is a bit absurd when the default site provides infinite loops. The prices are also far too high in my opinion, I doubt anyone is using this feature, but coming up with a new business model is a task for another day.

The Big Reveal

After all my ideas for changes listed above, here is a walk-through of the results in prototype form! You can compare by browsing the live site here. What do you think, is it an improvement?

The Next Steps

Right now ambient-mixer.com doesn’t have a mobile site version, it directs the user to download the app. I will convert the new design into a mobile version taking into account Material Guidelines and Human Interface Guidelines, and post it here soon.

I would also like to make a Light Mode for both versions.