Design systems
for scalable and consistent UI

Basware, FinTech B2B SaaS,
2020-2021
  • Icons8 product 100 2

    Users

    Developers, designers, QA, and product managers.
  • Icons8 task 100 2

    Task

    Complete development to merge 2 legacy design systems
  • Icons8 team 100 2

    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
  • Graviton ag grid cells

    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.
  • Specification text input

    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.
  • Graviton dropdown multi select and lookup search

    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.
  • Specification banners system page level

    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.
  • Specification empty states – 2

    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.

Documentation examples

  • Screenshot 2022 12 22 at 17.02.42
  • Screenshot 2022 12 22 at 17.02.53
  • Screenshot 2022 12 22 at 17.03.30
  • Screenshot 2022 12 22 at 17.03.40

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

Component developement process

Graviton process v1.5 01
Built on Unicorn Platform