T E E

H R

I A W R

A going on...

IS A HAND GRENADE

THIS PROJECT

there is a war going on for DOMINATION of the home and pro audio recording market where plugins are the armaments and my project is the hand GRENADE

this war can be solved

with

__::REFINED ELEGANCE::__

PT1. RESEARCH

I AM A FORMER USER AND POTENTIAL USER.

Usually when I would play with my band, Death Cartel, or for other acts around North America I would chat with the sound man or talk to other artists about their recording process. Universally, Waves plugins came up short despite their exceptional quality when compared to rival brands like UAD and NI. 10 years of research = Waves dated UIs inspired by the 60s+70s were lost on the 21st century creative.

FLUXIBLE: UX CONFERENCE

Starting off on this project, there was a lot I wanted to change about the way the Waves plugins suite currently looks and operates. After chatting with Kate Wilhelm, Senior UX Designer at Quarry previously at Blackberry and IBM, she pointed out that I have the unique opportunity of being a potential user of the product I would be designing and am a current user of the existing Waves Plugin Suite.

All of this brought me to the three tennants of which my concept is founded on.

BRANDING The Waves brand isnt carried over the plugins in a strong way. By making unified UI elements I can create a visual language to That weekend I sat down at my digital audio workstation communicate that these plugins are, infact, but did a little mixing. I was inspecting the plugins thoroughly, comparing them to competing plugins and thinking made by the same company. USER EXPERIENCE about what the Waves Audio Plugins could be. Using this method, I made a simple list of what I like about the current Many of the plugins are very different in Waves Audio set up and what I would like to see changed looks and layout. This can cause a headache for users. I also hope to be able to do from a users point of view. There many more points but more with the screen real estate to get more they distilled down to the following: work done with less clicking. LIKES: DISLIKES: DESIGN A/B bar aesthetic The aesthetic of the programs should be upUndo button analogue dated to match the current state of affairs in Type in values skeuomorphism the audio world. These boutique plugins will BPM sync control unnecessary clicks get a sleek new skin that will add value to uncreative pallet the user experience and the product.

The need for analogue rackmounted themed UI is lost on most new users. Older users found that many of them were hard to read and harder to use than their more modern counterparts. From my testing, many of the waves plugins failed to reach AA in terms of colour luminance contrast and UI elements behave differently across their large offering of plugins. CONCLUSION: The plugins are constricted by their analogue predecessors form factor.

FRANK JE FLITTON//WAVES AUDIO REDESIGN

C L I E N T N A M E //

S T R AT EG I C FO C U S //

Hypothetical Waves Audio Ltd.

THESIS STATEMENT: Considering their function, pro audio plugins have a very dominant visual component. The quality of the user interface can add definite value to the UX and win customers away from a competitor. Waves Audio Ltd. makes great quality audio plugins that lack visually. They hint at skeudomorphism but are visually scattered across the septum from photo-realistic to a basic gradient. A unified UI would greatly improve the UX and add to the boutique quality of the Waves plugin suites. Improving the quality of the visual design can help with legibility, streamline a workflow, and make the end user more comfortable. This would lead to better reviews, more referrals, more tutorials and all around more hype. By utilizing iconography, keeping things simple as well as utilizing modern UI practices in addition to the traditional audio UI elements I will be able to reimagine the Waves Audio plugins in a new and fresh way.

PR O J EC T//

Third Year Graphic Design Thesis

PR O J E C T O B J EC T I V ES //

By utilizing iconography, keeping things simple as well as utilizing modern UI practices in addition to the traditional audio UI elements, the Waves Audio Ltd. plugins will be reimagined in a new and fresh way.
TO N E & M A N N E R //

Improving the quality of the visual design (UX) Accessibility features (legibility, scaleable, type in values...) Increace precieved value of products Reimagine the products in a new and fresh way.
TA R G E T AU D I E N C E //

Clean, fresh, geometric, simple

PR O J EC T M A N DAT ES // L I F E S PA N

