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 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.
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.
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.
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.
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.
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.
Daimler