Every movement begins with a moment.

6 Weeks to a Magical Light Display

Posted 3 November 2015 9:00 AM by Patrice Myers @MoxieUSA

Building an 8-foot light installation is challenging enough in and of itself. But at Moxie — an agency that’s driven by imagining and creating new possibilities — “challenging enough in and of itself” simply doesn’t cut it. So when a team of my colleagues and I were tasked with designing an interactive light display for Moxie’s October 29 Open House, we set out to develop something truly spectacular. 

Then they gave us our timeline: six weeks. We exchanged glances, collectively nodded our heads and then smiled. “Better get to work.”

Our team, which was comprised of three Web developers and two creatives, started exploring concepts, testing theories and sharing insights. In the process, we began playing with two impressively agile and adaptable open source electronic prototyping platforms — Arduino Uno and Beaglebone Black. And that’s when the idea hit us: We would use these tools (powered by our ingenuity, of course) to engineer a magical and ethereal light kinetics experience that viewers could personally orchestrate and control with their touch-screen devices. 

Fast-forward to six weeks later and our vision was a reality. The five of us had worked hand in hand to construct a dynamic and interactive light kinetics exhibition that was literally illuminating the imaginations of Moxie’s Open House attendees. While the end result of our efforts was both remarkable and rewarding, the road there was far from smooth or easy. That said, I wanted to share my top ten highlights, milestones, key learnings and major challenges from the project.

10) You always have a client. Even when you’re just playing around in your browser or content to build a working circuit, there’s a client waiting at the end of that effort. As long as the final product — “free” or not — is meant to be shared, your aim is to build a cohesive user experience that conveys a marketing concept. At times, we were all so happy that the circuit worked that it was tempting to forget about marketing implications, the UI, brand advocates, the importance of a collaborative experience, etc. Regrouping and remembering “the client” helped us stay grounded and focused. 

9) Having a copilot is awesome. Once you get past your fears of judgment or thoughts that your overuse of global variables will be found out, having a copilot standing over your shoulder looking at your code can be so helpful. For instance, while talking things out, one developer would say something like, “This is broken.” Then the other would say, “Well, line thirteen says ‘if previous !== last){ return;}’ or ‘tan(90) is undefined’ or ‘an array really is a pointer so that means we can increment like this,’ or ‘if(variable) returns false because variable = 0;’.” In many cases, these are things we would have eventually noticed on our own, but with a lot of intense coding, a copilot can get you to your destination faster.

8) “Old” tech leads to new learnings. Did I ever think I’d touch a resistor again after Electronics 101? Nope — and especially not at Moxie. We all learned a lot about the power of regulating current with resistors and capacitors. In a couple of cases, it seems like capacitors really saved the day and allowed us to smooth the dimming effect in the bulbs. By the end of the project, a complex circuit was built, as shown in the schematic below. 

7) Details matter, right down to the wire. Hardware presents its own set of challenges. Soldering can be tricky business. The work is quite tedious, but the results of having a permanent circuit are well worth the effort. Due to one “problem bulb,” which always stayed on, we had to solder and resolder the same circuit three days in a row. And thanks to limited documentation, wiring up the logic level shifter to get the Beaglebone Black and Arduino talking was also a challenge. But once we finally got it working — and about 8 days before the Open House, no less — we were able to focus on UI and PubNub configuration.

6) Canvas is a great user interface tool. Seven days before the Open House, the UI was just beginning. We decided to use Canvas to create something magical that would allow a user to trace his or her path. After showing creative about four to five variations, one of the first ideas, pictured below, was chosen a few days later.

5) Processing data in bytes doesn’t bite. To reduce latency, we had to process data in bytes. Initially we’d tried sending JSON objects via PubNub, but we found that developing our own rules for passing integers was worth the effort. This was a lifesaver. Now we were sending a chunk of a data in one command to the Beaglebone instead of a single JSON object each time a bulb was triggered on or off. Bitwise operations also saved the day when processing the bytes in the Arduino code and also helped limit memory usage.

4) C gets an A for effort. C was difficult to code in. From pointers to pointers, memory allocation errors and releasing memory before allocating again, it was extremely frustrating at times. We had run time errors that could only be attributed to code but were extremely difficult to debug. But the good news is that once the code worked, we could repurpose it for different light sequences and never have to tweak it again.

3) The experience, like the work, should be collaborative. Right when we thought we were almost done, we realized the brief we’d provided our leadership team incorporated a collaborative experience. We needed to include functionality where users (brand advocates) would be rewarded for collaboration. After a few nights past 12 a.m. and only three days until the Open House, we were not too excited about going back into the code to make more changes. Yet, as we were heading out for the evening, we came up with our final idea and implemented it the next morning.

2) Patience is key. This entire project was a lesson in patience. When you build anything — make anything — whether with a saw and nails or software and libraries, you’re going to encounter mistakes and bugs. You’ll always have to start over and rethink. And while this was not client work, the open-ended nature of the project was sometimes less than ideal. Patience was absolutely necessary throughout research, ideation, development and regular status meetings — especially on top of our regular workload and meetings.

1) Work outside of your comfort zone. For many developers, the greatest barrier to entry in enhancing our repertoire is the mindset that we are only “Web” developers. This outlook is severely limiting. Only by stepping outside of our comfort zones can we see just how far our ideas can take us. And in a more practical sense, concepts from development and debugging translate well to other programming languages — and even life. Tips like these are applicable to most things: (1) If something’s broken, narrow down the problem one possible culprit at a time, (2) learn to Google well, (3) when in doubt, talk it out, (5) do not work in a silo, (6) read the documentation and directions carefully and (7) support your team but still be honest with your feedback. 

