All cases

Bringing a new visual identity to life

Novartis Branded Websites

WONDROUS-Showcase-Novartis-Content-Header-XXL-2600.jpg
WONDROUS-Showcase-Novartis-Content01.jpg

01 Intro

New visual identity 

WONDROUS was mandated to apply the new branding and to redesign a series of platforms and digital channels. The new visual identity was introduced by the principles of Swiss Style, also known as International Typographic Style. Swiss Style is designed to achieve clarity, order, and a universally understood visual language.

WONDROUS-Showcase-Novartis-Content02.jpg

02 Imagery

People focused 

People are at the heart of what Novartis is doing and the new photography style served as a window into the Novartis world. Therefore the new imagery was also an important visual design element for creating a best-in-class digital experience.

WONDROUS-Showcase-Novartis-Content03.jpg

03 Design elements

Scientific patterns as differentiator

Simplicity is a virtue in scientific theories and is also the defining characteristic of a good visual design. New scientific patterns in the new color palette were used as an evolution of solid color blocks and provided a visual counter to imagery.

WONDROUS-Showcase-Novartis-Content04.jpg
WONDROUS-Showcase-Novartis-Content05.jpg

04 Design process

Digital design built by modules

Let's have a look at our design process. To create the best possible digital experiences across platforms we decided to work with a methodology called "atomic design". It's like chemistry where everything is composed of molecules made up of atoms. And just as in chemistry, web applications are first broken down into their smallest building blocks, and then combined and assembled into more complex design units. The name "atomic design" therefore is not created arbitrarily, but reflects exactly this principle.

WONDROUS-Showcase-Novartis-Content06.jpg

05 Flexibility and consistency

Bringing together the peaces

Following the atomic design process, it was not about disassembling full designs into their individual parts. It was more about the construction of full design experiences building up from the smallest design elements we created during the process. By doing so, we built a consistent and extendable digital experience. In the end, the result may look the same, but the approach has significant benefits.

WONDROUS-Showcase-Novartis-Content08.jpg
WONDROUS-Showcase-Novartis-Content07.jpg
WONDROUS-Showcase-Novartis-Content09.jpgWONDROUS-Showcase-Novartis-Content10.jpg

05 Motion studies

Bringing design to life

Micro-interactions and little animations have one purpose which is to delight the user. It's all about creating a moment that is engaging, welcoming and, dare we say it — human. During our design process we therefore created a lot of motion studies to envision the final user experience.

06 Rapid prototyping

Build, test, learn and grow

In order to shape the new experience as quickly as possible and to validate the different expectations of the first solution designs, interactive prototypes with real code were developed early during the realization process to gain feedback for further improvements.

WONDROUS-Showcase-Novartis-Content14.jpg
WONDROUS-Showcase-Novartis-Content15.jpg

07 Living design system

Living Style Guide and all that Jazz

The frontend code was provided with a Living Style Guide because the platform was not a static project and therefore needed good guidelines that were always up to date and digitally accessible to all parties involved in the process.

WONDROUS-Showcase-Novartis-Content16.jpg
WONDROUS-Showcase-Daimler-Leadership2020-Mood-XXL-2600.jpg

Daimler

Global leadership community platform