Noa Noa. A cross-me­dia iden­tity for an elec­tronic mu­sic venue.

Fauna Productions, one of the largest In­de­pen­dent con­cert pro­duc­tion com­pa­nies in Chile, had long been want­ing to open their own mu­sic venue in San­ti­ago. When the lease was signed on a street-level du­plex in the heart of San­ti­ago, we be­gan a close part­ner­ship with the Fauna team to make the new venue a re­al­ity. The re­sult was a three-month in­ten­sive pro­ject where we de­signed a new brand sys­tem, the phys­i­cal space with a con­nected screen sys­tem, a new web­site, and a suite of dig­i­tal tools to sup­port the new work­flows.

Noa Noa's DJ screen

In­spired by the rep­e­ti­tion of words in the venue’s new name ‘Noa Noa’, we used the scrolling mar­quee as a uni­fy­ing prin­ci­ple for the new iden­tity, cel­e­brat­ing the tra­di­tions around elec­tronic sig­nage at mu­sic venues and cin­e­mas.

The first mile­stone was to cre­ate a strong iden­tity to brand the mu­sic venue. This iden­tity had to be flex­i­ble, as the venue fea­tures a wide range of elec­tronic mu­sic gen­res and styles. The new iden­tity also had to be con­sis­tent and rec­og­niz­able when used in both phys­i­cal and dig­i­tal space. Third, the vi­sual iden­tity had to de­fine a sim­ple de­sign sys­tem that makes it easy for their team to pro­duce hun­dreds of as­sets every month. In­spired by the rep­e­ti­tion of words in the venue’s new name ‘Noa Noa’ (noanoa.club), we used the scrolling mar­quee as a uni­fy­ing prin­ci­ple for the new iden­tity, cel­e­brat­ing the tra­di­tions around elec­tronic sig­nage at mu­sic venues and cin­e­mas. To re­in­force the hor­i­zon­tal as­pects of the mar­quee, we worked with font de­signer Weichi He to de­sign a vari­able type­face where all char­ac­ters can stretch from very nar­row to very ex­tended. This type­face was cre­ated in two ver­sions: One for the low-res­o­lu­tion screens in the phys­i­cal space and one for the dig­i­tal space.

00:00

We teamed up with the ar­chi­tec­ture firm Oficina Bravo to de­sign the phys­i­cal space as an ex­ten­sion of the brand. The most promi­nent as­pect of the new ar­chi­tec­ture is the set of mono­chrome low-res­o­lu­tion screens that dom­i­nate the out­side and in­side of the venue. These screens func­tion as an ex­ten­sion of the brand by us­ing the pixel-based ver­sion of the Noa Noa type­face to dis­play the up­com­ing lineup and the bar menus as a scrolling mar­quee.

00:00

The de­ci­sion to use screens was in large parts a func­tional one, as dig­i­tal sig­nage is easy to up­date and re­move the need for printed pa­per through­out the space. The lineup and bar screens are backed up by a set of tools ac­ces­si­ble through an ad­min sec­tion of Noa Noa’s web­site that al­lows staff to ren­der scrolling mar­quee videos for the screens us­ing data pulled di­rectly from the web­site’s cus­tom CMS.

00:00

While Noa Noa first and fore­most is a brick-and-mor­tar mu­sic venue, the op­er­a­tion of the space is done en­tirely from their web­site.

The cen­ter­piece of the in­te­rior de­sign is a large screen be­hind the stage that spans the en­tire room from wall to wall – a screen with the same low-res­o­lu­tion qual­i­ties as the other screens in the space that dis­plays video con­tent cu­rated by guest VJs. This screen is backed by a pow­er­ful real time con­ver­sion sys­tem that can be con­trolled with a web-based tool ac­ces­si­ble on any com­puter or mo­bile de­vice, al­low­ing the team to cre­ate, man­age, and play a loop­ing playlist of videos or show live video in­put from a VJ de­vice.

00:00

While Noa Noa first and fore­most is a brick-and-mor­tar mu­sic venue, the op­er­a­tion of the space is done en­tirely from their web­site. This setup stream­lines work­flows and pre­vents dou­ble-work, since ed­its can be done in one place and go into ef­fect in both phys­i­cal and dig­i­tal space. The most com­pre­hen­sive of these cus­tom tools is the one cre­ated for the mar­ket­ing team to quickly cre­ate pro­mo­tional as­sets that use the new brand sys­tem. This web-based tool al­lows their de­sign­ers to drag and drop im­ages and text onto a pre­de­fined grid and gen­er­ate sta­tic im­ages or an­i­mated mar­quee videos. Noa Noa has so far cre­ated hun­dreds of as­sets for so­cial me­dia and other mar­ket­ing pur­poses, eas­ing the load of their de­sign­ers to fo­cus on the cre­ative as­pects of the brand while main­tain­ing con­sis­tency across all ap­pli­ca­tions.

