William Harvey

Senior Product Designer

VARI 4000

PA Speaker Control iOS App, for Guitar Center

Role

UI/UX
Branding
Product Management

Team

1 Designer (Me)
1 Developer
2 QA

Tools

Sketch
Zeplin
Trello

Goal

To Design,
Manage Development & QA,
& Deliver a Mobile iOS app to Guitar Center

Overview

Guitar Center approached me for the next stage of incorporating Touch Interfaces for their hardware products, this time for a PA speaker system. The goal was to provide a mobile touch interface to accompany their newest pro audio speaker line, the VARI 4000 lineup.

The speaker already came with a small LCD with a single push-rotary knob, allowing the user to utilize some of the functionality built into the hardware, so our mission was to build a mobile touch interface that would allow the customer to dig deeper into the hardware functionality via bluetooth, providing ability to walk around a venue freely and tune the speakers for any given location of the room, by the comfort of the customer's iPhone or iPad.

The project manager provided a rough mockup of the main screen and a detailed written spec describing the remaining feature set. My role was to:

design the UX of the remaining feature set,
update the living specification with any changes
convert the mockups into full fidelity screens,
design the app icon & splash screen,
establish a design system,
handoff to development,
manage development & QA though deployment
maintain the app quality through the life of the product

Original Wireframes From Client

Wireframes

The first initial wireframe was provided by the project manager. It was my task to find any improvements, determine how the user will get from feature to feature, then convert to Full fidelity design while maintaining the branding of the Harbinger brand.

I suggested the following improvements:

Expand the channel band (the band with the giant "1" in the image) with an animated reaction when pressed, as progressive disclosure of extra functionality to minimize the main screen UI.
Any buttons with 3 or more options will open a hovering modal, so the user never strays away from the main screen.
Any button with 2 options will be a simple toggle, to minimize development.
Tools will be the only panel that leaves the actual Main page because the Tools is not related to the current setup.

The Key to Pro Audio Design is: To Put Yourself On Stage
With the User.

User Journey

I mapped out the users’ steps to see how I could simplify their journey to help them instantly reach the most important features of the product, and return to the main page as quickly as possible. Everything must center around the main page. It should take no more than one button to get back to the main page.

One major problem arose, we originally specified that the save functionality would work like a traditional Overwrite file functionality in a traditional OS. However after receiving the first beta firmware version for the hardware, we quickly learned that the save functionality was not traditionally written in the firmware OS. Instead, each time the user wants to save, they had to save the current working memory into a slot. So I had to go back and redesign the save functionality midway through the beta stage.

The solution was to provide the user the option to choose a slot before saving, after selecting a slot the user is provided the option to rename before saving. The lesson learned in this situation is to clarify the firmware specification for important OS functionality (like saving files), before entering the alpha stage.

The final user flow map

Main Page

UI Design

Since the app will mostly be used in dark environments, I decided to stick with a dark theme and only use color where necessary. In order to highlight the most important areas of the UI, and make them stand out in the dark environment. I limited color to only represent a selected state and added color to the area that provides the most information, the EQ graph. I decided to use a blue>red gradient that shows red when the EQ is boosted (to convey risk), and blue where the EQ is lowered (to convey safety). Any tappable/unselected button will remain white.

It took several iterations of color pallets. I provided several options to run by the marketing department, ultimately we settled with blue as it matched this new VARI 4000 model's branding.

To achieve a unique look, we custom designed the main page, but to save cost on development, we used traditional iOS elements to fulfill the remaining UI, such as the Tools page and the save/load routine.

Results & Retrospective

I found working with the project manager at Guitar Center to be an enlightening experience. I was often challenged with new suggestions to improve the design, many of these being post-design-handoff and during development. So my role was to determine how we could modify the design with minimum development scope-creep.

In my earlier design days, my initial instincts would typically be to say, "no, its too late", but I learned a much more valuable response strategy, and that is to at least prototype the change request, and test with my own eyes to see if the improvement is valuable enough. Often times I could find a solution with minimum development change.

For example, I was asked if I could create a signal strength meter for the bluetooth signal, just weeks before deployment. I checked with the developer, and found that the signal strength data is easily available. So then I took an existing Icon that already had several "signal bands" built into the design, and now we utilize that icon as the signal strength meter, along with its original functionality as the bluetooth disconnect button. It took minimal effort from development, and didn't require any change to the UI layout.

Throughout the project there was an overwhelming responsibility to get the user experience right for our customer. Our customer is typically in a high stress situation, where music is being played live, any disruptions in the sound could be a showstopper. I maintained constant user testing during alpha & beta stages, and with the help of our external QA team, we managed to weed out all the UX bottlenecks and bugs before launch.

We currently maintain a 5 star review status in the App Store!

5.0

AppStore Rating

86

Screens

110

Design Hours

-10dB

Hearing Loss