TPI: A Design Process

Download the TPI app from the App Store

There’s something about meeting with a new client and the discussion that follows. Thoughts already entering my head about a potential design direction, the challenges I might face to ensure the UI is as user friendly as possible whilst also pushing myself and doing something new. The TPI app has been no exception.

The Challenge

TPI commissioned Cocoon to design and develop an iPhone app which would ultimately expand on their current website. The app would offer users access to the company’s products and a selection of professional sound tools which could be used by consumers and sound technicians alike.

Addressing the catalog UI was going to be pretty straight forward, but as we hadn’t worked with sound tools before, we understood there were to going to be a few challenges regarding the particular data we could utilise as well as ensuring accurate readings.

Breaking down the brief to focus on the core elements, we understood we needed to utilise the following in the design:

QR Scanner

Would allow users to scan their products, bringing up the product overview, tech specs, documentation which could be downloaded, and the option for product support.

Serial Number Entry

For older products which hadn’t received a QR code, users would need to enter their serial number instead.

Microphone

Utilising the microphone, sound data would be converted into the relevant dB-A and dB-C readings within a SPL and RTA meter.

Speakers

With the inclusion of a sound generator, the user would be need to generate a variety of output tones at a range of frequencies.

Inspiration

Sites such as Dribbble and Behance are generally my goto places for inspiration. Maybe not so much for usability design but I find them great places to quickly grab UI inspiration to produce a mental mood-board. Colours, fonts, and layout choices, all help to create a mental picture of the direction I might take when it comes to putting a design on the screen.

TPI Pinterest Reference Board.

Usually, our clients haven’t had a mood-board of their own for Cocoon to utilise, but TPI were kind enough to share their Pinterest page. This gave us an idea of the style that themselves try to recreate with their own products and was a great help in really understanding visually, the direction in which the client wanted to take with the app. I was then able to easily identify an aesthetic style and further progress my ideas for the UI.

Initial sketch of SPL & RTA Meter.

User Interface

For the overall feel I wanted to create a UI which was clean, had a clear hierarchy, and was easy to navigate with call to actions which really grabbed the users attention. On a few unsolicited app designs, I’d already been playing around with gradients and how they could work within a design. I knew I wanted to bring this element in. A playful, colourful solution, which presented a huge contrast against the cleanliness of the app.

V1: Product Overview, SPL Meter, Combined SPL / RTA Meter.

From the initial meeting with the client, the app was going to contain 4 key areas for which users could navigate through:

  • Browse Products
  • SPL Meter
  • RTA Meter
  • News & updates

This allowed the standard iOS tab bar paradigm to be used — ultimately providing a familiar UX for any consumers which would be using the app. Due to some of the page titles being quite lengthy and in keeping with the clean UI, we opted to just show an icon for users to click rather than an icon and text. In doing so, I was able to increase the individual navigation tabs by around 10–15% of their normal size, allowing them to be clearly visible within the app.

Left: V1 Navigation. Right: V2 Navigation.

Upon presenting the first iteration of the design, the client had chosen to increase the amount of Sound Tools available to the user. It wasn’t seen as being a huge change to the app, but resulted in us having to rethink how the app navigation would be displayed.

The solution was relatively simple and elegant, and we effectively compartmentalised the app into two areas — Sound Tools and Products. The user is now presented with two clear avenues upon opening the app, reducing the opportunity to get distracted and easily finding the required information or page in under three taps.

Left: Browse Products. Right: Choose Sound Tools.

As a happy by-product, I foresee the new layout allowing the possibility of adding further sound tools, if required, without the necessity of altering the navigation and keeping a sense of familiarity throughout the app.

SPL/RTA Meters

When it came to designing the Sound Tools, Steve had already been busy experimenting with a few possibilities and understanding what exactly we could utilise using an iPhone as the microphone. This resulted in the simple task of converting the data we’d require into a usable and appealing structure.

Looking at other apps that focus on taking sound measurements, there seemed to be an overwhelming theme of trying to cram as much information onto the screen without much regard of actually ensuring the readings they’re providing are correct or easily identifiable. I wanted to remove all this unnecessary clutter and after a few consultations with our client, managed to reduce the necessities down to a simple list.

  • Current input
  • Average input
  • Max input
  • The ability to change weighting
  • The ability to alter speed
Left: SPL Meter. Right: RTA Meter.

The core focus in both meters is the current reading. It’s the fundamental part of each screen, followed by the max peaks, and the average. I wanted to ensure the designs were clear cut and easy to use, giving these data points the space they require to be visually identifiable by the user.

The RTA takes a different approach and uses a bar chart to display the necessary data points to the user. It also leaves behind a peak shadow to display the max outputs across a range of frequencies.

With the use of a start/stop button, users have the ability to control when they would like to take a sound reading. We also added ability to take screenshots and have them saved to their photo library, keeping a document of the reading or share if required. The settings function allows users to change the weighting required (dependent on the environment) and also the speed in which readings are displayed.

Finishing Up

Overall, I’m happy with the final UI design. I feel it succeeds in providing a clean user experience and has clear hierarchy for the user to follow. If I were to be critical, I could argue maybe to say the font sizes could require some attention. We could maybe look to increase them slightly, but this is something that could be altered in a future release and if the analytical data comes back showing a larger percentage of older users using the app. Furthermore, the app doesn’t take advantage of iOS’ dynamic font feature which would take advantage of the font preferences the user has applied to their phone, making the app more accessible.

There’s a few ideas bouncing back and forth between Steve and I on elements we would love to bring to the app in the future but overall, I’d love to hear your feedback — suggestions and opinions are always welcome.

The TPI app is available for free on the App Store.

If you have an idea for an app or website and would like to talk to us, feel free to give us a call on +44(0) 116 268 8721. Alternatively, if you’re in the Leicester area, pop in and say “Hi”, the coffee machine is always on.