"Lindsey Cole | UX / UI / Data Science

Step 1

Identify Requirements

Rane, a newly acquired Seattle-based company, required a "battle-ready" dj product offering that shared a compelling vision for the company's technically-savvy future. This product needed to leverage newer technologies, posess a low learning-curve for users, and take the top place as the most enviable piece of gear in the battle-mixer market. This strategy would enable the company to essentially disrupt itself, in order to retain its category leading position.

I lead the development team in Interaction Design and I am responsible for graphical user interface design and the user experience.

Official Website : dj.rane.com/products/seventy-two

Step 2

User Flows & Stories

As a product category specialist, I partnered with the Product Manager to flesh out early concepts and understand business goals. We created epics and user stories in order to capture the descriptions of the main features of the app from the perspective of the end-user. This helped to describe the type of user, what tasks they wanted to accomplish and why.

Step 3

Validate Strategies

Our team leveraged newer technologies through introducing a 4.3" multi-touch display capable of displaying moving audio waveforms at the core of the mixer. Iterative paper mockups were used to validate initial touch-screen interaction concepts. These key product decisions were further validated on both user and distributor / market levels via receptive informational meetings and user research interviews. User Interface designs were brought to the Rane engineering team as well as Serato's product planning team in order to deduce technical feasability. Additionally, I advocated one modification to the hardware user interface—to not rely on a single detented rotary encoder for Serato FX incrementing—this modification would stand to benefit the product experience for Serato users.

Step 4

Information Architecture

Developing a harmonious logic between all hardware and software elements was my central-focus in structuring the application's information achitecture. Mapping out the application allowed stakeholders to effectively guage how frictionless our user workflows would be as compared to other industry offerings. Complex features not central to the user's workflow could be persuasively removed from the product spec, reducing time-to-market, by referencing the fully laid-out architecture.

Step 5

Wireframes

With our core design decisions validated, I developed low-fidelity wireframes. These wireframes provide the product team and stakeholders with a visual guide for the complex structure of the application and most importantly, how the user will interact with it. In order to make user workflows more performant, I leveraged simple touch-gesture interactions to complete complex user tasks. Users may apply simple swipe gestures to accuate 2 different parameters in an FX chain simultaenously via the product's Touch FX interface.

Step 6

User Interface Mockup

The user interface for the product is comprised of a 4.3" multi-touch display, 4 rotary encoders, 8 toggling buttons, 16 performance pads, 2 fx switches, and an array of mixer eq, buttons and I/O. Wireframes specific to the touchscreen UI were further developed into high-fidelity release assets for the software engineering team. Interestingly, all assets required automated rotation due to the vertical layout of the screen within the product's top faceplate. Typography options for our GUI were evaluated across 3 key metrics — character allowance, legibility and international language support. A vertically oriented screen elevated the need for a tall and compact, legible typeface. Integers required fixed-widths, to ensure smooth time transitions for seconds and deci-seconds.

#45DB45

Primary Accent - Emerald

#24A7FD

Primary Accent - Dodger Blue

#F78D46

Primary Accent - Jaffa

#9B9B9B

Primary Accent - Dusty Gray

#0F4294

Background - Torea Bay

#2C3235

Background - Outer Space

Step 7

Implementation

I led Kanban style project tracking during collaboration with the software engineering team. I specified all front-end features and built-out implementation tracking boards for the team's use and stakeholders' visibility of progress. Development builds were continually reviewed and bugged via pre-production and full-fledged mass-production units, to ensure implementation milestones were met.

Step 8

Testing & Iteration

Quality Assurance testing is performed on each feature implement prior to its inclusion in the product application. Once a feature's acceptance criteria is successfully met, the implement solution is user tested and iterated upon based on qualitative and quantitative user testing data. The XY feature was the most heavily iterated upon for this project — fx variables, combinations and resulting labeling systems were optimized for maximum control and sonic performance.

Step 9

Refinement & Finalization

The user-workflows were continuously refined based on shifting project and Serato DJ Pro integration requests and constraints. The product's user experience was heavily evaluated throughout development—making note of feature improvements alongside the Product Manager. Due to the software being programmed onto physical devices for mass production, a clean finalization of all 1.0 development was a requirement. Further feature improvements were prioritized and scheduled within a development backlog for forthcoming update releases.

Project Assessment

Summary & Reviews

As Interaction Design Lead I provided a unique, playful, and low-learning-curve UI and built out a competitive, battle-ready mixer. Since 2013, I've advocated for localizing audio waveforms into a mixer and am pleased with the full-color, low latency offering for our users. Reviewers, prior to product in hand, are correctly anticipating the user workflow optimization opportunity implied by this strategy.

The thing that stands out the most is the high-resolution touchscreen, capable of displaying vertical waveforms from Serato DJ. This is the first mixer to actually achieve this, and it will certainly help DJs to focus even more on their performance instead of watching their laptop screen."

— DJ Tech Zone

The very obvious wow factor is the screen. It’s a high res multitouch affair, and from the screenshots I’ve seen displays the essential elements of Serato DJ including waveforms (both full and zoomed) with grids and cue points too."

Smart Mixer