7 Steps to Building A Design System from Scratch

Turning around projects quickly and consistently while improving the UX and customer satisfaction is the North star of many UX designers. One way you can get closer to this goal is to design and build your own design system.

Introducing a design system into your company has many benefits:

• Faster time to market — the planning, design, testing and coding phases of each project becomes streamlined and more efficient.
• Improved customer satisfaction and user experience — creating a unified and predictable experience for your customers leaves the guesswork to new design patterns and frees up their cognitive load to focus on the tasks at hand.
• Tighter internal communication — the standardization of components, documents, colours and animation remove ambiguity from designs and start everyone off on the same foot.
• Fewer iterative issues — leveraging a design system allows you to fix a problem in one place and have it cascade throughout your designs, saving you time spent on fixing the same thing across multiple products.

A universal design system gives companies an edge over those that do not have one. Soon, they will be considered ubiquitous to UX teams. So how can you construct one to leverage these benefits? Let me walk you through the 7 steps of building a design system from scratch.

1. Leverage What You Have

One of the best places you can begin with is to evaluate what you already have. Understand what elements you already work with and what elements you want to update or replace. Look for inconsistencies between products and pages with a goal to create a universal resource library. Everything that might be required to construct a page must be included.

Some examples:

• Colour schemes: Does a brand palette already exist? What are the base and accent colours? Do they meet contrast accessibility requirements? Do you need to create more colours, or do you have too many?
• Photo libraries: Stock photography and custom photography should follow a set of rules to encourage consistency and communicate your brand’s message throughout their use.
• Icon libraries: Icons should reflect the company brand and tie in with the look and feel you are shooting for.
• Graphical elements (Including your logo): Now is the time to make sure you have all the correct colour, size and file type variants of your logo.
• UI patterns: List out all the patterns that currently exist and make sure you know which ones need to be updated.
• Page templates: Make sure you have a couple of basic structural layout options and you know how they might scale up to larger screens and down to smaller screens.

2. Get Buy-in From Stakeholders

You can’t move mountains alone. You are going to need resources from those around you. If you’ve completed step one, you should now have a list of UI inconsistencies and/or improvements that you want to resolve. Selling the benefits of using a UDS to rapidly fix those items will add weight to your proposal. Whether you have identified 5 or 500 errors, ensure you place the efficiency of using a UDS in the spotlight. You could even use the bullet points at the top of this article to get you started. Creating something like this involves a large upfront cost in both time and money but it will pay off in dividends later on.

3. Begin with Color

The palette is a good place to start designing your system. You should have, at the core, one primary brand colour, one secondary brand colour, one accent colour, and a selection of graytones. Write down guides for how to use each colour and if their use has any limitations. Understand what your default text colour should be, what colour should links, action buttons, backgrounds, and so on be. Six character HEX codes are universal; make sure you use them in your documentation.

4. Typography

If you have a style guide to work with, most of the decision making is done for you. If you don’t have one, it’s time to flex your creative muscles. You will want to define small, medium and large font choices for both headings as well as body copy. Begin with medium sizes and use Lorem Ipsum to get a feel of weight and line height. Begin with these core sets and you can expand to create extra-large or extra-small variants at a later stage.

You are now ready to make decisions about headings and subheadings, calls to actions and button texts. Consider paragraph spacing and don’t forget to define bulleted lists. Anything you don’t define will be left to ambiguity which is where inconsistency will tend to creep in, so make sure you don’t overlook the details.

5. Graphical Assets

The best design systems allow designers to simply drag and drop components into new prototype designs which contribute to a faster project workflow. To enable this and flesh out designs with ease, you will need to build out icon libraries, photography resources, illustration libraries and branding images. Ensure you have the correct company logos available and that you are following all the rules for logo usage for each of the variants you make. Include a list of design principles for fellow designers to follow if they wish to create new graphic assets. Define size limitations, colours, and preferred file formats. An asset guide will help to keep your vision on track and give others boundaries to follow.

6. UI Pattern library

Finally, we arrive at the meat of the design system. Create a pattern library of all your common design elements including interactive elements. You might find some overlap between UI patterns and graphic assets, but for the most part, the UI patterns will be more advanced than static visuals. For clarity, UI patterns are design elements that are used consistently for the interface of your site, app, or product. Ensure you include development documentation. This is important for developers to recreate your UI patterns in their code so that there is zero ambiguity during a handoff.

Organize your pattern library into subsections for improved scanning. Categorize by function, such as “navigation,” or by type, such as “menus.”

7. Upload and Document

Lastly, you will need to store your design system in an accessible place. At DP World, we use Figma to design and store all of our UI patterns which makes for fast and easy collaboration between teams. Assets can be grouped together to quickly construct high fidelity prototypes and it gives us a single source of truth to work from. Figma assists with developer conversations by giving hex values, pixel dimensions and CSS code to work with.

Design systems are gathering momentum in the world of digital design, and in my experience, they are a game-changer. At DP World, we leverage our design system to increase our output speed and to make designing solutions a fun and streamlined process. We are able to experiment and try out new ideas with very little cost, and iteration becomes a breeze.

If you are looking to work in an environment that will challenge you to simplify complexity in design, look no further than DP World.

If you like solving complex design challenges and have a knack for creating products from scratch, DP World is on the lookout for smart, hungry, and fun designers to build impactful solutions that make a difference in global trade. Check out our careers section here.

DP World is at the centre stage of the next-generation supply chain evolution. We are developing some of the most innovative supply chain software systems powered by AI, blockchain, cloud, IoT, predictive analysis, among others. More importantly, our technology solutions can genuinely create a global impact with our worldwide footprint and vast scale. Join DP World and make a global impact on the industry with your revolutionary ideas.