Novartis

UI/Visual Design

Overview

Novartis is a multinational pharmaceutical company based in Switzerland that researches and manufactures a variety of drugs.

View Site

The Challenge

With today’s technology, Doctors and consumers are continuously looking for new and existing drugs to help their patients live a longer life. Novartis came to us looking to redesign their product websites with a modern look that is responsive and had new UI components.

Building the Structure

To showcase each component, old and new, we designed two responsive templates, a landing and interior webpage. From there, Novartis could take each template and customize them to fit each product’s site requirements. We also designed standalone web pages such as a gateway portal and sitemap that helped doctors and patients navigate each product’s site.

Click arrows to see webpage examples.

Placing each Component

Working with the UX team, we researched and design new components, icons, and interactions. We faced several challenges such as keeping icons and contents proportional, how the toggle and tool treatment would display in different responsive breakpoints, and how to keep the ISI content always on the webpage (due to FDA regulations) without taking away from the overall website design concept. Once approved, Novartis was able to implement the elements into any product site, while staying consistent with its global brand.

Click arrows to see component examples.

Documenting and Testing the Results

Once the responsive templates were approved, we documented each template, component, layout order, and other elements onto a web style guide. The development team would use this guide as a reference to prototyped a rough pass of some key webpages. After the first pass was completed, we tested and documented the prototype for design inconsistencies in spacing, scaling, font sizes, colors, interactions, hovers, and other items. Once approved, the development team was able to continue and apply this template to each of their product websites.

Click arrows to Web style guide examples.