Dolby has been a globally recognized innovator of sound, image, and voice technologies for cinemas, home theaters, PCs, mobile devices, and games for years - but when it came to their online presence it was hard to tell their pedigree.
Dolby teamed with Nurun (formerly Odopod) in 2013 to turn Dolby.com into a best-in-class responsive site capable of helping them transition from a B2B brand into something everyday consumers could understand. Until now Dolby has been defined by the technologies they create and license – but in 2013 they decided to create their first consumer products. For us, this meant building a module based platform capable of explaining complex technologies and marketing a lineup of as-of-yet unknown products.
The original Dolby.com
Before any designers pushed a pixel our UX team created a site architecture and an outline of every page needed.
Some of our visual inspiration
Our first design challenge was to craft a new visual system to capture the magic and cinematic quality of Dolby. They came to us with a vibrant color palette to work from and we quickly found ourselves drawn to washing these colors over large documentary style photography. It was also important to Dolby for their site to stand out from the consumer electronics competition.
After digging into the visual language and site structure we started isolating page templates and modules that needed to be designed. Between the four creatives on our team we split the work and started getting real with the content.
As Senior Designer, it was up to me to stress test the visual language we created to find it's limits. We had limited dev resources to realize this website so we had to get really creative brainstorming simple responsive solutions to any problems that came up.
Simple was the key word on this project - once finished we were handing over the keys and wouldn't be there to help Dolby populate the site with real content. That meant that we needed to consider how every image would be cropped at each breakpoint and ensure character counts could be flexible enough to account for all they needed to say.
In the end we created a system of 12 page templates and 30+ modules made for them to self-sufficiently keep the site updated for years. Being in a collaborative team allowed me to have a hand on every page design and a majority of the module designs.
The entire system we designed for Dolby
The site went live in early 2014 and we've had nothing but great feedback from our client. In fact we've since done two immersive experience pages based on this visual language.
When it comes to designing a responsive system the smartest thing you can do is keep all your variables consistent. From typography to image ratios we tried to change design as little as possible between pages and breakpoints.
Below you'll see a taste of our styleguide and PSD specification documents that accompany the end of every project we do. We have it down to a science and talk with the developers the whole way. We design responsive type styles, responsive module spacers, and even animated prototypes of complex interactions.
Coming to the close of the project I had to distill every module we created into it's smallest pieces. This meant asset sizes, character limits, photography styles, color options, etc. for the entire site. No easy task. Eventually I made a 150 page PDF we delivered to Dolby on handoff day.
5 Months of Design
3 Months of Development
Associate Creative Director
Founded in 2000 by Tim Barber, David Bliss and Jacquie Moss, Odopod had earned a reputation for creative excellence and digital innovation over the past 13 years. In 2011, Odopod was acquired by Nurun. Nurun had been held in high esteem all over Canada and Europe, looking to make a strong foothold in America.
It's not often that a company is acquired with no dramatic changes. It's even rarer that a company is acquired and given the privilege to redesign both the identity and web presence of their new parent. This was the case with Odopod transitioning to Nurun, and I was on the team.
The original Nurun website and branding
We began by partnering with local branding masters Office to redesign the Nurun logo and create a fresh new visual language. The end result was a beautiful new logotype and mark reminiscent of the original logo and a system of typography, colors, and iconography that could serve as the basis of a new website.
Being an internally led project with stakeholders scattered throughout the globe was a unique challenge. It was clear that Nurun wanted to transition to having a focus on what made Odopod what it was –digital products and services fueled by innovation– but it was certainly a departure from the heavy marketing work that had become their wheelhouse. We spent the first 3 to 4 months creating what we thought was a great site before sharing it out to the larger Nurun team.
– Nurun's new mission statement
Luckily for our small design team we were working with the brightest minds in our studio to sell through some of the radical design ideas we had. One particularly unique idea was to show only a small handful of case studies and dive into deep detail and heavy custom graphic production. The following are excerpts from a case study I helped design detailing our involvement with Tesla Motors' retail store touchscreens.
After building out our initial five case studies, we began to see similarities in the stories we were telling. From this, we defined reusable modules for all future case studies. The hope was that future studies would be 80% reused modules and 20% custom.
We decided to talk about our values as a company in terms of people we admire rather than a list of abstract themes. We brainstormed for days coming up with lists of people who exemplify our senisbilities in uncommon ways. The page was designed as a journey through these principles for new hires and clients alike.
The new Nurun site launched in June of 2013 to a welcome reception.
Check out the live site here:
We worked with the developers at Nurun's Headquarters in Montreal, Canada to make this site a reality. This wasn't an idea situation - there was both a language gap and communication over time zone differences. This led to a lot of assumptions being made and a pain to really dial in an animation the design team had in their heads.
During design, each page lead with with big bold leading statements. Our copywriters had to find creative ways to not repeat the same information.
After the site was live for a year, I hadn't seen a new in-depth case study created. One reason could be due to the lack of down time, but I attribute it to our high hopes of locking down a designer, copywriter and a developer regularly to create new case studies. This is a mistake we swiftly corrected in future projects by creating flexible, yet restrained content management systems for clients and internal projects. No matter how beautiful a system, is it's meaningless if no one can use it!
After a 2 year hiatus as Nurun SF, our office was able to rebrand to Odopod. This came with a fresh new logo, visual language and website. We saw this as a great oportunity to make a super clean modern rebranding. A small team and I took on this challenge.
After a full UX pass at the site, we dug in and started exploring some visual styles.
Once we were happy with the design style, I started prototyping the pages together in inVision to get a feel for the flow. It really shined a light on problems and gave us the oportunities to test the experience on our phones.
In the end, radical simplicity won the day. It was important we not distract from the quality of the work with a flashy page. Instead we focused on typography and imagery to tell the real Odopod story.
The final web designs