Role: Design System Team Designer

Hyland Software Design System

In my time at Hyland I helped create and evolve the design system called Hyland UI, creating consistency and brand recognition across hundreds of software products.

Managing over 65 components and 218 pages of documentation for developers and designers.

I was responsible for the creation and maintenance of components used in the Hyland UI Figma kit. I also worked hand in hand with developers as we create new and existing components to make sure design and code match.

Hyland UI is a platform-agnostic frontend platform, the foundation to a new era of modern web applications provided by Hyland. A collaboration between development and user experience teams, the platform consists of the following pieces:

  • A rich library of Angular-based frontend components and services, spanning web and mobile use-cases.

  • An all-encompassing design system ensuring consistent, high-quality, user-centered designs.

This combination empowers teams across Hyland to rapidly design and implement consistent world-class experiences.

Component Breakdowns

As components are created i was responsible for making sure that the development breakdown on the component is worked out and aligned to our design standards. Walking through the component build process with the lead developer who will be creating the component. Delivering components as close to code as possible, using correct auto-layout setups and styles associated with the system.

Variants

Each component is built with different states in mind (Hover, pressed, active, focused etc.). Allowing for easy use in Figma prototyping and assuring we are aligned with code. So when designers use the components they are able to design with can actually be built using our code repo.

Component Architecture

A big pain point for our designers was the constant evolution of our design system components. And early on the loss of information that would happen upon updating our components. Before our 3.0 system revamp we worked out how we can rebuild our components to retain our designers information across design system updates. This lets us move from 3.0 to 4.0 by using Figma’s library swapping.

Icon Label Button:
We have found great success by not just using text styles, but by also using text components inside our components. This gives us the ability to switch between library files to test new changes in layouts across full system revamps.

Content Projection

While this might not be the industry term for this functionality it makes sense in our use case. We use a placeholder content container that can be instance swapped by a designer using the component.

Resizable side bar:
In this example, the designer used the design system side bar component and with the use of local components made a form/filter panel and can control all of the visual information inside the container.

The design system contains control over the spacing between the 2 main sections in this container as well as any styles associated with the overall component.

Development

After a component has been designed we work closely with the developer on ensuring the coded component is working and setup how we envisioned. Along with making sure that we pass accessibility standards.

Our small but mighty design system team won the coveted Top Banana award :)

Hyland Design System

In my time at Hyland I helped create and evolve the design system, creating consistency and brand recognition across hundreds of software products.

Role
Design System Design Lead
For
Hyland
Date
2021