⚡

Case Study: Johnson & Johnson

Johnson & Johnson: Janssen joins the brand with an updated name and design.

Established as the pharmaceutical arm of the Johnson & Johnson (J&J) brand, Janssen Pharmaceuticals is a long time client of the agency. I was brought on to assist, advise, and ultimately lead the execution of a rebrand of their website. Renaming from Janssen to Johnson & Johnson Innovative Medicine, I worked on a fully collaborative team to execute this new website.

The Problem: Janssen was to be rebranded as Johnson & Johnson Innovative Medicine (JJIM), and all websites (global and localized sites) should adhere to the new J&J branding (launched late 2023)

The Details

Over the course of a year and a half, I worked with my team of a project manager, developer consult (since we were not building in-house), copywriter, account executive, and designer to execute this rebrand. At the beginning of the project, I was exclusively acting as UX Manager, assuming a position on the team right as the information architecture was being built.

Together, we created a system of components, optimized for the new content management system (CMS), Brightspot. While we had a little bit of a rough start, I was able to come in and make sure that we were building a customized solution based on the new brand information we were given.

For the first time, I was able to engage regularly and directly with the strategy lead, intertwining UX strategy with her research. Because of this, we were able to quickly and efficiently accommodate the ever-changing landscape of the project, due to last-minute client adjustments.

Because of my close relationship with my project manager and account executive, I was able to help manage ongoing conflicting client feedback to keep the project on time and on track as much as possible. Even when working with the developer was a struggle, I was able to use my design and technical knowledge to manage and guide the on-going hand-off needs, as well flag any missing items or processes that would create problems down the road.

From understudy to lead role: Let’s take a look at some of the systems we put into place to be a successful team.

Screenshot of our information architecture (IA) work in Sketch. I made the recommendation to split up the sitemaps into different pages so that we could have separate, but on-going deeper conversations as necessary.

Screenshot of our early component library for presentation to Brightspot. After receiving the project from another designer, I requested a meeting with them to ensure alignment to their system to ease implementation stress down the road. I also restructured the components to directly align with the existing Brightspot component library to reduce costs.

Situation & Tasks Given

My roles were only a piece of pie of the work our team accomplished, from the creation of the wheel to the electric car. Some of those tasks included:

Information Architecture
Full Brand & Site Content Audit
Localization Consultation and Recommendations
Prototype Development
Full wireframes and content copy manuscripts
Cross-agency collaboration between client (J&J) and developers (Brightspot)
Content creation for new Global pages
URL redirection audit & SEO recommendations

Throughout the time of the project, our team regularly had to readjust and accommodate changing scopes and budgets, but we were able to bring our best work through every stage of the process.

One of the biggest set backs we had, that we were able to push beyond, was switching our entire design workflow from Sketch to Figma to develop the prototype. The client did not give approval for this until the last minute, and by working with my agency, I was able to recommend a conversion tool to ensure accurate and speedier conversion when the native capabilities within Sketch/Figma were not enough.

Additional Context & User Base

Our strategist, Erin Bernard, worked directly with our client teams to prioritize the audiences for the redesign. For the sake of our overarching design, we focused on the primary audiences of job-seekers, potential partners and patient advocacy groups. In some internal pages, we focused more on the secondary audiences of patients and caregivers, health care professionals (HCPs) & key opinion leaders (KOLs), and the media.

Our goal in this project was to create unification between the J&J main site and their pharmaceutical arm, so that there could be a stronger and more cohesive brand identity.

A look at our handoff files. At the time, the prototype was 95% completed, and was meant to be used for testing. Due to the sharp reduction in team, time, and budget, I personally put together the prototype myself.

A view of our final prototypes that were used to piece together the pages, based on approved manuscripts

Since the prototype was meant to be as usable as possible, we fully built out as many components as possible for our two main viewports: 1440px and 375px. We also built wireframes for tablet/smaller desktop displays, but due to budget we were not able to build those for prototyping.

Lessons Learned: Keep calm and carry on. Clients are going to do client things. They’re not going to review things when you tell them, and sometimes they won’t pay attention to things you tell them to. Even better, in the final play of the game, they’ll tell you that actually another team has been working on the same thing you have, your work is going on hold, and next thing you know, the site that launches isn’t the one you spent the past year working on. When this happens, stay calm and redirect. As a designer, we can only do so much, and many things must be handled by account executives; it’s literally their job. As long as you keep a strong relationship with all of your team members, you’ll make it through no matter how many tables you want to throw out the window. And always remember: at the end of the day, the day gotta end.

By the end, we were family: A family that now has extensive experience with delayed feedback.

Results & Future Plans

At the conclusion of this project, I found myself yearning for the chaos, the misdirection, and the toxic relationship with our client. However, I learned valuable lessons in time management, client management, and that to do your best work, you need to be your best self. When any of us needed a break during the sometimes long 50-hour weeks, we knew to reach out and ask for backup.

I greatly enjoyed managing my direct report, Joyce Chin, during this process. We were able to support each other and push ourselves to be better. When wire-framing, Joyce was able to take feedback from the team and myself to develop components that better suit the audiences. We’d meet daily to check-in on each other and make sure we were always aware of each other’s work so that either one of us could step in at a moment’s notice.

While we are still waiting for the launch of the site, J&J has launched a successful rebrand, and the team was able to launch an interim site, preparing users for the change coming. I lightly consulted on that, as I was working on the larger project at the time.

Don’t you fret, ma chère! More case studies coming soon…

💡

View additional skills

Need some mo(o)re?

💡

Let's work together

💡

Back to home