Building UI Components and Managing a UI Library at a Start Up Company

Intro

At the early stages of product development, everything is about speed. UI might not be the most prioritized thing. But after the product has reached a certain scale, not having a well-managed UI library will slow down future product design processes. Below is a step-by-step of what I learned about building components and managing a UI library.

Objectives

Design a UI library that can

1. be used effortlessly by the design team

2. be updated effortlessly by the design team

3. integrate seamlessly with the engineering team’s development process

Solutions

1. Software usage unification

When I arrived at the company, previous designers had used different design softwares to create UI components, leading to an inconsistent and messy UI library. After doing research, I chose Sketch Library as the platform for our company’s UI library management software due to the fact that it has multiple open source plugins and it is popular within the design industry.

2. Synchronization of the engineering and product teams’ UI libraries

Our engineers update the code of UI components in the engineering team UI library regularly. When there is a new project, designers will also visit this library to see if there are any UI components they can use. But when designers want to use corresponding components in Sketch format for prototyping, they can’t find the components in the inconsistent and messy product team UI library. This results in the designer having to build a new one in Sketch every time. To solve this problem, I decided to rebuild components in the engineering team UI library into corresponding ones in Sketch format based on usage frequency. Each rebuilt component in the new product team Sketch UI library was named accurately, so designers could find the ones they needed through file name search.

3. Introducing Atomic Design

Atomic Design has been used by our engineering team for many years, and I wanted to bring this design theory into the product team’s work flow. In order to systematically manage the Sketch UI library, I specifically utilized Sketch Nested Symbols (based on Atomic Design) when building each Sketch UI component. This ensures that the UI visual language is consistent, and when the UI components need to be updated, we can systematically update all components in the Sketch UI library.

4. Make sure all the UI components have enough states

When designing product, designers must consider user experience in different UI states. In order to provide designers with UI components with a range of states, I first write a list of important and most frequently used states. When using Sketch to build each UI component, I also build the UI component in the various states on my list. It is important to use Sketch Nested Symbols in this process, so that all the UI visual language is consistent and future visual language updates are convenient.

5. Sketch UI library release notes and UI Wiki-page

I created Sketch UI library release notes on Google Sheets, so that my colleagues can easily access and download the newest library. The release notes include the newest release date, a list of updated items, and links to the newest and past versions of the library. Once I finish the newest release of a Sketch UI library, I share the link to the release notes with my colleagues via Slack. If anyone wants to use a previous version of the Sketch UI library or wants to know what items have been updated, they can access the release notes. This cuts down on a lot of unnecessary communication.

Additionally, as I gain experience in the creation and management of our Sketch UI library, I’ve accumulated tips and advice I hope to share with others. This is why I created a “Wiki-page” using Dropbox Paper. The Wiki-page records 1) why our team chose to use a Sketch UI library, 2) notes on how to use each UI component, 3) software variable settings, 4) plugin recommendations, and more. When my colleagues have questions about UI or if new designers are unfamiliar with the Sketch UI library, they can often find the answers to their questions on the Wiki-page. This page has been a timesaver for me.

6. Setting up the SOP for Sketch UI library updates and management

Even the most well-organized Sketch UI library can fall prey to chaos without a standard operating procedure (SOP) for management. Below is my Sketch UI library management SOP.

1. Regularly meet with the product and engineering team to ascertain if there is a need to update, alter, or add new UI components.

2. Input all requests into the UI component backlog and start working on the most important ones first.

3. Test UI component changes to make sure they fulfill internal or user needs.

4. Update the Sketch UI library release notes and Wiki-page, then share the latest links via Slack.

5. Regularly do research on new UI component building and management methods and consider ways to improve.

7. Miscellaneous

Make sure the Sketch Symbols are built well from the very start. Well built Sketch Symbols might take more time to build, but putting in extra effort from the start will save a lot of time in the future when using and managing the symbols. It is a good idea to use the following features in Sketch when building Symbols: 1) Resizing, 2) Overrides, 3) Symbol Masters, and 4) Smart Layout + Minimum Width.

Conclusion

The point behind UI component building and management is to continuously help the design team increase work efficiency. The 8 points above are a summary of what I have learned in the past year. I hope this article has been helpful to you, and if you have any feedback or would like to chat, feel free to contact me or leave a comment below.