Pssst. We’re building a React & Apollo version of the
platform! Keep us in mind for your next digital project.
Marley Natural International Brand Launch Website Design & Development: Site on Four Devices - Cropped for Featured Image - Design Blog

Branding, Digital

Light It Up: Marley Natural International Brand Launch Website

Every journey has a story. This story takes you behind-the-scenes of our journey through integrative web design & development for the international brand launch of Marley Natural, the official cannabis brand of Bob Marley. From early concept ideation, to an early morning, high-profile launch, follow along the path that led to that moment of “lighting it up.”

December 9, 2014

Light It Up

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.

Marley Natural International Brand Launch Website Design & Development: Bob Marley in a Scene from MARLEY, a Magnolia Pictures Release
Bob Marley in a Scene from MARLEY, a Kevin MacDonald Film

Photo courtesy of Magnolia Pictures.

“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 timeframe 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 through 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.”

He was a living catalyst that brought competing factions together, that inspired others to believe in a better future, and to make way for the positive day.

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.

Symbolism Embedded in the Rastafari Tradition

Following our screening of the Marley documentary, I was eager to delve further into his world. 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.’”

Marley Natural International Brand Launch Website Design & Development: Tutankhamun’s Headrest
Tutankhamun’s Headrest

Shu, the Egyptian god embodying air, shoulders an ivory headrest for supporting the head and neck during sleep. Featured in Taschen’s The Book of Symbols. Photo courtesy of Wikipedia: Tutankhamun’s Headrest.

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.

Marley Natural International Brand Launch Website Design & Development: Rainforest with Bananna Trees
Jamaican Landscape

A crafted image features hills of the Jamaican rainforest under a dramatic sky, with banana trees in the foreground.

Marley Natural International Brand Launch Website Design & Development: J.M.W. Turner's The Fighting Temeraire
The Fighting Temeraire

J.M.W. Turner’s The Fighting Temeraire shows the old ship tugged to her last berth to be broken up, 1838. Photo courtesy of Wikipedia.

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 Photoshopped a bit of customized “sea change” into the sky of our Jamaican rainforest. Progress marches on.


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.

Marley Natural International Brand Launch Website Design & Development: Sacred Geometry in Leonardo da Vinci’s Vitruvian Man, c.1490
Sacred Geometry

Leonardo da Vinci’s Vitruvian Man, c.1490, demonstrates one form of so-dubbed "sacred geometry."

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.

Beneath Jamaica Skies from Leftcoast Media House.

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.

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.

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.

Marley Natural International Brand Launch Website Design & Development: Floating Above the Canopy - Site Journey Concept on Macbook Pro
Floating Above the Canopy

At the top of the page, we are floating above the jungle canopy, looking down at the tops of the trees below. Here, the idea of a journey is presented to us.

Marley Natural International Brand Launch Website Design & Development: Conversations Along the Way - Site Journey Concept on Macbook Pro
Conversations Along the Way

As we descend into the canopy, we see the branches and trunks of the trees we pass by. Along the way, we chat, as the journey into the rainforest continues.

Marley Natural International Brand Launch Website Design & Development: Discover the Journey Ahead - Site Journey Concept on Macbook Pro
Discover the Journey Ahead

By the bottom of the page, we’ve reached the forest floor, and find a tropical stream falling over a ledge. Here, we are presented with an opportunity to continue the journey ahead, if we so choose.

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.

Marley Natural International Brand Launch Website Design & Development: Rastafari, One Love, Jamaica, by Juris Kornets
Natural Selections Photography: Rastafari, One Love, Jamaica

By Juris Kornets.

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. (Enjoy the full story here: 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.

Introducing: Marley Natural Fine Cannabis from Privateer Holdings

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 us with such a significant responsibility; and to my wife, Rachel, for supporting me along the way.

Marley Natural International Brand Launch Website Design & Development: Join the Journey Concept, as Seen on iPhone, iPad, iMac, and MacBook Pro
Join the Journey, Responsibly & Responsively

The fully responsive site adapts beautifully across devices from 2048 to 320 pixels wide.

I hope you all enjoy visiting the site as much as we enjoyed the process of bringing it to life.


Update

March 5th, 2015

We are pleased to announce that Privateer Holdings and Portent, Inc. have won two Silver ADDYs at Seattle's 2015 American Advertising Awards for the launch of Marley Natural! Details, glamour shots, and less glamorous (but definitely awesome) photo booth shots from the gala are hanging out right over here.


If you'd like to explore how this project looks in the portfolio, feel free to check it out here.

What do we do at Emerald Seven?

Have a look-see at the services we offer.

Interdisciplinary Design

Our team is trained to solve problems holistically, designing for digital, physical, and hybrid applications using an integrative design process.

Full Stack Web Development

Our award-winning design & development team is unique in that we not only can geek out over the technical specs, but we can also hold our own with a room full of designers.

Custom Crafted Content

Whether it’s through the written word, through visual storytelling, or through the combined forces of both, we craft tailored content to help you get your message seen and heard through all the noise.

Can we help you with anything?

Or, would you like to join our (rarely used) mailing list?

Feel free to reach out with any questions you may have for us about our services, our work, or anything else that’s got you curious.

Get in touch.