Life span would be for the next 25 years before next redesign as per industry standard.
A PPR OVA L PR O C E S S //

My target users of my product will be 1835, mostly male, and have an interest in pro audio. They will be looking for the best software that will make their work stand out and value quality, efciency and intuitiveness. The target user is probably a musician. The target users will most likely live in North America or Europe and can read English. They often use their smartphone and computer for business related activities such as audio mixing and research.

Feedback from peers and faculty.

T I M E L I N E S //

Phase 1 Brief meeting Brief/planning meeting Student brieng Creative concepts for identity, ad (specications required)

OctDec [DATE]

DESCRIPTION

Identity - brand (look and feel of new material) UI Kit Redesign of 5 products Commercial Web Page For Bundle Mockups UI Flat UI Interactive Commercial Page Other (Email blast)
C U S TO M E R ( U S E R ) B E N E F I T S //

Phase 2 Finalize indentities UI kit Mockup chek point (2/3) Flat mockups of plugins and UI kit

DecFeb Jan 20 Jan 31 Feb. 19 Feb. 28

Help customer create music and use the tools provided by the products in a simpler and easier fashion.
S U PP O R T FO R B E N E F I T C L A I M S //

Phase 3 Create Interactive mockups Product Page Deliver project

D E L I V E RY I N S T R U C T I O N S //

FebApril April 4 April 10 April

Independant research/servey.
C O M PE T I T I O N //

Submit during second semester for evaluation. Native Instruments, Izotope, Universal Audio
D I S T R I B U T I O N // E VA LUAT I O N C R I T E R I A FO R C O N E S TO G A S T U D E N T S L I S T E D O N PR O J EC T S H E E T// R E F E R E N C E //

Online via Webpage

C R E AT I V E C O N S I D E R AT I O N S //

Make sure to watch for UI design trends while suporting the boutique, top-notch quality of the Waves Audio Ltd. products.
K E Y M E S S AG ES //

Fadeyev, Dmitry. 12 Useful Techniques For Good User Interface Design | Smashing UX Design. Smashing UX Design Usability, Psychology and Information Architecture. N.p., 19 Jan. 2009. Web. Wilhelm , Kate. How to start out in UX, stay on top of current practices, and build your UX muscle. Starting Out or Bulking Up: UX Circuit Training for Any Fitness Level. Fluxible/University of Waterloo. University of Waterloo School of Pharmacy, Kitchener.

Waves Audio is an industry leader that makes quality software for the audio professional.

My aim is to design with plugins that have a refined elegance. Refined in terms of ease of use and in terms of accuracy that the plugins can convey. Elegant in terms of the overall presentation. The display is overall easier to read and displays elegance of a consistent design set. Ability of using an analogue feel with digital accuracy to produce music in the 21st century. The best of the past with an eye on the future. A GUI shouldnt be something thats hard to read or something in which its parts seem disconnected. With a consistent design the user knows what to expect in the interface presentation universally in whatever plugin the purchase may be.

PT1. PATH WAY TO VICTORY starts ugly, gets better

THIS WAR IS WON BY UNCONVENTIONAL

the first attempt was a lackluster:

Original

Rework

It has the soul, but is misguided, cluttered and confused. //*A horrible solution.

FAIL QUICK LY AND CHEAPLY

the second attempt was worse:

Original

Rework

Fischer-Price called, they want their hopes and dreams back #emotions //*Another horrible solution.

THIRD TIME IS THE CHARM...

the third attempt something magical happened:

I noticed that the vector outlines of drawing the UI elements functioned better than when I coloured them. This new direction has a raw infographic feel that captures the refined elegance the the audio creative of the 21st century craves. By allowing mulitiple input methods for manual fine tuning or typing in values it meets accessibility standards. Also, all of the colours have a contrast exceding 4.5:1 (AA) to ensure that all the users can use these UI designs for years to come.

PT2. THE PLANS EVOLUTION

Images from my origional concept:

