Johnson & Johnson

Stelara Responsive Site Design

Making a Pharma Site Approachable and Easy to Use

BACKGROUND.

STELARA® (a Johnson & Johnson brand) is a prescription medicine approved to treat moderate or severe plaque psoriasis and psoriatic arthritis. With 3 separate adaptive sites (desktop, tablet, and smartphone), STELARA® sought to modernize it’s site to 1 responsive redesign. The client also wanted the redesign to reflect their new strategy which is to guide their 4 target groups to content most relevant to them. The 4 personas were defined as: 1. someone who has never heard of STELARA®; 2. someone who knows about STELARA®; 3. someone who has plaque psoriasis and is casual about treatment; 4. someone who has plaque psoriasis and is serious about treatment.

THE ASK.

To design a clean, modern, responsive site that quickly identifies the audience within the 4 groups and gets them to the information they are looking for. Additionally, the brand sought to connect with it’s target in an emotional way. Research showed that psoriasis sufferers often feel alienated from others because of the scales and flakes on their skin and scalp. With the redesign, we were tasked with writing copy and picking imagery that would speak to the concerns of this group.

MY ROLE.

I was the Creative Director on this assignment. We were extremely short on staff so I also worked on the UX and UI Designs (storyboards, wireframes, use case scenarios) and art directed the designs. I was responsible for walking clients through our concepts, our wireframes, and our designs.

MY PROCESS.

During wireframing, much consideration was given to keeping the page as simple and clear as possible. Since STELARA® has a couple of indications, the homepage is a landing page that asks the user what they are interested in STELARA® for. Once an indication is selected, the user is taken to the homepage. A hero carousel would open with an introduction to the medication. The slider gives the client opportunity to add promotions or feature specific pages. Right below that hero are quick links that ask the user what they are looking for. With this, I hoped to simplify the self-identification process and categorize the user as persona 1, 2, 3, or 4. As the user drills in, related links are carefully placed below the content, giving the user curated information that suits their persona.

Pharma is particularly tricky because of all the legal restrictions. One of the mandatories is to have a preview of the “Important Safety Information” (ISI) always visible. User needs to be able to access this from any page on the site. From a marketing and usability perspective, this could be a real headache as users could get annoyed being bombarded by legal language from page to page. I solved for this by placing a preview of the ISI on the bottom of the webpages. It could be expanded at any point but takes up a minimal amount of space. As the user gets to the bottom of the content, the ISI scrolls along with the rest of the page.

In selecting the photography for the site, I focused on images showing confidence and intimacy between people. Psoriasis sufferers feel alienated and try to cover themselves. These images show men and women with short sleeves who are freely hugging loved ones and out enjoying themselves with physical activity.

THE RESULT.

Though the site is still under development and tested amongst focus groups, it’s a dramatic improvement from it’s predecessor. The designs are now consistent across all breakpoints and adheres to the approachable and friendly tone of the brand.

Project

Stelara Responsive Site Design

Client

Johnson & Johnson

Role

Creative Director, UX Designer, Visual Designer

Categories

, , ,