Health Hub Strategy and Redesign

Amgen Hub

A website that allows healthcare providers to explore and share content that would help their patients.

After acquiring 100+ business around the globe, Amgen wanted to create a hub for healthcare providers to view both generic and branded pharmaceuticals, receive customized recommendations, as well as create a “social” like experience where healthcare providers could view and attend events and share articles and content with each other.

I was contracted by Debut Group to work with multiple third party vendors, including PWC, and other stakeholders to analyze previously created user flows, user stories, and functional requirements to create recommendations and next steps for the 46 page Amgen website. I lead and presented daily client-facing presentations, including prototypes. I Interviewed, hired, and managed a team of five designers and oversaw the entire design process from Conceptualization, Iteration, and Exposition. I created and delegated all tasks related to the website, and I designed, and wireframed 700+ pages.

Overview

Info

Role

Principle Product Designer

Timeline

October 2022 - January 2021

Problem

Multiple third party vendors had created a disorganized design process that was not meeting the scope of the client. 

The client needed a lot of customization options in the site as different global laws and restrictions effected every experience.

The client wanted their new site to be an “out of the box” cinematic experience for users, and for their new business partners to feel at home in a “hub” that is tailored to their preferences and professions.

Outcome

I was able to work with third party vendors to reprioritize, organize, and rescope the work to properly meet the clients needs. 

We created a customizable cinematic experience and design system that satisfied both users and the client.

Initial Designs

Not out of the box enough

I presented the client with an initial clean design that would be interactive but could also maintain the compliant needs of the country laws and the designs of individual branded pharmaceuticals. There were many features that the client liked, but the overwhelming consensus was that they wanted us to go bigger, more out of the box. This gave me an opportunity to hire a new team of designers as start from scratch. 

Initial Unbranded – Home Page

Homepage1

Initial Branded – Home page

New Design Inspiration and Vision

Tree of Life

Through a design sprint that I lead, we considered what health care, biology, and tech might look like when woven together. We imagined a tree connecting all things. The way we wanted Amgen’s new partners to feel. Connected. 

We also imagined a natural organism following users along their journey. The goal of the design was to make the users feel like every page was connected to each other. 

We pulled visual inspiration from the tree and three main sites:

www.Blueyard.com has an immersive experience that uses movement to take users through a 3D galaxy style design.

www.Prevint.pt/en uses a horizontal scroll to evoke feelings of moving through an experience. It is seamless page by page, something we really strived for. 

www.ohzi.io is inspiring for so many reasons, but we loved the way they use animation and movement to disguise page navigation and load times.

I presented the ideas, and with Amgen’s go ahead, I began the UX work and developing the design system.

Countless Experiences Designed

There were countless experiences that needed to be considered and designed. I will show a few examples below:

Landing Page and Personalization Flow

The Landing page and Personalization flow were especially difficult experiences to design. The landing page was not only meant to allow visitors to navigate to the Hub as well any other Amgen product that they wanted, but it was the first step in personalization and global compliance. 

Before 

After – 

  • Integrated feature into the design system. Including designing the movement of the particles that follows the user through the site. (the still image behind the designs is a representation of the particles following the users mouse)
  • Hierarchy properly established for clearer experience. This included researching what users we really needed to show and represent
  • New icons for easier visual navigation.
  • Language changer added

Before 

After – 

  • Focused on clear hierarchy and flow. Smart search, smart filters, and condensed the flow.
  • Took advantage of “Show more” to consider the huge differences in the least (4 options) and most (62 options) use cases. 
  • Designed the experience to allow the users to choose how much personalization they wanted
  • Allowed users to skip personalization all together and go right to the site. 

Home Page and Navigation

Before 

After – 

  • Created an interactive horizontal scroll to make the user feel connected to every page.
  • Gave users access to their content quickly and easily
  • Created a smart menu with search and filtering

Before 

After 

Before 

After 

Before 

After 

Retrospective

Reflection

This project was hectic and wild, but I am so glad I got to do it! I learned how important client management and managing expectations can be. I was also able to teach a few things to the junior designers, which felt so special. Since this project, I tend to be a little more firm on Scopes and SOWs, but I think it has effected my work in a positive way. I also learned how important it is to be able to work with a dev team EARLY on. Feasibility checks save time and energy for everyone involved. 

What I learned

Sometimes you get the opportunity to step out of the box, and you’ve got to run with that.

Stress effects everyone differently, communication is the most important part of the job.

 

Extra: A screenshot of just a *FEW of the screens my team created for this project