UX/UI Design for Density's Advanced Software
Senior UX/UI designer
About Density
Density revolutionizes DJ mixing by allowing users to capture and edit their sets with precision. Instead of recording audio, Density captures data from DJ decks, including every cue, loop, and knob twist. This enables non-destructive editing of transitions, EQs, filters, and FX within the Density app, preserving mastering-grade tracks without distortion from DJ hardware.
Density offers two options: software and hardware. The standalone Mac app lets users refine studio sets without DJ decks, featuring transition presets, EQ automation lanes, mixer effects, and a LUFS meter for consistent volume. The mastering-grade limiter optimizes sets for platforms like SoundCloud.
Density hardware captures DJ sets in club and festival environments. Connecting to decks and mixers, it records every performance detail, making it like a word document instead of a photocopy.
What have I done
As a UX/UI designer at Density, I focused on enhancing software interfaces to deliver a seamless user experience. I redesigned the main software screen for better usability, optimized the login and sign-up flows for a smoother user journey, and refined the USB synchronization process for more reliable connectivity. I also revamped the onboarding and live recording workflows, making them more user-friendly.
Beyond software, I developed the Density account page and waitlist flow, ensuring a consistent and efficient experience across all touchpoints. I worked on the mobile app and hardware interface, focusing on maintaining usability and consistency across platforms.
Additionally, I designed the main website to clearly showcase our offerings, created a dedicated site for setup equipment guidelines, and developed a hardware-specific website. I also crafted email designs to improve communication with our users.
I've worked on many aspects of the Density software, but going into detail here might be overwhelming. At this point, let's look at my key contributions to the live recording process.
Analyse existing feature
As a Senior UX/UI Designer at Density One, I was tasked with revamping the live recording workflow. The project started with a thorough analysis of the existing system to identify its strengths and areas for improvement. This involved carefully reviewing feedback from customers, stakeholders, and the design lead. From this comprehensive study, I identified several key aspects that required enhancement, which I will detail below.
– Notice
“It feels like an additional feature, rather than one of core functions.”
– Notice
“I don’t want to see it every time I start a set. But if I hide this message, how can I access the list of comparable equipment later if I need it?”
– Notice
“What other equipment do I need? I believe having comparable equipment is important, and it should be more noticeable.”
– Notice
“Why is the main part of the screen often occupied by an unimportant image?”
– Notice
“Live time recording is one of the main functions of the system. However, its current management through modal windows results in an interface filled with various buttons and tools that are not related to the recording process and do not function, as they are in the background. This approach can confuse users and distract them from the main workflow.”
– Notice
“If I can't watch the video, where can I find the image of the setup guide?”
– Notice
“If we're promoting new, modern technology and discussing metadata and advanced features, why are we using an image of an old audio cassette? It seems inconsistent with the innovative image we're trying to convey.”
– Notice
“Is hard to understand that everything is working correctly. It only indicates time within a very detailed illustration”
– Notice
“The window looks similar to the previous two windows but has different actions, which makes it confusing.”
– Notice
“The headline, green description, path, edit button, progress indicator, detailed illustration, another conversion indicator, save button, and all other elements are combined into one modal window.”
After analyzing the existing system and gathering feedback, as well as conducting interviews with stakeholders and the head of design, I started the revamp of the live recording setup workflow.
NEW VERSION
NEW VERSION
– Main screen
I redesigned the entire main screen, but discussing that here would be overwhelming. Instead, let's focus on one element: the button. Its redesign made it significantly more noticeable and user-friendly.
– Recording tool panel
The button activates the live recording tool panel situated below. The entire screen transitions to a black overlay, effectively concealing all elements not pertinent to the primary workflow.
– Information
Customers always have access to additional information about how everything setup and what equipment customers should have and where they could buy it. The additional window opens automatically only the first time for customers after that they can trigger it using the information icon
– Setup guide
The instructional video remains available, as it contains crucial information. However, for customers who may not wish to watch the entire video—either due to time constraints or because they've already seen it - the preview image conveniently displays the final setup configuration. This ensures quick access to key setup details.
– Ready for recording
The interface is streamlined to focus on what's essential with a prominent record button and a clear message indicating that everything is ready for recording. A playful corporate character, familiar with our marketing materials and sign-up process, adds a touch of continuity and personality to the experience.
– Recording
The full-screen animation clearly indicates that everything is functioning correctly, removing the need to monitor small indicators while working on the DJ set. If a problem arises, the animation halts immediately, and an error message appears instead of the recording interface.
– Save flow
Streamlined save flow with all extraneous information and additional windows removed. Now, customers will experience a clean interface with only the standard macOS save window and a conversion indicator.
– Welcome page
