Noa Noa, a new music venue from Fauna Productions, in the heart of Santiago, had a signed lease, and target opening date of April 6. The result was a three-month intensive project where we designed a new brand system, the physical space with a connected screen system, a new website, and a suite of digital tools to support the new workflows.
Creating a Strong Identity
The first milestone was to create a strong identity to brand the music venue. This identity had to be flexible, as the venue features a wide range of electronic music genres and styles. The new identity also had to be consistent and recognizable when used in both physical and digital space. Third, the visual identity had to define a simple design system that makes it easy for their team to produce hundreds of assets every month.
Inspired by the repetition of words in the venue’s new name 'Noa Noa', we used the scrolling marquee as a unifying principle for the new identity, celebrating the traditions around electronic signage at music venues and cinemas.
To reinforce the horizontal aspects of the marquee, we worked with font designer Weichi He to design a variable typeface where all characters can stretch from very narrow to very extended. This typeface was created in two versions: One for the low-resolution screens in the physical space and one for the digital space.
The Physical Space
We teamed up with the architecture firm Oficina Bravo to design the physical space as an extension of the brand. The most prominent aspect of the new architecture is the set of monochrome low-resolution screens that dominate the outside and inside of the venue. These screens function as an extension of the brand by using the pixel-based version of the Noa Noa typeface to display the upcoming lineup and the bar menus as a scrolling marquee.
The decision to use screens was in large part a functional one, as digital signage is easy to update and remove the need for printed paper throughout the space. The lineup and bar screens are backed up by a set of tools accessible through an admin section of Noa Noa’s website that allows staff to render scrolling marquee videos for the screens using data pulled directly from the website’s custom CMS.
The centerpiece of the interior design is a large screen behind the stage that spans the entire room from wall to wall – a screen with the same low-resolution qualities as the other screens in the space that displays video content curated by guest VJs. This screen is backed by a powerful real time conversion system that can be controlled with a web-based tool accessible on any computer or mobile device, allowing the team to create, manage, and play a looping playlist of videos or show live video input from a VJ device.
Noa Noa's DJ screen seen across the dancefloor
Custom Tools
While Noa Noa first and foremost is a brick-and-mortar music venue, the operation of the space is done entirely from their website. This setup streamlines workflows and prevents double-work, since edits can be done in one place and go into effect in both physical and digital space. The most comprehensive of these custom tools is the one created for the marketing team to quickly create promotional assets that use the new brand system. This web-based tool allows their designers to drag and drop images and text onto a predefined grid and generate static images or animated marquee videos.
The tool we built allows for operation of the space to be done entirely from their website.
Noa Noa has so far created hundreds of assets for social media and other marketing purposes, easing the load of their designers to focus on the creative aspects of the brand while maintaining consistency across all applications.
Technical Decisions
The technical decisions behind the Noa Noa architecture were primarily driven by a need for remote access to all the digital and physical services that support the operation of the venue. As shown below, we wanted the staff to be able to update the website, the lineup and bar screens, as well as the large VJ screen directly on the website without having to be in the venue. Instead of using popular databases such as PostgreSQL or MongoDB with a custom mechanism to sync data and video files from the cloud to the computer in the space that runs the screens, we chose to build the entire data layer with the Dropbox API.
The Noa Noa website is written in React.js and loads all data from JSON files in the Dropbox API through a custom caching layer using AWS Cloudfront. To update data on the website, staff can log into the admin section of the website, edit the data, and submit changes which are sent to the Dropbox API through a serverless proxy built with AWS Lambda. The tools for generating the videos for the lineup and bar screens are also built with React.js, and all of the video rendering happens on the frontend with HTML5 Canvas and a custom WebM video exporter. These tools also load data for use in the videos from the Dropbox API.
Technical Architecture
The technical architecture began with the assembly of the screens. We worked directly with suppliers in China to define the specification for the components and controllers. Once delivered, we developed and fabricated the support structures, assembled and installed each of the screens in the venue.
The most complex part of the technical architecture is the tool to control the large VJ screen. On the website, staff can either choose between playing existing video playlists or creating a new one directly in the interface. Playlists are JSON files stored in the Dropbox project folder along with all video assets. A custom-built PC running the Dropbox client automatically syncs all of these assets to its local drive. When a staff member selects a playlist for playback, a JSON file is updated via the Dropbox API and automatically synced to the PC where a custom Node.js application listens for changes to the JSON file and plays the selected playlist.
The custom tool interface allows the staff to easily control the content playing on the screens.
In order to not require expensive video conversion in the cloud, the PC performs all video conversion and cropping on the fly with ffmpeg before streaming the output to the screen via UDP. Ffmpeg also adds an optional dithering filter to the output in order to make the videos look sharp on the low-res screen. This and many other settings can be controlled on a per-video basis directly in the website interface. All in all, the technical setup is extremely flexible and robust with the largest expense being the $11/month Dropbox Plus subscription.
The Noa Noa project is a good example of the type of work we enjoy doing. It is in essence a branding project, but with deeply technical solutions that make an organization work faster and smarter by optimizing workflows with custom tools.