NORTHERA Brand Campaign and Website Redesign

For Neurologists and Cardiologists

 
 

Project Background and Mission

NORTHERA is the first and only FDA-approved treatment for the relief of Neurogenic orthostatic hypertension (nOH), a rare disorder associated with autonomic nervous system disorders, such as Parkinson’s, that is defined as low blood pressure that causes dizziness and lightheadedness upon standing. The first objective was to develop a new brand campaign that will lead the strategy, drive asset creation and content development. The second part was to launch the new brand campaign and messaging on a completely redesigned website optimized for Clinicians.

 
 

Old Brand Campaign Imagery

Messaging research indicated there was campaign fatigue amongst sales and media. With a disease state campaign in place that focused on The Problem of nOH, the new strategic approach for 2019 would be to complement it with a new campaign positioning the brand as The Solution. The team (myself included) were tasked internally with ideating new solution-orientated branded campaign concepts. Three ideas were then selected and developed for client presentation.

 
 
 

New Brand Campaign Concepts

Concept 1: ‘At the Helm’ - Healthcare Providers can help set the course to guide their patients out of the rocky waters and hold steady against symptomatic nOH and provide patients relief with proven NORTHERA.

Concept 2: ‘Nothing Like It’ - Uniqueness is extraordinary, much like the rare blue flamingo, NORTHERA is the only medication proven to work that stands strong, helping patients restore balance and treat symptomatic nOH.

Concept 3: ‘Steps to Symptom Relief’ - Simple daily activities seem out of reach for patients with nOH. They imagine a day when they can enjoy normal activities like walking the dog. NORTHERA can help bring their dreams to reality.

 
 

Final approved campaign image

The flamingo image was selected as the new campaign visual. Using Photoshop, I seamlessly incorporated the different licensed stock images into the final approved campaign visual below. The goal of the new campaign image is to plant the idea that NORTHERA is fundamentally different from other competitor options, making the campaign unique and ownable while engaging the audience to think differently about the brand.

nt-flamingo.jpg
 
 

Website Audit and New Sitemap

The agency conducted a content audit, competitor and market analysis, and review of website traffic which led to key learnings and insights for optimizing the current branded website. Working in partnership with a UX Analyst, we consolidated the site audit findings, a list of updates and enhancements and a new sitemap recommendation into a Keynote presentation for client review.

 
 
 
 
 
 

Old Website, 2018

Key findings from the site audit concluded that the head navigation area along the top pushed content further down the web page. The sites main priorities were not clear. There were no clear CTAs, and no clear definition on what content sections were more important. Each page was heavy in content grouped by “type” rather than “topic”. Too many bullet points. Charts not visually captivating, information hard to understand. Was responsive but not mobile friendly, and users had to scroll charts horizontally on mobile to read.

 
 
 
 
 

Interactive Wireframes

In collaboration with a UX Analyst/Architect, I designed interactive wireframe prototypes in InVision showcasing key page templates for mobile and desktop. The priorities here were to focus on the new navigation organization/information architecture, content hierarchy to make high-priority information intuitive, and new proposed placement of the Important Safety Information along the right side column of the web page on the desktop version.

nt-wireframes.jpg
 
 

Style Tiles

This was our opportunity to establish a new campaign font, new color palette, iconography and chart illustration styles. I also used this opportunity to showcase examples of micro-interactions and animations by showing a combination of jQuery libraries and creating animated Gifs.

 

Web Font Typography

nt-Style-Sheet_01.png

Colors

nt-Style-Sheet_02.png
 
 

Icon Styles

nt-Style-Sheet_05.png
nt-Style-Sheet_06.png
nt-Style-Sheet_07.png
 
 
 

Chart Styles

nt-Style-Sheet_10.png
nt-Style-Sheet_11.png
 
 

Button Styles and Animations

btn1b.gif
btn2b.gif
search-animatedb.gif
form-fieldb.gif
 
 

Layouts

Applying Atomic design methodology, I created repeatable UI Bootstrap components such as buttons, menu items, etc., to build the whole UI up through the four stages: molecules, organisms, templates and pages that are optimized to improve site engagement. I then built each page layout to “span” across a flexible 12-column grid system in InVision as a functional prototype for client review, and as a source for Developers to access image assets and CSS styles.

nt-grid_01.png
nt-grid_02.png
 
 

Final Layouts

An engaging hero visual quickly captured the user’s attention to create an instant impression. Visual iconography elements were applied to support the user and business goals. Findability and readability were enhanced using an organized approach to a consistent layout of content. A task-based navigation clearly defined by user tasks. Clear CTAs to help a user quickly find content. Ensured all content is easily shareable and help promote registration opportunities wherever possible.

nt_webpage_home.jpg

Key page templates were redesigned to better incorporate the new brand campaign imagery throughout. The page templates were simplified, and we were able to scale back on heavy content by creating more pages. We also provide more patient resources such as videos to drive education and medication adherence.

nt_webpage_About.jpg
nt_webpage_About-Pharmacol.jpg
 
 

Optimized pages for mobile usage

nt_mob-mockup.jpg
 
 

Mobile Functionality

Below is an animation example of the Important Safety Information popup overlay that slides up and over the web page when the user taps on the plus ‘+’ expand button. The ISI and navigation bar minimizing in height when a user scrolls down the page.

 
 
mob_isi_Animated.gif
 
 

Top menu navigation and search functionality animation.

 
 
nt-mob_menu_Animated.gif
 

See more web design & digital campaigns