00:00

The tech­ni­cal de­ci­sions be­hind the Noa Noa ar­chi­tec­ture were pri­mar­ily dri­ven by a need for re­mote ac­cess to all the dig­i­tal and phys­i­cal ser­vices that sup­port the op­er­a­tion of the venue.

The tech­ni­cal ar­chi­tec­ture be­gan with the as­sem­bly of the screens. We worked di­rectly with sup­pli­ers in China to de­fine the spec­i­fi­ca­tion for the com­po­nents and con­trollers. Once de­liv­ered, we de­vel­oped and fab­ri­cated the sup­port struc­tures, as­sem­bled and in­stalled each of the screens in the venue

The tech­ni­cal de­ci­sions be­hind the Noa Noa ar­chi­tec­ture were pri­mar­ily dri­ven by a need for re­mote ac­cess to all the dig­i­tal and phys­i­cal ser­vices that sup­port the op­er­a­tion of the venue. As shown above, we wanted the staff to be able to up­date the web­site, the lineup and bar screens, as well as the large VJ screen di­rectly on the web­site with­out hav­ing to be in the venue. In­stead of us­ing pop­u­lar data­bases such as Post­greSQL or Mon­goDB with a cus­tom mech­a­nism to sync data and video files from the cloud to the com­puter in the space that runs the screens, we chose to build the en­tire data layer with the Drop­box API. The Noa Noa web­site is writ­ten in Re­act.js and loads all data from JSON files in the Drop­box API through a cus­tom caching layer us­ing AWS Cloud­front. To up­date data on the web­site, staff can log into the ad­min sec­tion of the web­site, edit the data, and sub­mit changes which are sent to the Drop­box API through a server­less proxy built with AWS Lambda. The tools for gen­er­at­ing the videos for the lineup and bar screens are also built with Re­act.js, and all of the video ren­der­ing hap­pens on the fron­tend with HTML5 Can­vas and a cus­tom WebM video ex­porter. These tools also load data for use in the videos from the Drop­box API.

Bar area including menu screens.

It is in essence a brand­ing pro­ject, but with deeply tech­ni­cal so­lu­tions that make an or­ga­ni­za­tion work faster and smarter by op­ti­miz­ing work­flows with cus­tom tools.

The most com­plex part of the tech­ni­cal ar­chi­tec­ture is the tool to con­trol the large VJ screen. On the web­site, staff can ei­ther choose be­tween play­ing ex­ist­ing video playlists or cre­at­ing a new one di­rectly in the in­ter­face. Playlists are JSON files stored in the Drop­box pro­ject folder along with all video as­sets. A cus­tom-built PC run­ning the Drop­box client au­to­mat­i­cally syncs all of these as­sets to its lo­cal drive. When a staff mem­ber se­lects a playlist for play­back, a JSON file is up­dated via the Drop­box API and au­to­mat­i­cally synced to the PC where a cus­tom Node.js ap­pli­ca­tion lis­tens for changes to the JSON file and plays the se­lected playlist. In or­der to not re­quire ex­pen­sive video con­ver­sion in the cloud, the PC per­forms all video con­ver­sion and crop­ping on the fly with ffm­peg be­fore stream­ing the out­put to the screen via UDP. Ffm­peg also adds an op­tional dither­ing fil­ter to the out­put in or­der to make the videos look sharp on the low-res screen. This and many other set­tings can be con­trolled on a per-video ba­sis di­rectly in the web­site in­ter­face. All in all, the tech­ni­cal setup is ex­tremely flex­i­ble and ro­bust with the largest ex­pense be­ing the $11/​month Drop­box Plus sub­scrip­tion.

The Noa Noa pro­ject is a good ex­am­ple of the type of work we en­joy do­ing. It is in essence a brand­ing pro­ject, but with deeply tech­ni­cal so­lu­tions that make an or­ga­ni­za­tion work faster and smarter by op­ti­miz­ing work­flows with cus­tom tools.

Noa Noa's DJ screen