Building an Enterprise Design System
Design system has become a popular topic in the last couple of years. Why is this? People start realizing that design is no longer limited to the digital product in one single solution. From time to time, we created more and more designs in different software landscapes, including desktop, tablet, mobile and more. Large-scale enterprise companies need a consistent visual language and consolidated UX principles across all systems and applications within different teams. The Athlon design team helped a client construct a design system including a component library and visual design principles. The design system allows the client to be seen as a leader in the industry and set the standards internally and externally. It also helps the client’s different partner organizations build products in a consistent look and feel so that the client would improve professionalism and credibility to its customers.
What is a Design System?
A design system is a series of components that can be assembled together to build any number of applications. The component collection usually includes typography, colors, components, icons, grids, guided by clear standards.
Benefits of a Design System
A unified design system is essential to help designers build products better and faster. It provides a cohesive look and feel to users with a clear visual language style, and set the fundamental rules for designers to work with. To summarize, benefits of having a design system include:
- Build any number of applications with the same design language
- No more inconsistencies across design teams
- Speed up the design process for a single product
- Save time on finding visual resources and references
- Establish a strong brand image
Design System Examples
Design Process
To build a design system from the ground up, we started off by brainstorming what small elements there could be to form a single component. Once there are components, we then created modules, sections, and pages, and made them into templates for reuse.
Organizing the Foundations
Our client has set up a series of foundation components for us to start with. These included icons, colors, typefaces, and grid systems. With these components, we roughly mapped out our plan, calculated time to be spent in each phase, agreed on expected formats of deliverables, pictured potential difficulties, and researched into some tricks that could speed up our design creation. For example, we found that applying color masks to icons could allow colors to be changed easily.
Building the Structure
Knowing what components we needed, we threw the ideas in Sketch and made them as symbols for using repeatedly. We wanted to create a design system that is accessible on all three platforms our client had: desktop, mobile, and tablet. So we defined the foundation and explored the rules of how we could extend the design on different device scopes. Besides that, we took a deep dive into the component library and determined what components could be consolidated. We listed a number of categories to organize the components, such as header, search, selection control, slider, navigation, button, text input, and more. Among all components, we selected the most frequently used ones and made them scalable on different device platforms.
Considering Different Use Cases
In the enterprise work environment, there are a variety of use cases that are tailored to specific job tasks. For example, a labor worker is very likely to wear protective gloves while working on site. As designers we have to take all these situations into consideration during our design creation. In this particular use case, the interface touch area for users who wear gloves need to be slightly bigger than it is for regular users. The text size could also be designed bigger. If the users need to work in a darker environment, we could consider adjusting the interface background color to best suite their needs. As designers, we should always put users at the center of our design and fully picture and understand all possible scenarios. We believe this is the key to a successful design.
Defining Naming Conventions
With a large number of components in the design file, it is important to organize everything in a clean and professional manner. Defining naming conventions is necessary before a large-scale component creation. To name the components, we needed to incorporate information including device type, device size, screen orientation, use case, category, title for a single component. In this project, we wanted to make sure that not only the components themselves, but also the naming of the Sketch Artboards and pages is easy to understand.
Tools for Productivity
At the beginning of the project, inconsistent naming formats and duplicated symbols generated by merging design files caused some overtime work. So we discovered some useful Sketch plugins that can speed up the process for a design system project. Three powerful plugins we enjoyed using were ‘Rename it’, ‘Merge Duplicate Symbols’, and ‘Align’.
Click on the links below to download:
Here we created some short animations to demonstrate how you can associate with these plugins.
Challenges
Of course, there were challenges along the process, but we resolved them all with lots of internet researching, discussions and teamwork. Some major problems we encountered include:
- Creating scalable tablet and desktop components proportionally or our best design judgment.
- Naming conventions for thousands of components (pages/artboards/layers/symbols..) under different use cases (precise/gloved)
- Technical issues occurred while working across different Sketch files (copy-paste symbols/file getting slow)
- Repeated icon symbols (Icon in each color is created as an individual symbol, causing the difficulty for users to choose and reuse.)
During the process, the most struggling thing was that some components would fit in the standard rules and patterns defined initially, while others could become quite tricky under different use cases. Our advice is be flexible with all those unpredictable situations and create the design with your best judgement. In a design system project, we see that the work could go into minor details requires designers to be extremely detail oriented. Designers need to be ready to face any challenges and be confident and creative when solving the problems.
Lesson Learned
Building a design system is not an easy goal to reach in a single step. Consolidating the foundations in the beginning is extremely important so that it will not waste your time on changing everything later. After the design system is built, remember to continue testing the work. Keep sharing your learning and your work progress with teammates helps everyone to work better in the future. Identify the risks and always follow the design principles with best practices and be flexible to changes and disagreement. Lastly, include other designers and developers in the loop so that it helps scale down the adaption and validate the assumptions.
Delivering a enterprise design system
After creating and listing all essential components in the Sketch file, we wrote the description of each component to communicate with our audience on how and when they should use them. By having organized and structured documentations, the design file is easy to pass on to the next team for further improvement in the future. At the end of the project cycle, designers are always obligated to explain the design rationales and share the learnings within the organization. We believe that the design system we created would definitely become a key resource for the purpose of bringing consistency across application solutions and to promote best practice and good design to customers in the app development activities.
Many thanks to our Project Manager, Narothnee Jean-Pierre!
Please share this article if you found it interesting!
Author:
Tan Hsiao, Senior UX Designer at Athlon
Monica Gao, UX Designer at Athlon
