Sam Winfield Product Design

Home   ›   Avaloq Design System

Avaloq Design System

Avaloq's design system encourages and enables project teams to create consistent new product designs while staying true to the Avaloq brand and design standards.

Leveraging from the foundation laid by the web banking project, we built upon the design guidelines, patterns, and components established to create a design system for all Avaloq products.

Achievements

We effectively consolidated design systems, patterns, and components from all Avaloq products and created a reliable central design system accessible to all Avaloq employees.

My role

My responsibilities included:

  • Initiating explorations into the Avaloq design system and establishing a foundation to build upon via the web banking project.
  • Assisting in the further development of the design system once a dedicated team was assigned to the Avaloq design system project

Our process

1. Consolidate

Broad consolidation

Avaloq's product range consists of various application types with different user groups and requirements. We first needed to understand these varieties to categorize and organize the application types via a broad consolidation exercise.

We identified three main categories as a foundation for the design system:

  • Mobile applications (iOS & Android)
  • Front-office applications
  • Back-office applications

Once we understood the fundamental differences in these applications, we could optimize the design system considering the different requirements.

Design pattern and component consolidation

To create a central design system, we needed to consolidate existing design patterns and components across our product offering to understand the requirements for each.


Example: Primary button component consolidation from various Avaloq products


2. Ideate & Prototype

Once we understood the current application of a particular design pattern or component, we analyzed the pros and cons of each (within their various application types), drafted proposals, and held bi-weekly ideation sessions within the design team. This supported the alignment of expert knowledge and varied product experience to arrive at a diversely effective solution.


Example: Team ideation and voting


3. Document

All final design components and patterns and how to use them were then thoroughly documented, outlining the various application options and examples to ensure a concise and reliable set of guidelines would be available to all Avaloq employees.


Example: Avaloq design system component library

Example: Avaloq design system documentation


4. Iterate

A design system is a living document and should continuously be built upon and developed as new knowledge is gained and improvements are identified. The Avaloq design system will continue to be iterated and refined.