Juan

Docplanner

2020 — Now

Working on design systems. More details coming soon, but if you want to know more about my work here, do not heasitate to get in touch

Docplanner’s mission is to make the healthcare experience more human. We work on web and app environments designing products for all the profiles in the healthcare industry including patients, doctors, and their assistants. My work there has always revolved around user interfaces and design systems. The case exposed here will go through Watson, the ultimate effort to provide a consolidated method to build the SaaS platform for doctors and assistants, from design to development.

The problem

Our UI Kit did not provide custom design directives as we were relying on third-party libraries. We had a lack of control over what could be done and became dependent on the framework, we weren’t flexible enough to adapt to changes that product designers required and we were creating a lot of legacy and dependencies due to the custom solutions introduced by several product teams.

The solution: Watson

Watson is not only a project but also a team that was officially put together to be in charge of the design system. With the Docplanner Design Language as its foundation, it provides working code, design tools, and resources to assist the teams in their quest to design the product.

Starting point

The first phase of Watson included the work needed for setting up all our design directives. We worked on the typographic scale, border radii and shadows, spacing rules, and color palette at a core and semantic level. I was in charge of the last two: spacing and color, and I will be showing below the result of those and our first batch of components.

Spacing

Space is all over any design, it’s used in CSS properties like padding or margin, and also to position objects. Epitomizes the “I design this way, you build that way” gap between design and dev. What we did here was to generate the needed tokens and components that could allow us to consistently apply spacing rules across disciplines.

Different grouped actions and the use of spacing

Color

Maintaining consistent and engaging digital interfaces throughout the SaaS platform for clinics, doctors and assistants demanded comprehensive guidance around color usage. To get there, we started by building a programmatic color palette based on the LCh color space (this space correlates nicely with how the human eye perceives color). This gives us enough flexibility to provide the needed color tokens for backgrounds, foregrounds, and borders and to deliver design guidance on their usage.

Our palette suggests meaning and usage for each of the colors in our system. For example, from a semantic perspective, the color green is used to reinforce a positive sentiment. The naming structure of our semantic palette reflects the pieces of semantic information to help you understand the purpose and usage of any color: --w-color-role-sentiment-emphasis-state

Pairing foreground with their backgrounds counterparts

Using the -inverted versions of our semantic colors

Using primary, raised, and inset backgrounds to differentiate surfaces in the interface

Using neutral foregrounds to reinforce the hierarchy

Border color tokens applied to a table component

Combining yellow is a bit trickier. Our semantic colors are built around the concept of consistent luminance and contrast, but following them and establishing a common rule does not work for yellow. This color by definition needs to stay light to keep its meaning and that’s why we break the rule by providing a one-off solution for the yellow shades.

An accent alert uses the foreground-accent-inverted token while a warning alert must use foreground-warning to achieve a similar ratio. Its background also employs a lighter shade to avoid browns

Watson Web Kit in Figma

After working on the foundations, we started tackling an important topic. How could we expose these directives and future components to the design team? How could we benefit from Figma? In order to solve this, we defined the usage of properties and variants and their pros and cons for other designers and our library maintenance. We started providing the very first spacing and layout components and color and typography tokens.

Spacing directives are provided as variables for designers to build their spacers and stacks using auto-layout

Color tokens in Figma are available as variables

We also provide the Stark plugin installed by default to check all color combinations

Components

If we had to streamline what builds the SaaS platform we will end up with two key elements: forms and tables. The second phase of Watson was dedicated to form components and I had in my plate the button, icon, icon button, input, native select, or textarea among others. The design process is consistently applied across components, we first audit SaaS, then elaborate a proposal with the aid of the developers and we write down the documentation.

Documentation

The documentation is custom build by the design system team and contains all the necessary information. From recurrent updates, to a guideline to get started using the system for both developers and designers to a thoughtful documentation of the foundations, components, best practices and templates our users can consume.

Designing with Watson

Below you can find an example of one of the screens we templated and re-designed using the Watson Design System. More extensive and final examples will be coming soon.