All cases

Bringing a new visual identity to life

2019 Novartis

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.

02 Imagery

People-centric 

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

03 Design elements

Scientific patterns as a differentiator

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

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 precisely this principle.

05 Flexibility and consistency

Bringing together the pieces

Following the atomic design process it was not about disassembling full designs into their parts. It was more about constructing 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. The result may look the same, but the approach has significant benefits.

06 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 — human. During our design process, we made many motion studies envisioning the final user experience.

07 Rapid prototyping

Build, test, learn and grow

To shape the new experience as quickly as possible and validate the different expectations of the first solution designs, interactive prototypes with actual code were developed early on in the realization process to receive feedback for further improvements.

08 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 solid guidelines that were always up to date and digitally accessible to all parties involved in the process.

Daimler