Roadmap

This is the roadmap of Nord Design System, based on our planned design and development path. Subject to change based on user needs and feedback. Full backlog can be found from Linear.

Q4 2020 #

• Background and user research.
• Overall planning and defining scope.
• Conducting interviews with makers, users and stakeholders.
• Figuring out organizational challenges.
• Overall Design System API Design.
• Design principles for the system.

Q1 2021 #

• Ways of working for design system.
• Public documentation platform for Design System.
• Drafting Type, Color & Spacing rules for design system.
• Work on design principles for the system continues.
• Establishing new workflows for the team.
• Design Tokens package work starts.
• Theming package work starts.
• Content and documentation creation work starts.
• Publishing Font package v1.0.0
• Name for the design system.
• Versioning model and public releases page for design system.
• Naming and coding conventions for design system.
• Automated frontend tooling.
• Publishing Theming package 1.0.
• New marketing website work starts.
• Corporate brand refresh and planning.

Q2 2021 #

• New marketing website ready.
• Brand refresh ready.
• Team building for design system.
• Starting to provide support for design system users.
• Public release of the Design System.
• Bringing Nordhealth fonts into font package.
• Recategorization of themes and bringing in Nordhealth theme.
• Documenting the new Nordhealth brand.
• Rethinking naming and categorization of design tokens.
• Onboarding new team members.
• Design work for refreshed user interface components starts.
• Content and documentation creation work continues.

Q3 2021 #

• Starting work on Figma designer toolkit.
• Design work for refreshed UI elements continues.
• Onboarding new team members.
• Introducing “Design System Academy” that provides opportunities for the designers and product people to improve their skills and learn new ones.
• Validating different frameworks and build tools for Web Components.
• Migrate from Stencil to Lit.
• Setting up storage container and CDN distribution for design system.
• Icon library work starts.
• Core component system work starts.
• Automated frontend tooling work continues.
• Prototyping and gathering feedback about the new components.
• Content and documentation creation work continues.
• Improved communication via "Monthly updates" and weekly office hours.

Q4 2021 #

• CSS Framework planning and work starts.
• Accessibility testing ramps up.
• Publishing Design Tokens package v1.0.
• Publishing Themes package v2.0.
• Publishing CSS Framework package v1.0.
• Publishing Webfonts package v2.0.
• Updated color design tokens for Healthcare and Veterinary apps.
• Visual regression tests for design system components.
• Deployment and publish automation for NPM packages.
• Publishing Nordicons v1.0.
• Beta Components package for testing.
• Starting to organize wider sessions about design system inside the org.
• Design work for refreshed UI elements continues.
• Figma designer toolkit work continues.
• Core Component System work continues.
• Content and documentation creation work continues.
• CSS Framework work ramps up with the help of Dave.
• Dog fooding product teams and ourselves to get feedback.

Q1 2022 #

• Design work for our applications and platforms continue.
• Core Web Component system work continues.
• Accessibility documentation and checklist.
• Usage guidelines for Nord Figma Toolkit.
• Brand refresh work for Provet Cloud, Diarium and Navisec Health starts.
• Bug reporting capabilities and enhanced support for design system.
• Creating Usage guidelines for components.
• Component work shifts to templates and patterns as well.
  • Sign in template
  • Application template
  • Settings template
• React components released.
• Dog fooding product teams and ourselves to get feedback.
• Improved documentation regarding getting started with Nord.
• Creating content guidelines for components.
• Web Components reaches stable 1.0 state.
  • Badge component
  • Button component
  • Calendar component
  • Card component
  • Checkbox component
  • Command Menu component
  • Date Picker component
  • Fieldset component
  • Icon component
  • Input component
  • Radio button component
  • Select component
  • Spinner component
  • Stack component
  • Table component
  • Textarea component
  • Tooltip component
  • Visually hidden component
  • Header component
  • Navigation group component
  • Navigation item component
  • Navigation component
  • Layout component
  • Empty State component
  • Banner component
  • Avatar component
  • Popout component
  • Dropdown component
  • Dropdown Group component
  • Dropdown Item component
  • Progress Bar component
• Creating integration guidelines for components.
• Figma Toolkit reaches stable state.
• Theme builder for testing themes.
• Improved design guidelines regarding type and color.
• CSS Framework reaches stable 1.0 state.

Q2 2022 #

• Wider public release of the Design System.
• Internationalization support for Web Components.
• Improved test automation and screenshot diff tests.
• Moving onto a more stable theming system in Figma.
• Reducing the number of themes to two (light/dark).
• Simplifying component and template examples by removing all custom CSS.
• Developing new components and improving the existing ones.
  • Improved nav group component
  • Improved nav item component
  • Improved dropdown component
  • Improved popout component
  • Improved navigation component
  • Improved layout component
  • Toggle component
  • Tab group component
  • Tab component
  • Tab Panel component
  • Modal component
  • Skeleton component
  • Divider component
  • Toast Group component
  • Toast component
• Forming new design system contribution model.
• Product team support by setting up pairing and training sessions.
• Improved right-to-left content examples for documentation.
• Defining performance metrics for Nord Design System.
• Dog fooding product teams and ourselves to get feedback.
• New high contrast Nord themes for dark and light variants.

Q3-Q4 2022 #

• Work on improving the existing components continues.
• Focusing on contribution and adoption from different product teams.
• Internal and external design system research.
• Improved color system to better cover the needs of feature teams.
• Public CSS Custom Properties API and documentation.
• Iconography design guidelines.
• Defining backlog prioritization model.
• New AWS production and staging environments.
• Improved design guidelines regarding typography.
• Improved design guidelines regarding space.
• Developing more complex components and improving the existing ones.
  • QR Code component
  • Improved Table features
  • Small, medium, and large Input component
  • Small, medium, and large Textarea component
  • Small, medium, and large Checkbox component
  • Small, medium, and large Date Picker component
  • Small, medium, and large Select component
  • Split Button component
  • Button Group component
  • File Upload component
  • Sheet component
  • Details component
  • Number Input component
• Work on templates and more complex patterns continues.
• Creating automated tools to measure adoption and usage.

Q1 2023 #

• Nord Command Line Interface (CLI) is published.
• SSR (Server Side Rendering) support for Web Components.
• Focusing on contribution and adoption from different product teams.
• Nordicons automation for Nord Figma Toolkit.
• Starting to research the efficacy of Nord Design System.
• Developing more complex components and improving the existing ones.
  • Multiselect component
  • Color Picker component
  • Range Slider component