Image

Contributing to a User-centered Design System

Design System

PointClickCare serves the North American senior care Health industry. Pointclickcare design team were redesigning the whole UI with a consistent design system with Figma and react component. As a UX Designer, I assisted the team build simple, with easy-to-use components that allow product designer to build exceptional experiences and consistency, bring better communication and clarity to developers or stakeholders.

What I did

  • Research
  • Component design in Figma
  • Documenting in Confluence

Credit

  • Bruce Ashtiani - Principle UX Designer
  • Janet Lai - UX Designer
  • Quang Tran - UX Engineer


Image

Building a design system

As products gained complexity, investing in our design system will bring more speed and efficiency. As we started to redesign, we saw that it made sense to align components from a visual and interaction standpoint to create a single source of truth in aesthetics, behavior, build and experience.

Image
Image
Image
Image

Product design

It is vital to create a design system using products it will be applied to, with real data and problems. Our goal is to create system enhances the user experience and best meets our business needs. Below is a little preview of the products that shaped the system.

Image
Image
Image

Documentation

The design system is fully documented, including usage guidelines and specifications for all foundations, patterns and components. The Design System is concurrently hosted on Figma and Storybook on the frontend, with Confluence used to manage documenting on the design side.

Image
Image
Image
Image
Image

What did I learn?

The design system allowed team to design and build a consistent design. The unified component clearly showed the user which component had priority and how much importance. By bringing together the different components used in one place, designers can focus on interaction flexibility rather than focusing on new colors and sizes when designing. Also, it helped to smooth onboarding of new designer efficiently.

What are the next steps?

  • Bug fixes
  • Update and maintain components
  • Consolidating extraneous components and patterns
  • Add additional components as needed and plan version 2.0
  • Familiarizing ourselves with design system best practices