Overview

GHG was working with Bayer on the launch of a consumer & HCP campaign site for its new IUD for young women.


client briefing > requirement gathering >  ux deliverables > launch

Requirement Gathering

  1. The target audience is between ages x-y, which is part of the millennial generation.
  2. Bayer agreed to develop the site as responsive since millennial women rate extremely high on the use of mobile platforms.
  3. There were several legal challenges to overcome in a responsive design, such as the Important Safety Information (ISI) and the Full Prescribing Information placement in a mobile view.
 

Exploring Constraints

ISI and Mobile Designs

At the time of the project kick-off there were no regulations on the precise location of the ISI on the page, except it had to be accessible at any time. 

Bayer provided guidelines about how the ISI had to be treated on the desktop sites across all of its pharmaceutical brands. Yet, Bayer had not yet provided any directives for mobile and responsive sites.

Skyla Paper Proto-type

 

Comparing and Solving the Problem

I researched and explored various ISI treatments with the least impact on the visual design area.

Some pharma brands added a persistent ISI to the bottom of the mobile screen in the menu above the mobile phone control panels.

User testing has shown that users have accidentally hit the phone controls instead of the bottom menu items.

The developers also indicated that it might be more difficult to code a bottom-docking menu because of of the various screen sizes. Another option would be a persistent left- or right-hand docking icon that would scroll with the page. The developers could keep the position almost fixed on the screen by making the icon position relative in coding.

The solution that would be the easiest to implement was to dock the ISI in a permanent position in the top menu. There would be small discrepancies in pixel sizes that may show on the top of the screen between the various screens that a clever design treatment would hide. The design area was discreet enough at 50 pixels to provide enough area. The ISI button would jump to the bottom of the page to show the entire ISI.


UX Design Approach

I worked on three different concepts for the homepage based on current web design trends (super flat, large background images, and a pinterest style format). 

Using contemporary designs (2012 trends) seemed suitable for the target audience (millenials). The Health Care Professionals (HCPs) site was approached the same way, since physicians increasingly rely heavily on mobile devices (iPhones and tablets) in their patient treatment.

All the designs were designed first in mobile to check on function and display before designing desktop.

 

Sitemap

Consumer Facing Sitemap

 

CONCEPTS

Approach 1: Patient journey focused on helping the HCP identify the ideal patient for Skyla.

Approach 1:

Patient journey focused on helping the HCP identify the ideal patient for Skyla.

Approach 2: Hierarchical layout of topics to help the HCP navigate.

Approach 2:

Hierarchical layout of topics to help the HCP navigate.

Approach 3: Display of the most important topics HCPs are concerned with on the homepage

Approach 3:

Display of the most important topics HCPs are concerned with on the homepage

 

Wireframe Designs Examples

View Detailed Mobile WireFrame

View Detailed Mobile WireFrame

View Detailed Desktop WireFrame

View Detailed Desktop WireFrame

 

Handing Off the Project

The client approved the design 2 approach with a few modifications. I designed the remaining pages and provided detailed annotation of the site following the approved thematic. 

Before I left for PKT, I created a detailed style guide for the next UX designer, as well as development to help them continue the project. The guide included detailed description of the element usage and development dimensions for desktop, tablet and mobile.


Site Launch

Skyla_Finished.png