These origional knob designs show how the design process came full circle. Their streamlined form alows the user to modify multiple related properties of the effect while saving screen space. It is also a visual illusion to a knob like on a mixing board which will help older users feel at home and be a convenient metaphor for new users that have experience with using hardware like an electric guitar or guitar pedals.

PHIPHIPHI PHIPHIPHI PHIPHIPHI

The new design is based off of phi/Fibonacci. For Example: The spacing of the white tracks on the knobs is 1 pica, interior padding is 1 pica and the interior elements are is 2 picas tall. It all fits together forming a modular UI that can be adapted across a suite of other plugins. As a proof of concept, I chose to pull the design across five plugins including: L2 Ultramaximazer Center Vocal Rider W43 Renaissance Compressor These plugins have common UI elements found in audio effect plugins as well as a customized component.

My sketches to arrive at UI components: Sliders

THRE SH

THRE SHOLD

THRE SHOLD

-10.0 -10.0

-10.0

-1 0. 0

-10.0

-0.2 -12.5

TYPE 1
TYPE 1 TYPE 1 NORMAL 24 BTS

NORMAL 24 BTS
-12.512.5 -12.512.5

NORMAL 24 BTS

Threshold gauges

Buttons

Solution

For this third attempt, I started from scratch and gradually stripped the elements back to their most baisic forms.

The button graphic in this setting is comparable to a track slider on a typical mixing board.

My sketches to arrive at UI components: Knobs

-12.5
THRSHO LD -12.5 -12.5

-12.5
THRESHOL D

-12.5
threshol d -12.5 -12.5

2 option slider

-12.5

-12.5

52% L

90% R

-12.5
threshol d -12.5 -12.5

74%
spread 74% L = 74% R

74%
spread 74% L = 74% R

74%
spread 74% L = 74% R

-12.5
threshol d -12.5 -12.5

Finals used in comps

Solution

In addition to setting values, this knob model has the ability to let the user maniplulate the signal.

PT3. BATTLES THAT WON THE WAR

Like anything, the layouts started on paper. Here are select scans from my sketch books:

UI SIDE/SIDE

Original

Rework

This plugin was an experiment to display the information in three different ways: The ring, waveform and knob/dials.

Origional

Rework

If you watch a tutorial of how to use this plugin, you will quickly see that its fuction is confused by its form. The rework may appear to have more going on but it takes the user through the workflow in reading order.

Exploration:

Original

Rework

As a proof on concept, this plugin illustrates how sliders could be used as part of an EQ. Note that the rework displays the value so that the user has an accute awareness. The type could also be a text field to deliver more control.

Original

Rework

This simple compressor is much more space effecient. It quickly lets the user make their adjustments in this compact UI.

The output knob shows the adjusted level inside the track.

Original

Rework

Used to enhance or supress stereo sounds, the Centers dated UI is restrictive and the small knobs make it hard to target specific sounds.

By blowing up the center ring and placing the controls along it the function and use becomes more clear.

graduated panning curve

(if 30deg = 50% then)
90.00

deg to turn

72.50 60.19 49.80 39.30 29.94 21.81 14.97 8.68 3.75 0.0

% of panning
The Center plugin makes use of graduated panning by using the equation y = 0.006*x^2+0.3*x to redistribute the values where y is the adjusted angle and x is the desired perceived percent toward a side from the center. This will allow the end user to accurately place and isolate the fringe frequencies in the signal giving as perceived by the listener. This will help in giving the user a wider sounding mix that is true to the placement of the markers in the UI.

Rework

SIMPLE EXPLANATION: When stereo audio is panned (a process of splitting the signal more to the left or right bus by a set amount) it is often split along a curve as opposed to a linear one. For example, 30 is interpreted as half way, 50%, to a side as opposed to the linear interpretation of 45.

NOW I JUST GOTTA ANIMATE / PRESENT.

Thanks for reading!

