Brandwatch System Design and Design System Innovation
Role: Director of Content Design
Brief: Define a system design strategy to unify 3 previously unconnected companies under one product suite
Responsibilities: Design strategy, design operations, leadership and direction, content design strategy, accessibility strategy
introduction
As part of a merger and acquisition strategy, 3 complimentary SaaS companies were unified under the Brandwatch name.
But with different design identities, information architecture, UI and tech stacks, the user experiences were far from coherent.
I was part of a leadership team tasked with turning the ‘frankensuite’ of products into a harmonised, integrated ‘Brandwatch One’ system.
Discovery
Alongside a Product Design VP and Design Engineering Director, I defined the project’s overarching mission, goal and principles.
I then audited the existing products, commissioned user research and explored new directions based on the findings and industry best practices.
Vision and concept
The chosen direction centres on:
Vision - a frontend operating system to enable the suite’s technical and non-technical capabilities
Concept - a UI ‘shell’ with suite and product-level information architecture, interactions and a unified design identity
delivery strategy
Based on the layers of the operating system, the delivery strategy focuses on 2 key design initiatives.
Shell UI
An incremental rollout of 4 distinct areas of the suite:
Area 1 - global navigation to access suite-level services
Area 2 - local navigation to access product-level features
Area 3 - local header to access contextual product information
Area 4 - local product flows, features and interactions
Design system
Fully connected to the shell’s rollout, the new design system provides the UI and tech building blocks that enable the suite’s interactions and flows.
A wide range of visual, verbal and technical design foundations are also needed to form the baseline for the new identity and experience.
2 of the 3 merged companies already had design systems. These remain in place while the shell UI and future design system are being fully defined.
Delivery operations
A new product Experience team was created. I’m part of the leadership team, overseeing 2 design squads and 2 engineering squads:
Leadership - governs the strategy, roadmaps and quality assurance
Shell - delivers the information architecture and design identity
Design System - delivers foundations, components and patterns
Application Services - implements suite data APIs and authentications
Frontend Infrastructure - deploys build systems, programs and tools
Design execution
To lead by example, I defined the:
global navigation’s information architecture for 21 complex user scenarios
nomenclature and language patterns for the navigational interactions
content usability guidelines - foundational evidence-based standards for the suite
content accessibility guidelines - foundational standards and atomic requirements
The team delivered the UI’s visual and verbal identity, and other relevant design system foundations, components and patterns.
The local navigation and local header are in discovery, at the time of writing. The full system design is likely to take 3-5 years.
