Design Team UI Kit
Year:
2022
Duration:
2 months
Role:
Product Designer
Project Overview
Objective
To create a UI kit that will ensure consistency between the UI components of two entities: Hubble (internal knowledge base) and d@t (external website).
Team
The team for this project included Product Designers Meredith House, Janelle Leung, and myself; DesignOps Manager Keven Lupien; Design Engineers Kay Evans-Stocks and Karen Evans; and Director of Product Design and UX Brigitte Kovacs.
Background
In the summer of 2022, I had the opportunity to contribute to the creation of a UI kit that would be used for two entities: Hubble, an internal knowledge base, and d@t (Design at Tucows), an external website for the Tucows design team. The goal of this initiative was to keep all of the UI elements consistent and organized throughout the two projects. I was very interested in working on this project because it was my first time creating a UI kit.
Why was a UI kit needed?
Before I started working at Tucows, the general look and feel of the Hubble and d@t brand was already developed by the team. This included elements such as the font, colours, buttons, and illustrations. However, there was still a need to refine these elements and assemble them in one place. There were also additional UI elements that still needed to be created for the kit.
Process
Learning about UI kits
To learn more about UI kits before diving in, Meredith House, Janelle Leung, and I met with Keven Lupien, DesignOps Manager at Tucows. Keven provided us with a UI kit template he created in Figma that was extremely helpful. He also taught us some tips and tricks for creating and publishing components with Figma. Keven’s guidance throughout this project was crucial for success.
Assembling components
To begin the process, we gathered the UI elements in our Figma files for Hubble and d@t and transferred them into our new UI kit file. Our kit included colour pallets with contrast ratios, typography guidelines, and layout grids.
It also included many components such as buttons, forms, filters, dividers, drop-downs, illustrations, spacers, and more.
Additionally, the UI kit housed unique section designs for the different pages of Hubble and d@t (Design at Tucows).
Considering accessibility
Accessibility was an important consideration while creating the UI kit. We didn’t want the UI elements to only look nice; they also had to function well and be accessible! We paid attention to contrast ratios when selecting colours for the brand and elements. We also made sure that clickable elements had distinct hover and selected states.
Simplifying illustrations
To match our brand and the other UI components, it was necessary to simplify the illustrations in the UI kit. The original illustrations that were purchased contained many gradients and colours. We decided to reduce the amount of colours that the illustrations used and remove unnecessary details.
Since the original pack contained over 150 illustrations, it was unrealistic to adjust each and everyone, so we decided on approximately 30 illustrations to move forward with. I experimented with various treatments for the illustrations before settling on one the team liked. I then went through and eliminated extra nodes and minor details from each of the illustrations.
I created three versions of each illustration for different background colours: white, black, and purple.
Overcoming migration challenges
Migrating all of the components into the kit was a time-consuming and challenging task. We had to be careful not to disrupt any file-connections and publish our changes regularly. In a few cases, we were forced to create a new component because we were unable to migrate an existing component. This posed a challenge because we had to manually insert the new components into each design file, which was tedious. Despite this issue, we were ultimately able to create a well-built UI kit that has been integrated into our designs for both Hubble and d@t.
Maintaining the kit
As our designs for Hubble and d@t evolved, so did the UI kit. We consistently updated the UI kit over several months as new sections and elements were needed.
Key takeaways
The following are some of my key takeaways from this initiative:
Creating a UI kit is not a one-off process. A UI kit needs to be updated regularly and evolve as requirements change.
Making a UI kit involves a lot of people with different skills and expertise.
Working as a team and getting feedback from others is extremely important in order to create an effective UI kit.Think before you act. It is essential to carefully consider the effects of making adjustments to UI kits because they are frequently linked to numerous other files and designs.
Conclusion
Working on the UI kit for Hubble and d@t has been a very valuable experience. I was able to learn more about the importance and creation of UI kits and improve my skills with Figma. I am thankful to have gotten to work with such an incredible group of people on one of my first projects as a Product Design Intern at Tucows.
