Design System

The challenges with collaboration between designers and developers at Apryse (formerly PDFTron) arose from the lack of a systematic design library, which led to the need for an update to the design system. As the design team grew, it became increasingly difficult to maintain visual consistency in the UI. The initial focus was on Apryse's core product, the WebViewer SDK. Areas that required updating included improving naming consistency and adding more customization options to each component.

my role

As a Product Designer, I collaborated with two other product designers and a design system lead on this project.

Product
WV Design System
Duration
8 Weeks
Year
2022

Content Labeling

One of the challenges that designers were facing was the lack of naming consistency for each component across products. To address this issue, I was tasked to research and create a naming convention that would be agreeable to all designers and easy to understand. Our solution included the product name, component type, and any additional variant names to differentiate similar components.

Components

We further improved the component properties by increasing the number of available variants for each component. This allows designers to quickly and easily customize components to suit their specific designs, without having to create new components from scratch. By providing a wider range of options and settings, we enhanced the flexibility and customization options for designers, ultimately leading to more consistent designs.

Toolbar ComponentsPopup Menu ComponentsPanel ComponentInput Field Components

Takeaways

This project was my first experience working on a design system and creating components in Figma. It provided me with a valuable opportunity to develop a new skill as a product designer. By working on this project, I gained a deeper understanding of the importance of creating components that are adaptable and responsive to different contexts. Specifically, I improved my skills in using auto-layout and learned how to create different variations within a parent component.