top of page

2017 - 2020

Faders

From tech startup Semantic Audio Labs

​

I was the lead UX designer on the digital audio workstation (DAW), which is a collaborative web/in browser application for audio engineers, podcasters and bedroom producers around the world.

​

Faders is a collaborative online digital audio workstation (DAW) from Semantic Audio Labs, a tech start up founded in 2017.

Mockup.png

Team

Me - UX/Product Designer
5 Front End Devs
6 Web Audio/Back End Devs

Tools used

Adobe XD

Adobe Illustrator

Adobe Photoshop

Project status

Launched - BETA

Project Environment

The project was a full agile environment with scrum masters and the whole shebang. There were 3 separate delivery groups.

​

  • 11 backend/front end devs

  • Daily stand-ups at the scrum board/wall

  • User stories traversed the wall leading with most impactful stories down to backlog

  • Fortnightly sprints and retros

Faders User Space - For managing sessions.

My Job

  1. Create an entire UI for the collaborative online audio engineering app from the ground up

  2. Keep stakeholders happy!

  3. Brand Faders as a stand alone product of Semantic Audio Labs

 

Much of what we were working on is still not yet live, and Semantic Audio Lab's policy on sharing internal work is very strict. This means I can't share everything online.

A tiny glimpse at a small part of the huge Faders Design System (Confidential)

My UX process

  1. Research
    Who are the customers?
    What is the product?
    What are the goals / deliverables?

  2. Document findings

  3. Collaborate and build relationships
    Customers, Stakeholders, Devs, Engineers

  4. Design (early low-fi) and socialise with stakeholders
    Keep everyone in the loop, to prevent sync issues with key stakeholders

  5. Iterate & test
    Testing with actual customers (access seekers) where possible,
    with corridor / gorilla testing as a fall back

  6. Design in html/css/js (hi-fi) and socialise with stakeholders

  7. Iterate & test
    Test test test - Did I mention test?

  8. Deliver for implementation
    Sitting with the devs / engineers to mitigate any potential miscommunication and dramatically reduce double handling

  9. Support implementation
    I made myself available to anyone / everyone who had any questions.

    It was important to keep the lines of communication open between designers and engineers to maintain a level of trust we were working hard to build within the team

What did we start with?

A simple yet impossibly complex DAW filled with engineering technobabble, coded in tables and not very pretty.

The original Timeline View user interface created by Semantic Audio Labs engineers.

Just one of the cartoon illustrations I drew, that were used in weekly blogs and tutorials.

Research

Fight fear with understanding

  • I needed to understand audio engineering. What is it? How does it work? Is there a document? A Video? Something? Anything?

  • I interviewed the lecturers and students of Audio Engineering at Birmingham City University (my old university)

  • Web audio engineers

  • Technicians

  • Stakeholders

  • End user customers

  • Even a young piano prodigy!

View of the Timeline View. Including the Assets panel and user comments.

Research findings

  • Logic Pro was everybody's go to DAW

  • How could we convert these die hard fans onto our platform? Did we want to?

  • We wanted to make Faders as accessible as possible and appeal to bedroom producers, podcasters and for education 

A view of the Mixer view with the FX (Plug-ins) at the bottom.

Piano roll for MIDI.

Drum machine for MIDI.

High level UX goals

  • Create something that is familiar yet unique for new and existing DAW users

  • Demystify audio engineering techno-babble!

  • Meaningfully group information

  • Avoid complication at all costs!

  • Reveal complexity progressively

  • Make it set for scale

  • Ensure the app does the heavy lifting for the human

An overview of FX/Plugins built into the DAW (Faders).

FX loading animation.

The FX categories and Loops panel, in collaboration with 'Noiiz'.

Documentation

Beautiful and accurate documentation can help illustrate user journeys, process flows and research outcomes.
These documents needed to be very ‘polished’ to impress internal stakeholders so they would take any findings seriously.

​

  • Documented research outcomes

  • Socialised design documents with stakeholders and colleagues to check for accuracy

  • Created an internal knowledge base (confluence) for documents and findings to be uploaded as a reference for the team

An screenshot of the Stage View. An area where you can manually pan drag instruments around a stage to adjust there volume and pan.

A variation of a few instrument icons I created.

Project outcomes

Faders is now in its BETA stage and is attracting new users every day. We continue to receive feedback through the Audio Engineering community and our users, and I still do design work for Faders in my own time. We continue to make more and more collaborative features as we go on and roll them out for our users.

bottom of page