Josephmark Studio

RCA Records

Eclectic, interactive, musical and unexpected.

Best User Interface / Webby Winner

Josephmark Studio

Best User Interface

Webby Winner

To create an unparalleled experience that is the embodiment of RCA’s acronym: Records. Culture. Art. Alex Naghavi, Executive Creative Director

Q: Can you briefly describe your project and the concept behind it?

A: As a staple of the cultural zeitgeist, RCA Records realised the need to reinvigorate their brand and online presence to carry them through the next 100 years of artistry. With a renewed brand strategy and visual design system, we made an edgy website with motion and interactive elements, including a variable musical typeface and an interactive 404 page.

Q: Once you settled on your idea, what influenced your decision on the chosen technical approach? How did it differ or go beyond approaches you’ve taken in the past?

A: RCA is in the Sony family, which means abiding by its security requirements and using the WordPress CMS. Our ambitious vision meant using React, which WordPress doesn’t connect with natively. So we’re using asynchronous network requests to pass data between the CMS and our UI components and a central data store to make that data available across pages and components.

Q: What were some of your biggest learning and takeaways from this project?

A: Through the self-appointed challenge of making a ‘musical variable typeface,’ we learned a lot about the technical implementation. Like the difference between a typeface reacting to your speakers versus your microphone—the latter is more sensitive and allows more contrast, so the typefaces move in a more dramatic way. We ultimately chose songs that had a mix of highs and lows in the melody so we could achieve the desired expressiveness of the fonts.

Q: What web technologies, approaches, tools, or resources did you use to develop this experience (WordPress, headless, AI, Sublime Text, HTML5, Adobe XD, etc)?

A: All JM projects start with a workshop to unpack needs, expectations and constraints. We design in Figma, so the process was highly collaborative. We used the WordPress CMS and developed a custom theme using React, Redux and Vanilla Extract CSS. We also incorporated a custom-built variable musical typeface, a universal music player, and several third-party plugins for touring, job ads, and playlist functionality.

Q: Why is this an exciting time to create new digital experiences? How does your team fit into this?

A: Technology is evolving at such a rapid pace, thanks largely to AI. It’s exciting but also kind of scary. We’re working in the realm of the unknown which means we can’t really predict future consequences of the things we’re building today. Our team is currently building products using AI, AR and VR. Whilst we love to play and experiment, we do so with our eyes wide open and with genuine consideration for people and the planet.

Q: How did you reach a good balance of your own creative ideas and technical capabilities with a fair representation of the client’s brand?

A: We worked closely with RCA on their brand strategy through to their new visual direction. So, when it came to the website we had a very clear idea of the style, energy and level of interactivity we needed to bring this new direction to life. Fortunately, we also had an amazing and collaborative lead developer, Angel Estrada, who was willing and able to bring to life the wild and wacky ideas we had.

Q: What did your initial moodboard, wireframe, or prototype look like? How did those ideas change throughout the design process?

A: Our wireframes gave us an idea of what the page hierarchy and content should look like. But once we got into the visual design, we allowed ourselves space to break away and be more creative and interactive. We were constantly editing our concepts to reach a final point of satisfaction that met the client's needs, worked within the technical constraints and ultimately matched our desires for a memorable site experience.