Original Statement: Considering their function, pro audio plugins have a very dominate visual component. The quality of the user interface can add definite value to the UX and win customers away from a competitor. Improving the quality of the visual design can help with legibility, streamline a workflow, and make the end user more comfortable. This would lead to better reviews, more referrals, more tutorials and all around more hype. Waves Audio Ltd. makes great quality audio plugins that lack visually. They hint at skeudomorphism but are visually scattered across the septum from photorealistic to a basic gradient. A unified UI would greatly improve the UX and add to the boutique quality of the Waves plugin suites. By utilizing iconography, keeping things simple, utilizing modern UI practices in addition to the traditional audio UI elements I will be able to reimagine the Waves Audio plugins in a new and fresh way. Accessibility Features: High contrast colour layouts adhere to AA and AAA standards for luminance to enhance readability for low vision of different types of colour blindness. The minimum luminance contrast for small text to achieve AA is a contrast ratio of 4.5:1. The font Helvetica Heavy set in lowercase (where possible) was chosen for its outstanding legibility at small sizes. The red and green hues were chosen as they are audio industry standard colours. By using a grid the UI elements are easier to get acquainted with across the effect suite and are easily identified. The interfaces elements are also designed in a way to allow function in a touch input based environment. This may be more relevant in the future as more tablets are equipped with full operating system distributions and touch panels become affordable for desktop and laptop workstations. Any sliders have a text field companion where the user can input a desired number directly into the program. In addition to making this more accessible it is a definite value added feature for advanced users that will calculate various measurements relating to their sound like delay or reverb timings or compression settings based on their signals input metrics and various equations. Why Circles? Music and audio in general is based on revolutions of patterns whichin theoryare nonterminating. The clearest examples of this are tones and scales where they can be express as the linear sequence ABCDEFG but start again at A or G. This can also be seen mathematically where 440Hz, the A note, is the same note but an octave lower when halved to 220Hz or an octave higher when doubled to 880Hz.

Circular knobs are also an extremely efficient UI mechanism that is often found on audio equipment like guitar effect pedals and rack mounted units alike. In theory, one may fit three knobs with padding in the same area that a track from a slider would take if the width of the sliders grip and the knob are the same. (C=2 r DRAW DIAGRAM) In addition, the perceived gradual nature of audio (many of the numbers are perceived to ease in and out when listening) the visual of a circle provides a convenient vehicle. Common UI Components: Sliders: Often in a vertical orientation, these are often used to control the volume of the signal in whole or part. It is most commonly found representing input/output levels to mimic a mixing board. By listing the numeric value on the face of the slider the user can easily find the sweet spot manually or type in values. Buttons: Commonly representing binary commands (on and off). Dropdowns are signified by the double dot underneath the button. If the buttons are circled then they are related commands to the plug-in. Inactive plugins lack a coloured border, it is black. Gradual Panning: When sound is coming from two speakers at equal levels it is perceived that the sound is coming from a position between the two of them. This front position is only seen as center from HRTF (head related transfer function) when listening with headphones. When the level of the sound is inconsistent from the two speakers the ear interprets binaural sound somewhere in 3D space. With a typical two speaker set up, the sound would fall somewhere along the x-axis going from left to right. When stereo audio is panned (a process of splitting the signal more to the left or right bus by a set amount) it is often split along a curve as opposed to a linear one. For example, 30 is interpreted as half way, 50%, to a sideas opposed to the linear interpretation of 45. To help the end user take advantage of this phenomenon and place their sounds accurately and in context many modern digital audio workstations interfaces such as Acid, Logic and Studio One implement an easing feature when manipulating stereo (left and right channel) audio panning. The Center plugin makes use of this feature by using the equation y = 0.006*x^2+0.3*x to redistribute the values where y is the adjusted angle and x is the desired perceived percent toward a side from the center. This will allow the end user to accurately place and isolate the fringe frequencies in the signal giving as perceived by the listener. This will help in giving the user a wider sounding mix that is true to the placement of the markers in the UI.