The Eucalyptus Design Library was created for the Qualiti product and engineering team. Through the use of reusable components established in Eucalyptus, products and front-end code will follow a consistent design. It will also allow the team at Qualiti to deliver prototypes and products quickly.
Product Designer
6 weeks to establish, continuously updated
The original Qualiti Portal was written by the first software engineer who was hired at Qualiti. The primary intention was to build it quickly so it could be shared internally with stakeholders. It was built using many prebuilt components and tables and was based heavily off of Material Design. This worked well initially, but to place the user first and create a stronger brand, the Portal went through a redesign.
While going through the process of the redesign, it became clear that Qualiti would benefit from a design system. All updated branding was captured in a central location as well as any reusable components and styles. This provided direction, clarity, and efficiency across teams.
Due to this being the first Design System I created, I spent some time researching other Design Systems that are publicly published. I noted elements I appreciated about each, and what I could adapt for our own. Due to my background as a software engineer, I was especially interested in how different companies chose to organize their systems to make it as easy as possible for engineers to use.
After starting with the foundational elements, such as branding, spacing, and colors, I then added components and elements to this library slowly over time while working on the Qualiti Portal redesign. I prioritized creating clean and clear reusable elements in the designs and made sure any changes were made on the master component that lives in the library.
I received feedback that some element variants were missing and could be helpful to include, such as disabled button states and radio buttons. I added those in and established the design standard that disabled buttons would be set to 38% opacity for all text, icons, and backgrounds.
I completed the Eucalyptus Design Library around the same time that I introduced bi-weekly Design Developer Review Meetings. During our first meeting, I presented Eucalyptus and walked through each page and how to use the library. I also took the opportunity to share where all of our design documentation and information architecture could be found.
One of my biggest takeaways from creating this library was organization of elements. After publishing the library and adding it to design files and seeing how the assets are laid out, I realized how important clear naming conventions of each component and variation is to be able to find and use them easily.
I also quickly learned when I made an element that was not responsive. For example, some of my buttons were not automatically resizing with text changes unless they were detached. This helped me learn how to properly use auto layout and ensure that all elements were flexible and responsive.
The Eucalyptus Design Library remains a work in progress. It is constantly being updated and added to as designs progress and are refined. The Engineering and Product teams know that this is a resource that is the source of truth for design specifications and it is added as a library to each design file within the team space.