top of page
01

SYMTUZA®Site

VISUAL DESIGN, COMPONENT LIBRARY, UX + UI DESIGN

 

I had the opportunity to refresh a Jensen Pharmaceutical Company product website focusing on their new groundbreaking HIV drug, SYMTUZA®. The client wanted to incorporate the evolving brand direction into the website and create a flexible design library for future scalability. As the contracted Experience and Visual Designer, my goal was to transform SYMTUZA®'s online brand presence by providing users with an optimistic, personable, and visually uplifting experience that met both Jensen Pharmaceutical's business requirements and marketing goals.

01

SYMTUZA® Patient Site

UX / UI / VISUAL DESIGN
& DESIGN SYSTEM CREATION

 

I had the opportunity to refresh a Jensen Pharmaceutical patient website focusing on their new groundbreaking HIV drug, SYMTUZA®. The client wanted to incorporate the evolving brand direction into the website and have a flexible design library built out for future scalability based on the refreshed look. As the contracted Experience Designer, my goal was to transform SYMTUZA®'s online presence with a more energized visual language and patient–user experience that better aligned with both Jensen Pharmaceutical's business needs and marketing goals.

01

SYMTUZA®Site

VISUAL DESIGN, COMPONENT LIBRARY, UX + UI DESIGN

 

I had the opportunity to refresh a Jensen Pharmaceutical Company product website focusing on their new groundbreaking HIV drug, SYMTUZA®. The client wanted to incorporate the evolving brand direction into the website and create a flexible design library for future scalability. As the contracted Experience and Visual Designer, my goal was to transform SYMTUZA®'s online brand presence by providing users with an optimistic, personable, and visually uplifting experience that met both Jensen Pharmaceutical's business requirements and marketing goals.

Project Challenges, Project Goals

 

This being an ad agency project, it came with all the usual headaches and curve balls; continual copy changes, ambigious wireframes, scant brand assets, conflicting internal feedback. But the overall objectives were clear:

Brand Goals

• Depart from the somber imagery

• Push the current guidelines with a fresh, optimistic vibrancy

• Consolidate copy and graphs to be more visually digestiable

UX / UI Goals

• Build out a documented design system and component library for global,      

     scalable consistency

• Reduce content overload with a more modular / "chunking" approach

•Improve overall page design and the experience of feature functionalities

 

Client / Stakeholder Goals

• Modernization

• Simplify informational complexity to 4th grade reading level language

• Deliver key messages and claims in a more visually comprehensive way

Portfolio_SYMTUZA_IMAGE2.png

Compare & Contrast Optimization Highlights

This case study focuses on the website redesign process, outlining the four main steps taken to enhance the overall site experience for the target audience: the patients.

 

              Removed the over-wide grid margins to use full-width imagery for a stronger visual impact

 

              Bolder presence of brand palette

 

              "Chunked out" big color blocks of content for easily digestible, modularized sections 

 

              Simplified, large data visualizations to drive key messages and claims directed at patients

2.png
1.png
3.png
4.png

Though much of the project was in light over-sight from the Associate Creative Director, the curveball was the brand evolution was in it's early stages and not yet rolled-out. But the site launch was slated to go live even before the final branding was due to be fully fleshed-out. Below was my only brand guideline or general reference for a visual direction still in flux. Such is agency life...

   

SYM_Brand.png

Previous 

Portfolio_SYMTUZA_IMAGE4.png
Arrows.png

Re-Design

Portfolio_SYMTUZA_IMAGE5.png

Examples of UX "micro" Improvements

Beyond visual design, optimizing the site usability consisted mostly of improving the functionality of certain wonky behaviors of current feature -- reducing clicks, updating to current best practices and overall improvement to some obvious UI friction.

Video Player Pain-points

The Patient Stories page had a centered "hero" video player with all other video thumbnails buried below it. And with very limited screen-space due of the persistent legal footer, the user was forced to always scroll down to click other videos, and then scroll back up to watch every selected video. Pretty annoying.

Previous 

SYM_6.0_PatientStories_BEFORE.png
Portfolio_fade.png

UX Solution

A horizontal layout works better in consideration of the legal footer and prevents needless, clunky up-and-down-scrolling between videos. This lock-up also accommodates all other video thumbnails as well as additional future content in a nested sidebar, never having to fight the limited verticality of the viewport.

Re-Design

SYM_6.0_PatientStories_LRG.png
Portfolio_fade.png

UX Solution

Simplifed -- contain the quiz in a single module, require no scrolling, display a progress bar and back button. Constraining a task also promotes less tabbing for un-sighted users in regard to A11y.

Previous 

SYM_Portfolio_Quiz_Before.jpg
Portfolio_fade.png

Interactive Quiz Module Pain-points

The quiz, intended for CRM purposes, needed some improvement. The original interaction created a new module for every answer clicked, extending the quiz interaction all the way down the page, plunging the user down the page. No bueno.

Re-Design

SYM_11.1_Resources_LRG.png
Portfolio_fade.png

Building Out a Flexible Component Library

Beyond the visual design of the brand refresh, the client requested a basic component library  to ensure consistency across all user touch-points after hand-off. Moreover, the client wanted a more reliable process to streamline future changes with available pre-designed, reusable pieces to speed up time-to-market updates. The goal was to provide variations that other designers and Dev could just "plug and play".

,01.

To handover a scalable branded framework I built out a flexible system of variant building block and component sets that could adapt to different content easily.

Component examples.png

,02.

Variants with component properties to toggle design elements on-and-off without having to wrestle nested layout complexities.

Component Group.png

,03.

And here's the Component Library sample, showcasing a high-level of the foundation design elements I created with the goal of a seamless branded visual language and future scalability. 

Style Guide & Component Library.png
Portfolio_fade.png

,04.

My documentation guide outlining the typographic hierarchy for headers across both desktop and mobile platforms, ensuring consistent visual consistency, color application and A11Y compliancy regardless of device.

Component Group.png

,05.

Example of my Primary Button documentation guide for Designer and Dev reference.

Buttons.png

,06.

Color scale documentation for brand and action hierarchy utilizing Semantic tokens and color Variables.

primacy action colors.png

Site Highlights

The intended result was a systematized visual language, a more energetic brand application that reduced the somber nature of the site's subject matter, and a more digestible way to display all the medical data that supports the marketing--–positive brand, engaging stats, a quick and easy info take-away. Here's where we landed (with shockingly few client changes...🤯).

SYM_3.0_Efficacy_LRG.png
SYM_ScreenMock_Mobile.png
Portfolio_fade.png
SYM_8.1_SwitchingtoSymtuza_LRG.png
DonutGraphSection.png
bottom of page