Acoustic Stream is a device that allows musicians to record, tune, and most importantly track the humidity, temperature, G-forces and usage of their instruments, and receive alerts when the instrument may be in danger.
I worked alongside the team to create the user experience for the companion app to give users complete control over the device and its many functions in an intuitive and fun way.
The app consisting essentially of a series of single screen widgets. The challenge was to make each feature stand on its own, whilst uniting them with a design language that was energetic, futuristic and most importantly intuitive.
Users should be able to access the array of different functions with ease and be able to quickly process the data being presented to them at a glance. The interface had to be both intuitive and to aesthetically complement the physical Acoustic Stream device.
The first step was to figure out the information architecture and a suitable navigation system. At first we opted for a standard 5 option tab-bar, however as the visuals moved along, the navigation was shifted into a sidebar menu, opening up key screen property and decluttering the screens.
Wireframing & Prototyping
Once the flow had been hashed out, I sketched out rough wireframes for the key feature screens. I try not to get too bogged down at this stage of the process with the presentation of the actual wireframes. The wireframes were then assembled in Photoshop (it was all the rage a few years ago), and an Invision prototype was set up immediately. From there on I worked alongside the client to streamline the user-flow and ensure nothing was amiss.
Different visual approaches were taken for the interface. Originally I was heading down the route of having a white interface with orange as an accent colour. It certainly looked very energatic and dynamic, but it was also garish and it clashed with the silver, black and blue of the physical Acoustic Stream device. I was happy with the font choices at this point and thought the Avenir Neue family gave the interface a solid foundation to stand on. Once colour scheme was switched up to match the blue and black of the device, the interface just came alive. From that point onwards, the design process flowed beautifully and things quickly fell into place. I handcrafted all the icons (this was before I realised ready-made icon-sets were a thing) and we were set to apply the design language to the screens.
The final interface sported 30+ screens, because of the versatility of the design language and the simplicity of the architecture, it was a joy applying the visuals to the remaining screens. To add some life to the interface I used a pulsing circle motif animation across the app. One of the more pratical uses was on the Humidity/Temp screen to alert users when their instrument was in danger.
Find devices to stream with wirelessly
Perhaps the most challenging aspect of the interface design was making the streaming devices flow as frictionless as possible. After many attempts, a cohesive solution was designed, that is both effective, but also great to look at.
Do you have a world-changing idea for an app, or do you want to improve your existing app? Perhaps you need a prototype to show investors, stakeholders or just your team; I’d love to hear about it!