Designing with Sound in Mind: Crafting RecLab’s Digital Experience

RecLab® is a sound company founded in Barcelona in 2006 offering comprehensive sound solutions for any audiovisual production.

RecLab’s control room. Photo by Ran-el Cabrera.

Overview

Back in 2006, I had the opportunity to design RecLab’s corporate identity. Seeing design as a powerful lever for business growth, nearly two decades later —in 2025— RecLab commissioned me to design its new website —reclab.cat—, extending the brand into the digital space. As part of this brand refresh and digital expansion, we created a new tagline, “Fem sonar el teus somnis” (“We make your dreams sound true”), which is introduced prominently on the homepage as a concise and inspiring introduction to RecLab’s vision and mission.

RecLab’s homepage tagline. Crafted to capture user attention from the very first glance, it clearly communicates RecLab’s value proposition and invites users to explore further.
RecLab’s sound engineer recording location sound. Photo by Ran-el Cabrera.

I began by creating a project brief, which gave me a clear understanding of the company, its current context, and its expectations. The brief also helped me align with the company and establish the foundations for the project.

After some interviews with the different stakeholders —from the final client to the developer team— I could write some user stories, so that I could explore options in Sprints and make decisions.

I used several ideation methodologies to better define what needed to be solved, distill the business perspective, and help determine what had to be designed, incorporating the user’s perspective into decision-making and task prioritization.

In this project, I collaborated closely with a frontend developer (Tailwind CSS framework) and a photographer in a seamless workflow, ensuring top-quality results through effective, actionable feedback.

Responsive layouts adapted for mobile, tablet, and desktop.

The functionality

Based on the insights from the research, I began designing a proposal using UX patterns, flow diagrams, information architecture (IA), wireframes, and a high-fidelity prototype. This allowed us to test the concept and evaluate whether it was the best way to solve the challenge and reach the desired outcomes.

A section of Reclab’s website sitemap, designed to optimize navigation and content hierarchy through effective information architecture.
User flow diagram for VoiceBank. Outlines core interactions and decision points to support usability and conversion.
Wireframes of the Work page. Early layout exploration focusing on content hierarchy, navigation flow, and user interaction patterns to ensure a solid foundation before moving into high-fidelity design.

I would like to highlight the planning stage of this project, as it was particularly important. This stage focused on organizing, structuring, and labeling content in a way that allows users to easily find what they need. Information Architecture helped me define clear paths, ensuring consistency and preventing confusion. In doing so, I considered the three essential concepts of IA —Users, Context, and Content— as outlined by Peter Morville and Louis Rosenfeld in their book Information Architecture for the World Wide Web (1998).

Mobile main navigation — a clear Information Architecture was key to ensuring usability and intuitive access to content.
Mobile view of the Resources page — Designed for ease, the Resources page makes it simple to download guides, explore technical requirements, and collaborate effortlessly with the studio — all in just a few taps.
Desktop view of the Voice Bank page — users can explore an extensive and diverse Voice Bank, filter by categories, create and share their own list, or request a free quote with just one click.
Mobile view of the Work page — designed to let users easily explore the latest updates and browse through all projects.

The website was designed following accessibility principles, complying with WCAG 2.2 AA standards, the European Norm (UNE-EN 301 549), and the European Accessibility Act (EAA, 2019/882).

The form

To shape the website’s visual design and establish a clear hierarchy, I built a lightweight yet consistent Design System in Figma that covered all the requirements of responsive web design.

As part of this system, I defined a typographic system, a type scale, and a color palette (primary, secondary, background, and shades). I also established an 8 pixels grid for different viewports (mobile, tablet, and desktop) and created a custom icon set.

Screenshot from Figma showing the typographic system used in the RecLab website design, including font styles, sizes and hierarchy.
Screenshot from Figma displaying the RecLab website color palette, including neutral, primary and background colors used throughout the design.

In addition, I designed all the interactive UI elements, including buttons (with all states: default, disabled, hover, and key-focus), forms, checkboxes, radio buttons, accordions, slider steppers, and dropdowns.

Screenshot from Figma showcasing RecLab's form components in various states, including default, hover, focus, error, and disabled.
Screenshot from Figma showcasing RecLab's button components in two types —primary and secondary— and in four states —default, disable, hover and keyboard-focus.

Usability evaluations

I conducted both Nielsen’s and Tognazzini’s heuristic evaluations during the definition and design stages, prior to launch, and post-launch to identify usability issues.

Key Learnings

While working on this project, I’ve learned that fluid, continuous, and direct communication with front-end developers is essential to achieving high-quality results. We maintained close collaboration through regular video conferences and used Figma to document and track design changes.

To complement the prototypes, I also added clarifying annotations directly on the Figma screens. I categorized these annotations into three types: Interaction, Style, and Structure, helping to ensure that design intentions were clearly understood and accurately implemented.

Copyright © 2025, RecLab. All rights reserved. This work is published on this website with the courtesy and express authorization of RecLab.

This is a real project designed by Adrià Lleó for RecLab.