Safer, faster DesignOps

Ethics, Risk and Compliance at Novartis

The Ethics, Risk and Compliance (ERC) division is focused on managing and mitigating the impact of risks within Novartis. They do this by delivering insights and recommendations based on data gathered through behavioural decisions and data science. With a team of over 600, ERC generates recommendations based on data that is made available to staff internally through two core products, called Control Tower and Control Room.

The challenge

Managing Control Tower and Control Room presented a number of challenges to ERC's design and development team, primarily due to siloed communication and a lack of standardisation across UI design. This resulted in lots of inefficient back-and-forth, slow delivery times and bottlenecks across the development process.

Novartis ERC’s big question

How do we make our prototyping and development process more efficient, with less siloed communication?

To address the core issues, the &us team recommended the creation of a standardised design system, developed over a four week period.

Boosting productivity and improving UX

The resulting design system encompassed a wide range of reusable UI assets and styles, along with guidelines for their utilisation. This enhanced Novartis’ brand consistency across all products, streamlined collaboration, mitigated risk of miscommunication, and improved the experience for all staff – beyond the ERC team.

The process

Audit and analysis

We started with a comprehensive audit of existing products to identify inconsistencies. This involved meticulously sifting through data to discern valuable insights, identifying areas for improvement, and closely examining factors such as accessibility, language coherence, and the presence of redundant UI assets or colour schemes.

Asset recreation and user guidelines

Building out reusable components with atomic design (a well-known and popular methodology for building a design system), we recreated Novartis’ design components and revised swatches and scale values. To do this in a consistent way, we utilised Figma’s powerful variables feature to enforce uniformity and scalability.

We recognised the importance of interactive prototypes in the design process and embedded interaction states into our components. This ensured our design assets were not only on brand but fully functional, decreasing the turnaround time for creating prototypes that were ready for swift user testing. Design system components were accompanied by documented usage rules and guidelines to allow for consistent use.

Testing and iteration

To ensure its relevance, we applied the design system to current ERC projects; this allowed us to refine the design system against real-world products (including Control Tower and Control Room) and use cases. The result meant the design system had been tested against live scenarios and needs, ensuring it was fit-for-purpose.

We also used Figma’s ‘dev mode’ to streamline the transition from design to code, which meant developers could implement designs quickly and seamlessly - saving ERC both time and money.

Setting it up for the future

Understanding the importance of maintenance, we provided clear documentation, intuitive workflows, and accessible resources to accompany the design system. Coupled with its modular atomic structure, this ensured the team could maintain and adapt it easily as needs evolve, and encourage the system's ongoing improvement.

Key outcomes

Streamlined design and project turnaround times

By establishing clear guidelines and rules for utilising design assets, the time and effort required to create and maintain digital products is reduced, allowing the team to focus more resources on innovation and strategic initiatives.

Improved UX

The consistent user experience resulted in fewer calls and emails to the development team from internal users, quicker prototype production for testing, and hundreds of hours saved overall.

Enhanced brand consistency

The design system ensures consistency across all digital products, reinforcing Novartis' brand identity and providing a seamless user experience.

Seamless collaboration

The design team can now rapidly create fully responsive, high-fidelity designs and prototypes, improving team collaboration and ensuring smoother product delivery.

Empowered design team

The team can work more autonomously and confidently, knowing they have a robust framework to support their design decisions, enabling better communication and validation of design concepts.