One Web Presence

Founded in 1896, Roche Diagnostics is a closed system medical instrumentation and chemistry company that dominates the market (similar to Apple in consumer electronics). We designed a new, singular, global web presence to consolidate 377 separate sites and provide Roche Diagnostics with a uniform content authoring tool, elevate quality standards and reduce compliance risk.

Our goal for the new regionalized experience — built on AEM to support dozens of content authors and multiple languages worldwide — was two fold. First, reduce friction for those seeking product information. Second, create an opportunity for Roche Diagnostics to showcase some of its impressive thought leadership and sexy instrumentation.

Despite a long track record of innovation and invention — the kind that reduce errors and save lives — Roche Diagnostics was not capturing the benefits of it’s leadership. Every country has it’s own federal approval requirements for medical technology so it isn’t actually the product that unites the audience — it’s the human-centered stories. I proposed taking product off the home page entirely for un-authenticated visitors and publishing journalistic stories there instead. Complete with custom photoshoots and info graphics these stories help to drive an appreciation for Roche’s ‘why’.

I

Client

Roche Diagnostics

Project

Website Redesign

Agency

SapientNitro

Creative Team

  • Creative Direction / Todd Zerger
  • Pitch Creative / Kyle Tezak
  • Design / Eli Miller + Nichole Folgate + Kevin Kinley
  • UX / Charlie Fisher + Luke Grohovsky + Sam Stanfield

UX Design

New structure, reduced friction

Competitive Assessment.
UX hypothesis proposing manageable structure to support international versions and legal compliance.
Prepare UX deliverables including sitemap, new navigation and wireframes illustrating new structure.
Remote navigation testing (Treejack) and moderated user testing.

Visual Design

Design system and templates

Fully responsive page design templates.
Component-based design for AEM.
Design system (Sketch and InVision Inspect).
Constructed argument for updating brand guidelines to include typography optimized for digital experience.
Motion design explorations.
Styleguide (Sketch).

Design exploration video

We created this motion study to support the introduction of the one web presence project to the global stakeholders assembled in Munich, Germany.

Storytelling and Presentation

Many love pink

But then, some don't — even when it's in the brand guidelines. Over the course of the project I built 25 presentations (presented in Minneapolis, Indianapolis, Pleasanton and Munich Germany) guiding a globally distributed leadership team to consensus. Perhaps my favorite was for our initial pitch. (We learned the spec creative was the deciding factor in winning the business).