Genentech Intranet Redesign

Unifying and streamlining an all-inclusive intranet.


The Problem

Genentech’s internal intranet fulfills several roles — social media platform, news site, events manager, user profile database, search engine, and more. Each section had to be optimized for its particular function while maintaining a clear set of global rules and patterns. It also had to be simple enough to use for Genentech's diversity of employees spanning five generations.

How can we create a cohesive system that accommodates so many different use cases?

The Audience

Genentech's employees were not only the primary users of their intranet, but also the main stakeholders deciding what features to include. We met with several teams that organized, created, and consumed the content on the site in order to get an idea for what they envisioned for the redesign. It was clear that there were a lot of problems with the existing site, including gaps of functionalities that users were using poorly integrated third party widgets and apps to fulfill.


Understanding the Space

From our interviews with various stakeholders, we found that while the intranet was difficult to use, it was a critical part of every Genentech's employee's daily work life. It was the hub for all things Genentech, ranging from getting the latest company news to RSVP-ing to a club's event. We audited the existing site, walking through it carefully to understand which features should be retained or improved upon.

Users could search across the entire site, with a special tab for searching the employee directory.

Users could search across the entire site, with a special tab for searching the employee directory.

We tackled each section separately, ensuring that each would feel robust as a standalone feature, while maintaining unified conventions and globally accessible elements. The site also had to be responsive, a new consideration given that it had never been designed for mobile or tablet before.

Employee profiles were previously hosted on a chrome extension, making for a clunky experience. The new profile could flex to accommodate for a lot or a little available information.

Employee profiles were previously hosted on a chrome extension, making for a clunky experience. The new profile could flex to accommodate for a lot or a little available information.

 

Multimedia section

The media landing page needed to be informative, yet compelling enough for people to want to check back frequently for new content. Introducing the idea of topics allowed for better discovery.

The media landing page needed to be informative, yet compelling enough for people to want to check back frequently for new content. Introducing the idea of topics allowed for better discovery.

Album pages became bigger, more visual, and accommodated more types of descriptors.

Album pages became bigger, more visual, and accommodated more types of descriptors.

Topic pages allow discovery by tags and can include individual media or entire albums.

Topic pages allow discovery by tags and can include individual media or entire albums.

Media detail was displayed as a modal overlaid on the page, allowing users to jump in and out easily. This made media more scalable across the entire site.

Media detail was displayed as a modal overlaid on the page, allowing users to jump in and out easily. This made media more scalable across the entire site.

 

Future Scaling

While we focused on specific sections of the site, we created a set of reusable templates for different types of pages so that Genentech could use them to craft new sections in the future. For example, the Events landing page uses an Index template which also applies to other similar types of landing pages such as the News and Announcements landing pages.

 
The same index page template can be used for multiple sections across the site, cutting down on development costs.

The same index page template can be used for multiple sections across the site, cutting down on development costs.

announcements.jpg
 

While some elements changed in the visual design phase of the project, we worked closely with the visual designers to make key decisions in establishing content hierarchy.

This was particularly useful during mobile design. Given the smaller screen and larger tap targets, it was critical to ensure that the main call to actions and functionalities remained prominent and logical.

Untitled-1.jpg

Project done in November 2016 with Odopod

 

Looking for more?