It was 4:20am on Tuesday, November 18th, 2014 when I said to Andy, “Light it Up.”
Both of us were holed up in our respective command centers, coding deep into the dark hours, anxiously noting the minutes tick away until the big reveal. Three months of intensity had brought us to this point: the highest profile site launch either of us had been a part of. The prior 48 hours had been a whirlwind, and I slept for only two of them. The moment Andy flipped the switch, I remember thinking to myself, “Please, please let this go smoothly.”
Fortunately, the international brand launch of Marley Natural™, the official cannabis brand of the legendary Bob Marley, went off without a hitch. The launch was announced on NBC’s Today, and featured in numerous media outlets including Rolling Stone, The Guardian, and Time. Since then, I have caught up on my sleep, and am finally ready to invest some brain power towards chronicling the integrative design & development process that led to the moment of ignition for MarleyNatural.com.
Read Me In: The Man, Symbolism, & Art History
Rewind to the beginning of September 2014. I am introduced to the project via the business end of a former DEA agent, current lawyer: very apropos. In a few days, my teammate, Evan, is read in, and the two of us are relocated to new premises where we can work in secret. Comically, the only way we can arrange the desks in our rented space, to shield our screens from accidentally prying eyes, requires us to get on our hands & knees and crawl under the desks each time we come and go. Probably, that was good for us.
Office set up, we took it all in over beers and concluded: we had to do this project right; we had to do it justice. The easy path would be to fall into overplayed and misplaced stereotypes: glow-in-the-dark Bob Marley posters and smokey basements. Savvy folks that they are, Privateer Holdings knew that this, and Bob Marley himself, deserved better. They had their eye on creating a mainstream and enviable brand, a trendsetter, even. But to make that work, it was crucial to embed a deeper meaning to the design, to honor The Legend.
“I often say to people, if I’m not spending ⅓ of my time doing research, I’m not doing my job.” Research is everything when it comes to… well, okay: most things. You research to augment things you already know, and you research to fill in the blanks where you don’t. In this case, we were immediately aware of two constraints that would have the greatest impact on our process: a very short time frame to work within, and, we would likely have only limited, or stand-in, content to work with for much of that period. Translation: If we were to wait to begin design & development until we had all the approved content for the site, we would never make the deadline. Not a chance.
So, my friends, research is where it’s at. Before we put anything to page, or even to bar napkin, we dove head first into research. As any good researcher (or good designer) knows, research is not a finite term, but you have to start somewhere, especially when you’re on a deadline. So, in the interest of putting brainpower towards chronicling the process, let’s take a ride though some of the early areas we studied, which endured as underlying concepts guiding our path forward.
Marley, a Kevin MacDonald Film
I’ll be honest: before I watched the 2012 documentary, Marley, I didn’t know much about who Bob Marley really was, and what he believed in. Ziggy Marley says it well in the promotional material for the film: “This will give people a more emotional connection to Bob — not just as a reggae legend or mythical figure, but to his life as a man.” The uninitiated solely associate Bob Marley with the “stoner” culture that has appropriated his image, but he was, and his legend is, so very different from that. He put his mind and energy towards social justice, environmental consciousness, and healthy spirituality. As there was conflict in the world of his time, there is in ours now; but in conflict, he supported the middle way, a path of balance, a route towards peace. He was the living catalyst that brought competing factions together, that inspired others to believe in a better future, and to make way for the positive day.
Marley is a documentary that tells the story of a man, who, through his being, and often through music, elevated love and peace between us all. He is both man and legend, and it’s a tall order to build a site bearing his name that would give him the respect he is due. I’m not going to lie, I was intimidated. But, we power through.
Photo courtesy of Wikipedia: Tutankhamun’s Headrest
Symbolism Embedded in the Rastafari Tradition
Following our screening of the Marley documentary, I was eager to delve further into the world of Marley. In reading about the history of the Rastafari tradition, I was intrigued that the movement is “an Ethiopian-Hebrew spirituality [...] sometimes described as a religion but is considered by many adherents to be a ‘Way of Life’.” This led us to an investigation of relevant Ancient Egyptian symbolism. As it turns out, Shu, the Egyptian god embodying air is commonly depicted flanked by two lions, symbolizing sunrise and sunset. Considering the lion’s prominence in the Rastafari tradition and their long-standing connection with Marley himself, Evan and I decided to keep this historic symbolism close-at-hand as we pursued the design.
Enter the Rainforest Concept
One of the gems of the Jamaican experience is the landscape. From sunny beaches to luscious rainforests, the sanctity of the natural landscape is paramount. Rastafarians have good company in holding nature in high regard, both in Jamaica and abroad. And, for a brand promoting a natural product, promoting the land it grows on is the perfect complement.
The Fighting Temeraire
Bob Marley was a vocal advocate for the legalization of cannabis; sadly, he didn't survive to realize that goal. After his untimely passing, his compatriots, and many other like souls around the world, have carried on that torch, one that Bob Marley carried for those that came before him. Over decades, it’s a battle that has been fought and rehashed at dinner tables and in think-tanks, within government bodies and on the street. Only in the last few years has public perception shifted, a shift that is starting to percolate through legislation: there is a building feeling that we are approaching the cusp of a monumental shift. At the sunset of one age is the dawn of another. Some might call it a sea change, as it may be.
This idea bouncing about of a possible end to cannabis prohibition, years out that it may still be, has unequivocally huge historical and cultural implications. Documentary-fiend that I am, it reminded me of the story behind a painting by J.M.W. Turner of the Fighting Temeraire: an old sail ship, towed into harbor for the last time by a steam-powered tug boat. That scene, decadently described by Simon Schama in his 2006 series Power of Art, illustrated a sea change at that time (at sea, as it may be): the monumental shift from traveling at the whim of the wind, to traveling by the power of industry.
On display at The National Gallery in London, Turner’s piece has become a mascot for signaling times of change (a portent, perhaps?). Hopefully, it’s a moment when old and new ideas converge for the greater good. In this work, like many of his, the ambiguity of a time or event, a potential shift in the winds, a possible change of status quo, is illustrated and symbolized by the dramatic shifts in the rendering of the sky: while the storms of battle may be raging, there is still a corner of blue sky reminding us that there is a better day ahead. Evan and I nodded to Turner, and added a bit of customized “sea change” to the sky of our Jamaican rainforest. Progress marches on.
Learn more about the painting’s history at Wikipedia: The Fighting Temeraire
In-Browser Responsive Design & Development
Before we go further, let’s get the technical context out of the way. The site itself was designed & developed in-browser using an Integrative Design Process. The project foundation includes Bootstrap and jQuery for the front end, and WordPress Multisite for the CMS (localized for English, Español, and Français).
SASS/SCSS: Syntactically Awesome Stylesheets and a Double-Stranded Modular Scale Framework were leveraged to both explicitly and implicitly embed Sacred Geometries across the experience (i.e. golden proportions, triangles, rectangles, squares, stars, circles, inscribed geometries, etc.). The intention here: to root the site in the natural world, while providing a nod to our shared cultural heritage. (Remember the Ancient Egyptian symbolism from earlier?)
The resulting web application is integrated with Sailthru for “omnichannel personalization and marketing automation.” Finally, our team provided responsive support from 2048px down to 320px across the usual browser suspects, including: Chrome, Firefox, IE9+, and Safari. Phew! Now, that I’ve covered those pesky details, back to the story.
Designing from Precedent: Embarking on The Journey
Privateer Holdings came to us with a concept embedded in a phrase: “Join the Journey.” This launch would be as much about an introduction to the brand, as it was about building a community of like minds: of fellow journeyers, that would unite as part of a greater movement. Together this community would follow the path ahead, or forge a new path, as it may be.
We also knew there would be a video component to the site, but, as all teams were working feverishly towards the deadline, we wouldn’t know the precise content of the video until nearly the launch. As a placeholder, I found an epic nature video filmed in Jamaica, Beneath Jamaican Skies, from Leftmost Media House. (Take the couple minutes it takes and watch it. You won’t regret it... you will feel like you are there!) I can’t even tell you how many times I watched that video over the course of our design & development process. Something about it, that sensation of really being a part of the natural scene filmed — embedded in it, rather than watching it from afar — I found to be inspiring and invigorating as we worked along our own path.
Sometimes research, concept, and precedent fall into place just so. Evan and I decided, if we were going to start from the image of the forest canopy under the dramatic sky, we would interpret the concept of the journey both literally and figuratively into the site’s user experience. We can all argue later about which part is literal, and which is figurative, but what we are getting at is this: when you arrive at the site, the opening image beneath the header is that of the rainforest canopy, and as you scroll down the page, you descend into the canopy, through the understory, and ultimately arrive at the forest floor, and the site footer. The Beneath Jamaican Skies precedent embodied the immersive experience we wanted to create on the site.
Incidentally, because of the immersive nature of the site and videos, developing a custom frameless video component for the site (without any of those distracting black bars on top or bottom) was crucial. In this way, the picture plane becomes a window into a better reality. We are no longer separated from the events of the film, but travel along as one with it as the events unfold. (How can you Join the Journey if it only feels as though you are watching it from afar?) I would love to get into the specifics of this video component later; check back for a dedicated post, or at the very least, a short mention with a link to the component on GitHub.
Descending Beneath the Canopy
So, you’ve embarked on a journey: now what? Well, name an epic journey that didn’t involve intermittent, if not constant, interactions along the way, at least in how we tell the story now. (How bored would you have been in Freshman English if Odysseus meandered about quietly on his boat for years, uneventfully catching fish to eat, and killing his time sunbathing on the deck as he made his way home?) No doubt, all great journeys also include times of solitude, but more often than not, it’s the interactions we experience along the way that comprise the stories we tell over and over.
These days, we more frequently tell micro-stories, but those 140-character snippets form a greater conversation. For our journey, we needed a way to encapsulate those thoughts into the larger cultural discussion; so, Andy and I designed & developed a Twitter component to showcase a custom timeline of the conversation. We hoped to pique the site visitors’ curiosity, engaging them in the act of play. Thus, as you travel down through the rainforest, you discover you’re not alone, but share your path with many fellow travelers as a community evolves.
Discover the Journey Ahead
Now, as we literally reach the bottom of the page, we’ve progressed through our figurative journey down from that epic sky, through the canopy and lower layers of the Jamaican rainforest to the forest floor. Now what? Well, where one journey ends, so another begins. You’ve made it this far; now you are invited to take that next step: to discover the journey ahead by signing up.
The Emergent Journey
Hopefully I’m not overdoing it with all this journey talk, but humor me a little longer here. When you embark upon a journey, you set a course. Maybe the best journeymen have all sorts of details planned out before they begin: contingencies, backups, and whatnot. Arguably, another form of “best journeyman” might set out without any plans at all, but adapts easily as needed. Either way, the path taken can never be fully known before it is traveled. Those unknowns are the very things that create the richness of the journey: the mystery, the unknown, the hidden details, the emergent. This is, in large part, why we journey, why we seek. “All those who wander are not lost,” of course, thank you Tolkien.
When Precedent Becomes Content
As frustrating as designing & developing without final content can be, sometimes you luck into silver linings. Consider the image of the grey-bearded man on the opening panel. The text overlay reads, “Healing of a Nation,” and through the curling smoke of his exhale, the word LOVE is scrawled on the wall behind him. I came across this image, by Juris Kornets, in some of my early research for the project, and it struck a chord with me. I found it powerfully evocative, and inspiring. It cultivated the mood we wanted to foster on the site, so I included it as a place-holder, all the while expecting it to be switched out when the real content was delivered.
Further research by Evan revealed the image had been so popular at the photographer’s show, that he returned to Jamaica to share the proceeds with his ailing subject. (Read the full story: Best Seller at the Show.) To our pleasant surprise, the rest of the team fell in love with the image and its story, just as we had. So much so, that a place-holding image was promoted to final content, and the photograph of the old man lives on as part of a new story.
Another instance of precedent emerging as final content came in the launch video. As I mentioned above, I was greatly inspired by the stand-in video, Beneath Jamaican Skies; so much so, that in an early design meeting, I even requested that the team bear with me and watch the whole thing, straight through. They humored me, and we moved on, but ultimately, everyone was so fond of the film that it became a guiding precedent for the site launch video itself.
Along our journey of design & development, Andy, Evan, and I, with the rest of the teams at Portent and Privateer, adapted through the course of our experience. Whether by virtue of the emergent journey itself, or via that unsolvable puzzle of whether the journey shapes you or you shape the journey, we emerged with a site launch at that perfect hour.
Epilogue: Light it Up
It was an absolute pleasure to work on this project, and I am grateful to the entire Portent Team for their individual contributions that brought us to the successful launch of MarleyNatural.com; to the team at Privateer Holdings for entrusting our team with such a significant responsibility; and to my wife, Rachel, for supporting me along the way.
I hope you all enjoy visiting the site as much as we enjoyed the process of bringing it to life. ;-)
Thanks,
B
More to Come
Keep an eye out for Michael's post on Thursday covering the measurement plan for the launch. And, stay tuned for Andy’s upcoming post detailing his contributions, including: Marley Natural’s badass server infrastructure, the fun of untangling localization, and the development of the Twitterverse Plugin.
The post Light It Up: Integrative Site Design & Development for the International Brand Launch of Marley Natural™ appeared first on Portent.
