Behind the Scenes Building Our Logo Hack

The busy streets of Farringdon have been a little brighter than usual. Our latest R&D project shakes up Cyber-Duck’s second home in London – turning our classic duck logo into an interactive light installation that provokes the public to ‘hack’ and play with our window display.

We have already blogged about why we’re unleashing the public’s creativity onto a light-box version of our logo, and the potential of projects like this for your brand. Here, I’ll take you behind the scenes – explaining how we choose and prototype R&D projects, and the tech behind the light installation and web app. 

R&D and Ideation

R&D is an important creative outlet for us. We enjoy exploring new approaches, ideas and technologies; feeding into the digital solutions we choose for clients, or even becoming our own products. It’s a fun way to find that special something that could differentiate you from competitors.

This time, we wanted to create a physical, interactive form of our logo, which allowed others to play with our branding. An hour of brainstorming (and several coffees!) later, we came up with the idea of building a light installation. Each section of our logo could be lit with different colours using LED bulbs.

After a bit of research, we settled on Philips Hue as the LED bulb of choice. Though a tad on the expensive side (just 5 bulbs set us back nearly £250), they had an established, well-documented API that we could work with to control the colours of the bulbs, from designing and building a web app. 

Prototyping Our Logo Hack

For the past 4 years, our summers have been defined by Quack Hack, an internal hackathon: we dream and develop the first version of ambitious projects in just 24 hours, fuelled by music, BBQ and a great sense of camaraderie. 

Unashamed duck-related puns aside, hackathons are a great way to get your side project ideas off the ground. Staff love the competitive freedom, experimenting with different skills and ideas for the weekend; the informal fun can generate unique, rapid first iterations of a product. 

This was a great setting to create the first version of our logo light. As anyone who has joined a hackathon before will tell you, 24 hours isn’t a lot of time. Time runs away even more quickly when you spend the first few hours frantically sourcing materials, from card for the logo shape, to the electrical cable and sockets to get the Hue bulbs working.

But, the time constraint is the beauty of working on a project like this in a hackathon. It keeps you focused. This means extra – possibly superfluous – features are ditched in favour of getting a working prototype built.

From Buffer to Spotify, many companies define and launch a Minimum Viable Product (MVP): the earliest version of their product, which has the basic features needed to fulfil user goals. By reducing production resources and getting your product into users’ hands early, you can test, gauge demand and refine future work to match user needs.

BUILDING THE PHYSICAL OBJECT

We cut cardboard boxes into five of the quadrant shapes that make our logo; spray-painting the shapes plain white once the glue had dried. Mainly for the sake of speed, the light sockets were wired with a plug for each light and affixed to a hole we carved into each shape.

Our logo’s quadrant shapes were built quickly out of cardboard, wired into place for each light bulb.

During the rush to get a prototype ready in 25 hours, we needed to find something that could cover each section. In the spirit of a hack, we settled on white plastic bags, as these were readily to hand and just the right thickness to diffuse the light. By fixing the shapes together, a miniature prototype of our logo idea was ready. 

Designing and Building the Web App

Next, we conceived, designed and built the web app that would allow our audience to switch the colours of each section of the logo. 

CONTROLLING BULBS VIA THE WEB

By default, Phillips bulbs are controlled via a smartphone and their HUE app. Instead, our project must give passersby control via a website on their tablet or phone, without installing software. Taking a mobile-first approach, we designed a targeted web app that allows users to edit the logo and push to the window quickly and easily.

Setting up a Philips hub, we began configuring the Hue API so we could integrate this functionality. The hub provides a graphical interface that can generate an API key and test requests to get the status of the bulbs or control their colour. For example, a simple request like this provides a list of bulbs and the status for each:

http://<bridge ip address>/api/<API key>/lights 

But usually the Philips hub is only accessible via a local network; by default, only those connected to our Internet would be able to switch the colours. Following precepts from the Web of Things, we needed to transform the physical installation into a web object. 

We began by building our own Node.JS API using Sails.JS as the middleware between our front-end and the Phillips Hue API. Sails.js is a Javascript framework that can help you quickly bootstrap APIs; making it particularly suitable for hackathon time constraints! Port forwarding on our network could get the API to reach the Philips hub; IP restriction and encryption secured access. 

Instead of using the original bridge API directly, building our own API added more flexibility. We could anticipate and prepare for future iterations of the project – for example, controlling multiple light installations from the same interface.

BUILDING THE WEB APP

As we were targeting a mobile / tablet audience, the web app prototype had to be fast and simple to use. Initially, it was built as a simple HTML page. To improve the performance, we used no frameworks for the front-end and kept the page weight to the bare minimum.

To add the real-time activity of people hacking our logo, we decided to decouple the front- and back-end using Pusher as a third party service. When a user submits a new colour scheme, an event is emitted and triggers the Philips API. After the API updates the bulbs’ colour, it triggers another event: almost instantly, all users are shown the colour scheme submitted successfully in their app. Date and time management (and refresh) can be tricky for real time applications. So, we added Moment.js, a library to easily manipulate dates – see the example below.

moment().format('MMMM Do YYYY, h:mm:ss a'); // March 4th 2016, 6:35:11 pm
moment("20111031", "YYYYMMDD").fromNow(); // 4 years ago

Next, we added history and persistence. The data must be stored so we could keep track and display recent creations in the website. As the data is non-relational and key/value based, we chose Redis: one of the fastest database engines, easily handling 500,000 requests per second – definitely enough for us! Final enhancements included error handling, a ‘tweet your creation link’ and Slack integration, to notify the team when a new logo hack was submitted.

The finished light installation prototype, with colours controlled via the web app on mobile. 

FUTURE IMPROVEMENTS

We didn’t anticipate one of the key challenges during the Hackathon: Hue bulbs and LEDS generally aren’t great at coping with certain colours on the spectrum. This meant if someone selected a particularly bright blue on the web app, the RGB value would translate to something closer resembling white; while colour picker APIs would naturally include black, a bulb can’t shine in this colour (of course!). 

For a company with 4 types of blue in its logo, how Hue bulbs handle certain RGB values like blues presented a real challenge.

Following our internal hackathon, we took our project onto the next stage: building a super-sized version to fill our Farringdon office window, and refining our web app. With a little more time, we found a reasonable solution for our colour-translation issues: customising an open source colour picker to limit the spectrum to brighter colours, which could be better reflected by the Philips bulbs. We also built a simple profanity filter to ensure that submissions couldn’t include any offensive language. 

Put That Duck in Our Window

Day or night, head over to our Farringdon office today to hack our logo yourself:

• Using your smartphone, visit cybrd.uk/logo-hack in your web browser
• Tap sections of our logo to edit the colours
• Name your duck, and send it straight to our window
• Your creation will be up there – in lights!

After lighting up our Farringdon office, your duck will join our website’s wall of fame. We’d love to see your version of our classic duck – share a #ducklight photo with us @cyberduck_uk.

Our original logo, ready for passerby to take over the display.

How Can We Help You?

There’s so much potential for campaigns like this: using technology to turn brands like yours from a one-way transmission into a two-way conversation, that actually involves your customers. We’d love to work with you to bring your brand to life – get in touch with us to find out how we can activate your brand, or run creative hackathon sessions with your staff.