Sony came to us with a desire to bring full screen trailers to the landing pages of their "big release" game detail pages (GDPs). The current design was lacking in visual punch and everything was hidden behind clicks. They knew they wanted these pages to be beautiful and immersive, but also have them function as a home to the new industry of game add-on purchases like new weapons and character outfits.
As an outsider to the gaming world myself – I had to dig into the mechanics of the Playstation Store, talk to PS4 using friends, and figure out how to bring the most value quickest in this new experience.
The original Playstation 4 game detail page:
The first thing anyone will notice is the full screen auto-playing game trailer when you land on the game page. We didn't want this to be disruptive, so the volume is turned down to 10% volume until the user either declares they want to watch the video or doesn't touch their controller for a few seconds. The UI fades away and the user gets to see the trailer uninturrupted.
The entire GDP is made up of full screen moments stacked atop one another. All video, gameplay, and screenshot content is housed in the "media" page above the cover – while all game details, special editions, add-on content, and related games are stacked below.
Because of the impact and scale of this project, Sony had the unique request of asking for our design team to work on-site in Sony's San Francisco Headquarters. Our Odopod team was small (a design director, myself as art director, and a visual designer) so we blended in seamlessly with our client's team who was largely engineering. We learned the technical limitations of the PS4 store and showed motion prototypes to engineers for approval. Our close relationship and near daily check-ins made the project move at a steady clip – finishing the lot of it in just a few months.
We leaned on Sony's knowledge on designing for televisions of all sizes and settings. They had robust research around minimum font sizes, safe zones, overscan, and GUI contrast. One of the more challenging considerations was around the controller, and never surprising a user at where their D-Pad interaction will take them. This led us to create a "One-up One-down" interaction pattern where each vertical was only a single tap away, and all interaction took place laterally.
This redesign took effect in late 2016 on Sony's biggest release "Tier 1" games. The plan for 2017 is to roll these changes into all games once assets can be produced - and take a look at the store as a whole in light of the new design style.
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
After a 2 year hiatus as Nurun San Francisco, 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 opportunity to make a super clean modern rebranding. A small team and I took on this challenge. Over the course of a year we designed, launched, followed analytics, made changes and relaunched.
Starting from the ground up in terms of brand - we explored logos, font choices, colors, and interaction patterns that would make our site feel fresh in the crowded genre of agency websites.
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 bold color, typography and thoughtful imagery to tell the real Odopod story.
Started in 2004, Lookout is a mobile security platform that protects private citizens and the world's largest enterprises with intelligence from 100 million mobile sensors. In anticipation of two new product releases, we were asked to reposition Lookout to appeal to an increasingly enterprise clientele and communicate their product offerings more clearly.
Lookout offers four mobile security products that work together through their "Lookout Security Cloud" to keep people's devices from being compromised. This relationship can get complicated so we spent time with each of their product directors to internalize and understand what they do.
The new benefits Lookout was launching are targeted at helping large enterprises stay safe. If just one mobile device on a company's internal network is hacked it can let malware into the entire system - which is a top of mind concern when every employee has a phone or tablet at a 10,000 person company.
Although marketing a series of mobile products may seem quite contained, explaining their relationship to each other, clearly proving their benefits, and allowing Lookout to continue to be thought leading publishers on mobile security is hard to do in a small package. We created a heatmap of each page that described where we should be educational, where we should be aspirational, and where we should ask users to take action.
The entire site ended up being 11 uniquely designed pages and 28 pages built off a robust system of modules delivered by our team.
Lookout wasn't attached to their current visual language when they came to us – it was very tech-forward focusing on connected nodes and businessmen in suits. We wanted to take them in a more editorial direction, and they gave our team a lot of latitude to explore new visual directions for the company. The creative team was very small and consisted of a high level Design Director, an Associate Design Director, myself as Art Director, and a Junior Designer. We each worked on different expressions of the brand during our 2 week exploratory phase:
Early on we realized there wouldn't be a way of representing Lookout's mobile products with photographs or app screenshots. The offerings were more abstract than that – they were piece of mind. This led us down a spiraling path of product illustrations that went from just being stylistically challenging to getting twice weekly feedback from each product director. Visualizing these benefits was truly a whole team effort and Lookout was thrilled to have this style at their disposal for future products.
In the end I am very proud of this redesign. In talking with our clients at Lookout, they felt the work did exactly what they had asked for and couldn't be happier to have worked with us. As the project began to wrap more responsibility fell on me to finish the design and module system as others were pulled onto other projects. I'm particularly proud to have made many of the design moves that are live on the site today.
Odopod was not contracted to develop Lookout.com so I worked with Lookout's technical director to create a comprehensive style guide that made sense to his team. I continued on to spec all responsive pages, module designs and describe behaviors through animated prototypes. Their tech director was impressed and it shows in how well they adhered to the documentation in the live site.
Keeping an open dialogue with Lookout through weekly (or daily) check-ins kept the team on track and our clients happy.
In order for Lookout to begin development on the site before it was finished being designed, we created a typography style guide and finalized a number of more straightforward modules for them in the middle of the project. This let us provide feedback to their dev team early on and make sure our delivery made sense to their team.
When a product is peace of mind, there isn't much you can photograph to show it off. While it may not be ideal from a timing perspective, budgeting time for illustration exploration can be really important.
Associate Design 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!