Design systems
for scalable and consistent UI

Basware, FinTech B2B SaaS,
2020-2021

Users

Developers, designers, QA, and product managers.
Task

Complete development to merge 2 legacy design systems
Team

2 developers, 2 designers (including myself), a content designer and a team lead

User problems and goals

Complicated Structure

Create an easy-to-manage system with no duplicate information, ensuring a single source of truth.

Poor Search and Naming

Improve search functionality and use clear, standardized naming conventions for easy information retrieval.

Inconsistent Documentation

Maintain consistent, clear, and comprehensive documentation across all platforms.

Irregular Updates and Collaboration

Keep the system regularly updated and support collaborative use by multiple users.

Basware Design System

The design system consists of the following

UI component library Graviton

Building blocks of UI designs (Angular Material based) and aligned Adobe XD UI Kit
Design guidelines

Instructions to build UIs out of building blocks, getting started for developers, writing, localization and accessibility guidelines

Component examples

90% of components were designed for 1 year

AG grid styling and custom features

Integrate AG Grid with Basware Design System for a consistent and customizable data grid. Use Basware themes and CSS for styling, and add custom filters, editors, and cell renderers for tailored functionality.
Open design spec
About AG Grid
Text inputs

Support various types, including text and text area, each optimised for specific data needs. Features include customisable placeholders, validation, content removal, info tips and styling options to ensure a consistent and user-friendly experience across applications.
Open design spec
Dropdown Select with lookup

Supports single-select for choosing one item and multi-select for selecting multiple items. Features include searchable options, customizable styling, and clear integration with application data, ensuring a consistent and efficient user experience.
Open design spec
Banners

Support various types, including alerts, updates, and announcements, with customizable styling, colors, and icons. Features include adjustable dismiss actions and attention-grabbing designs to ensure key information is effectively communicated to users.
Open design spec
Empty states

Provide clear, user-friendly messages and visuals for scenarios with no content or data. They include customizable text and illustrations to guide users on next steps or actions, ensuring a consistent and helpful experience when content is unavailable. Features also include optional calls to action and styling that aligns with the overall design system.
Open design spec

Documentation examples

Team approach and actions

Audit of existing patterns, components, technologies and tools

2 current design systems and component libraries
Research user needs and problems with the current approach

User interviews, surveys and collecting feedback
Create a navigation and content structure for the design system

Including Information Architecture testing
Research and choose suitable technologies and tools

Compare different approaches for components development and documentation
Update and create new components and patterns

Aligning existing components and design patterns with development and user needs
Document, publish and keep guidelines up to date

Regular releases of new components and guidelines updates

Obstacles

High level of uncertainty

No clear expectations, plan, processes, or direction
Technology and resources limitations

Default Material Design System solutions don’t meet our complex component needs
Huge amount of information to analyze

Over 100 guideline pages in Confluence to review

User problems and goals

Complicated Structure

Poor Search and Naming

Inconsistent Documentation

Irregular Updates and Collaboration

Basware Design System

UI component library Graviton

Design guidelines

Component examples

AG grid styling and custom features

Text inputs

Dropdown Select with lookup

Banners

Empty states

Documentation examples

Team approach and actions

Audit of existing patterns, components, technologies and tools

2 current design systems and component libraries

Research user needs and problems with the current approach

User interviews, surveys and collecting feedback

Create a navigation and content structure for the design system

Including Information Architecture testing

Research and choose suitable technologies and tools

Compare different approaches for components development and documentation

Update and create new components and patterns

Aligning existing components and design patterns with development and user needs

Document, publish and keep guidelines up to date

Regular releases of new components and guidelines updates

Obstacles

High level of uncertainty

Technology and resources limitations

Huge amount of information to analyze

Submission Successful