As you can see, we learned a lot in six weeks. Even better, we had a blast doing it. I’d be remiss not to give shout-outs to the team. I have much love for these fellow Moxie Makers and am proud to have been a part of this project:

> AJ Savino – for leading the development effort and showing great insight on many aspects of the project. 
> Ivy Chang – for managing our team and keeping the momentum going while still giving honest feedback and reminding us of marketing implications. 
> Chris Boyle – for sharing the initial inspiration for this project and pushing to make it come to fruition while building the structure and providing creative feedback and ideas for applications throughout. 
> Jonathon Wallace – for the electronics insight and for making key decisions concerning the layout of the circuit and introducing PubNub and Beaglebone Black to the project. 


Add your comment






#crisis #socialmediacrisis #socialmedia #digitalmarketing #socialmarketing #strategy #influencers #communication #pr #media #ideation #creation #content #planning #culture Snapchat Snap Inc. advertising marketing social media community management brand millennials authenticity Spectacles Wearables customer customer service Paid Media Podcasts Content Sponsored Ads Content Marketing #content #marketing #media #analytics #digitalmarketing #ideation #creation #production DecisionIQ strategy big data personalization Humanizeit Facebook Facebook Live Video Instagram Stories ftc guidelines social influencer social influencers social media influencers social media broadcasting live video Processing prototype prototyping user experience ux technology programming coding java ideas design visual arts mix reality mixed realities data tutorial sketch Twitter Carousel Ads Ad Exchange Programmatic FBX Disney virtual reality projection mapping RFID Tumblr Voice Tone Axure wireframing UX software collaboration Measuring Usability UX Best Practices Designing User Journeys Stop counting clicks Designing for completion Designing for satisfaction Dieter Ram and User Experience Less is more Less but better Influencer Marketing learnability user interface user-created content gaming maker editor Super Mario Maker Nintendo digital media chat bots messaging mobile applications automation F8 Mark Zuckerberg Business F8 Conference Email office agency communication Slack Facebook at Work meetings productivity Wearable tech Healthcare Experience Patient Experience Service Design Strategy Creative Moxie VR Six Flags Six Flags Over Georgia theme parks Samsung Samsung Gear Samsung Galaxy VR headset Oculus Rift Playstation VR roller coasters Dare Devil Drive Websites Web dev development digital reactions emotion analytics dislike social metrics clicks Brands Consumers CPG Retail Consumer Marketing Consumer Insights Super Bowl Commercials Football Cultural Phenomenon Game adtech martec auto-responders automated marketing Experience Design Interaction Design Ecosystem iOS Healthkit Ad blocking Forbes Condé Nast GQ interactive media ad-light hashtags hashflags audience visual emojis campaign management 1-to-1 marketing omnichannel CES CES 2016 Oculus Sony PlayStation uSens HTC special mapping hand tracking games PetBot WonderWoof BowTie Pets OTT digital distribution Netflix Reed Hastings on-demand #yearahead #2016 #newyear #2016predictions #digitalstrategy #modernism user-generated content UGC Consumer Connection Integrated Marketing Manufacturers Accessibility usability engagement rate disability awareness creative process creativity fail fast hiring ideas imperfectionist perfectionist personnel progress test and learn fast casual restaurants social media campaigns QSR social strategies in-store promotions in-store social media promotions successful social media campaigns Logos Typography Branding #CPG #Retail #ConsumerInsights #CRM #ConsumerDirect #Seamless #OmniChannel #MoxieMakers #frontierism #intelligence #architecture insight moments Unit3C FutureX lab innovation open house Q&A UnitFilms 48in48 General Assembly Non-Profit Ponce City Market Branded design technical design style guide wireframes brand guidelines Consumer Products Interactive Marketing GIF social campaign modern marketing Cannes Lions new media pop culture meme Web Accessibility QA media media buying mobile apps targeting wires Advertisers Apple Store EasyPay self-checkout app mobile payment Sporting Events Sitecore CMS delivery Content Marketing Strategy Brand Content Marketing Content Strategy Brand Content Strategy Social Content Strategy Cannes humanity what3words life saving dot Agency Partnership Agency Relationship Competitive Review Millennial Marketers email marketing omni-channel digital marketing esp email service provider process WCAG 2016 Planning Connected Omni AR Commerce Social Innovation Create Content Strategy OMMA MediaPost Internet Week TV & Video Media Planners Creative Conundrum real-time scalability Customization smartphone loyalty advocacy live streaming content democracy Open Source Node.js Cheerio Handlebars Hyperquext MongoDB Atlassian Stash PhantomJS Shopping On-demand economy Sharing economy Everything on demand Instant delivery iPhone App Amazon Now Build Automation DevOps Native Advertising Machina Forrester SXSW Machine Learning Data Streams Web search results Data Platforms ROI Instagram Purchase Behavior Like Content Consumer Channel Role and Purpose ExactTarget Salesforce Cloud Responsys Oracle Silverpop IBM Agency Culture Innovation and Technology Client Relationships Platform Partnerships Ever-evolving Digital Age geo-fencing tablet Android second-screen Austin FOMO Meerkat scaleable vector graphics Flash animation interactivity code browsers uber-savvy consumers integrated digital-connectedness Valentine's Über Bloom that Open Table Waze marketing research google music art sports illustration sculpture food green entertainment movies photography real time marketing cheat sheet smart homes vine print 3d printing street art painting fashion influencer movie billboard outdoor mobile wallet toys film halloween history space films cars anniversary


Error: All fields are required.