Conversocial structured design projects using the double diamond framework

We prioritised investigative stories with the Front-end development lead to define the design system architecture & principles

1. The system would support multiple .js frameworks (Angular and React)
2. We'd avoid 3rd party libraries where possible as a way to reduce the overhead from reacting to library changes and be free to explore UI solutions
3. The Lead developer would consult through the pattern of audit and consolidation phases
4. We'd deliver new designs for the core pages and components extrapolated from those use cases ahead of development
5. Would have the flexibility of an atomic system

Identifying all patterns in use across the digital estate

Workshop summary

We consolidated the patterns in three steps to create our system structure

1. Component structure Setting a structure for how we'd reference the different levels of components within a design system:

During the workshops, I saw we'd end up with lots of overlapping molecules and organisms. This would lead to varied usage if we continued to follow an Atomic Design System structure

2. Core page consolidation Consolidating patterns into a single design language using core pages from each product to cover ~80% of the needed patterns

We followed our hypothesis to apply the visual language of the most recently designed product to the identified core pages

Ignoring forms (which are a given need for most design systems)

The parallel project was for a new pricing model that would be accessed in a new hub product. During its discovery phase I sketched out the flows with stakeholders and used these as the base to stress testing the design language

Bot Platform - Chatbot Flow map

Settings Pages

Each product was using the same setting template just with different visual styles.

These pages also covered the core form elements

Agent Workspace Product

Default view

Pricing model Hub Stress-test

Implementing the new design system interfaces & components

The design system was ready to have its components built and a rollout plan prepared for Q2 2020

From the core page designs we extracted the various atoms, components & modules and created the sketch assets

Workshops for pattern audits are stronger than doing it at your desk

• As a workshop, both designers understood the context for where the patterns were being used to a greater depth
• Cutting out UI gave a physical presence to the number of similar patterns with the current products
• By using the walls we had a great asset to show stakeholders (in person or pictures) the amount of variation

Designing a system that focuses on core pages gives a more robust and grounded set of patterns

• I wanted to create this design system by designing from a group of core product pages and then turning them into a set of components. At Aviva, I'd experienced it done the other way, which left large gaps for differing use cases
• By using core pages we saw overlap more easily and critically where patterns needed to deviate for better usability in their context

Taxonomy and system structure should start flexible. As the system grows structure becomes more firm

• We designed this system without enough developer involvement and between ourselves experienced confusion between molecules and organisms
• By using a hybrid structure we gave the system scope to firm up decisions later in its lifecycle
• Combining with learnings from Aviva, the flexible structure gives the system options as the other disciplines get involved down the line