How to Cre­ate and Adopt Design Sys­tems for Hyper–Scaling Com­pan­ies: A 6–Step Approach (by People Exper­i­ence Team)

Design sys­tems are a crit­ical com­pon­ent of any company’s design pro­cess, but they become even more import­ant as a com­pany scales. At synvert, we sup­port hyper-scal­ing com­pan­ies in par­tic­u­lar need to be able to cre­ate and adopt a design sys­tem that can keep up with the fast pace of their growth.

In this art­icle, we’ll explore the chal­lenges of cre­at­ing and adopt­ing a design sys­tem in a rap­idly expand­ing com­pany, and offer some tips for over­com­ing them.

The chal­lenges of cre­at­ing a design system

The biggest chal­lenges of cre­at­ing a design sys­tem are based on the sheer scale of the task. With a rap­idly grow­ing user base and an ever-expand­ing product, it can be dif­fi­cult to keep track of all the dif­fer­ent design ele­ments that need to be included in the sys­tem. Addi­tion­ally, hyper-scal­ing com­pan­ies often have a large num­ber of stake­hold­ers, each with their own design needs and require­ments, mak­ing it dif­fi­cult to ensure that the design sys­tem meets everyone’s needs.

Another com­mon chal­lenge is the need to be able to iter­ate quickly. These com­pan­ies are often oper­at­ing in fast-mov­ing mar­kets and need to be able to respond quickly to changes in user needs and mar­ket trends. This means that the design sys­tem needs to be able to evolve quickly and should be designed with flex­ib­il­ity in mind from the start.

So, how can a hyper-scal­ing com­pany over­come these chal­lenges and cre­ate a design sys­tem that works for them?

Step 1: Estab­lish a ded­ic­ated team

Start small and scale up. Rather than try­ing to cre­ate a com­plete design sys­tem team that cov­ers everything from the begin­ning, it can be more effect­ive to apply an agile approach, start­ing with a smal­ler, more man­age­able team and then adding to it as needed. This allows the com­pany to under­stand what works and what doesn’t before invest­ing a lot of resources into a lar­ger sys­tem. Some import­ant con­sid­er­a­tions to keep in mind:

• Com­pos­i­tion: The team should be com­posed of a diverse group of indi­vidu­als with dif­fer­ent skill sets and per­spect­ives. This could include design­ers, developers, product man­agers, and other stakeholders.
• Respons­ib­il­it­ies: Have a clear under­stand­ing of the team’s respons­ib­il­it­ies when it comes to the design sys­tem. Some examples of these would be cre­at­ing and updat­ing the design sys­tem, driv­ing adop­tion across the organ­iz­a­tion, and provid­ing train­ing and resources to help other teams imple­ment it.
• Col­lab­or­a­tion: Abil­ity to col­lab­or­ate effect­ively with other teams and stake­hold­ers. Work­ing with product man­agers to under­stand the needs of the busi­ness, or work­ing with developers to ensure the design sys­tem is tech­nic­ally feasible.

It’s import­ant to remem­ber that this is just one pos­sible example of how such a team could be struc­tured and that the spe­cific com­pos­i­tion and respons­ib­il­it­ies will vary depend­ing on your organ­iz­a­tion’s needs.

Step 2: Define the scope

The second step in cre­at­ing and adopt­ing a design sys­tem is to define the scope of the design sys­tem. You can do that by:

• Identi­fy­ing key areas of the product: It’s import­ant to identify the key areas of the product that need con­sist­ency, such as nav­ig­a­tion, forms, but­tons, etc. This will help to ensure that these areas have a con­sist­ent look and feel across the product.
• Identi­fy­ing areas that need flex­ib­il­ity: Not all areas of the product will require the same level of con­sist­ency. It’s import­ant to identify areas that need flex­ib­il­ity, such as the con­tent area. These areas may require dif­fer­ent design solu­tions depend­ing on the context.
• Cre­at­ing a design sys­tem map: To help define the scope, it can be use­ful to cre­ate a design sys­tem map. This is a visual rep­res­ent­a­tion of the dif­fer­ent com­pon­ents and pat­terns that make up the design sys­tem. It can be used to identify areas of the product that need con­sist­ency and areas that need flexibility.

Step 3: Gather exist­ing design elements

The next step is to gather exist­ing design ele­ments and pat­terns that are cur­rently in use across the organ­iz­a­tion. This step can be done through a design audit that will help to identify areas of incon­sist­ency and inform the devel­op­ment of the design system.

A design audit is a thor­ough review of the exist­ing design ele­ments and pat­terns used across the organization.

• Involve dif­fer­ent teams and stake­hold­ers: Hyper-scal­ing com­pan­ies often have a large num­ber of stake­hold­ers, and it’s import­ant to ensure that everyone’s needs are taken into account when cre­at­ing the design sys­tem. Their insights and feed­back can be valu­able in identi­fy­ing areas of incon­sist­ency and poten­tial pain points.
• Identify areas of incon­sist­ency: The design audit should identify incon­sist­en­cies in the exist­ing design ele­ments and pat­terns, such as typo­graphy, col­our palettes, or UI components.
• Doc­u­ment find­ings: The find­ings of the design audit should be doc­u­mented and shared with the ded­ic­ated team and other stake­hold­ers. This can be done through a design audit report or presentation.

The design audit report includes a sum­mary of the find­ings, a list of pain points and incon­sist­en­cies iden­ti­fied, and recom­mend­a­tions for address­ing them. The report also includes examples of the exist­ing design ele­ments and pat­terns, high­light­ing the areas of inconsistency.

This audit is an ongo­ing pro­cess, and it should be con­duc­ted peri­od­ic­ally to ensure that the design sys­tem is up-to-date and aligned with the organ­iz­a­tion’s needs. The find­ings of the design audit can be used to inform the devel­op­ment of the design sys­tem and ensure that it addresses the iden­ti­fied pain points and inconsistencies.

Step 4: Cre­ate a com­mon language

The fourth step in cre­at­ing and adopt­ing a design sys­tem is to cre­ate a com­mon lan­guage that can be used across the organ­iz­a­tion to ensure con­sist­ency in design.

Guidelines should be developed to cover all aspects of the design sys­tem, such as typo­graphy, col­our palettes, and UI com­pon­ents. These guidelines should be clear, con­cise, and easy to under­stand. Make sure that all design­ers and engin­eers are aware of these guidelines and under­stand why cer­tain cus­tom designs are not allowed. This can help to pre­vent mis­un­der­stand­ings and reduce the num­ber of requests for cus­tom designs.

• Provide examples: It’s import­ant to provide examples of how the guidelines and shared vocab­u­lary should be applied in prac­tice. This can be done through design pat­terns, wire­frames, or mockups.
• Make it access­ible: The guidelines and shared vocab­u­lary should be eas­ily access­ible to all stake­hold­ers. This can be done through a cent­ral­ized doc­u­ment­a­tion web­site like Notion and Zer­o­Height, or even with Story­book. The web­site must be eas­ily access­ible to all stake­hold­ers and serves as a cent­ral source of inform­a­tion for the design system.

It’s import­ant to note that the doc­u­ment­a­tion should be reg­u­larly reviewed and updated to ensure they remain rel­ev­ant and effective.

Step 5: Iter­ate and evolve

This involves con­stantly review­ing and updat­ing the design sys­tem to ensure it stays rel­ev­ant and effective.

• Estab­lish clear pri­or­it­ies: Make sure that the design sys­tem team is aware of the most crit­ical com­pon­ents that need to be integ­rated into the design sys­tem. This can help to ensure that the team is focus­ing on the most import­ant tasks, and can pre­vent the cre­ation of addi­tional cus­tom components.
• Encour­age con­tri­bu­tions: Most of the time, the design sys­tem team will not handle the demand for needed com­pon­ents and con­sumers will likely start duplic­at­ing them. This can be avoided by cre­at­ing a cul­ture of col­lab­or­a­tion. By work­ing together on the design sys­tem, stake­hold­ers will be more likely to share ideas and con­trib­ute their own. This can be achieved by cre­at­ing ded­ic­ated chan­nels for dis­cus­sion and feed­back, hold­ing reg­u­lar design sys­tem meet­ings and work­shops, and encour­aging team mem­bers to pair up when work­ing on it. Main­tain­ing this cul­ture helps build trust and col­lab­or­a­tion among teams and stake­hold­ers and ensures that the design sys­tem is meet­ing the com­pany’s needs.
• Keep it up to date: Keep the design sys­tem up to date with the latest design trends and tech­no­lo­gies. This may require updat­ing the design system’s guidelines, pat­terns, and components.
• Test and val­id­ate changes: Before imple­ment­ing changes to the design sys­tem, test and val­id­ate them to ensure they are effect­ive and user-friendly. This can be done through user research, usab­il­ity test­ing, or A/B testing.
• Com­mu­nic­ate changes: Hand­ling the issue of engin­eers’ lack of know­ledge about the exist­ing com­pon­ents in the design sys­tem requires a com­bin­a­tion of edu­ca­tion and aware­ness-rais­ing efforts. Changes to the design sys­tem should be com­mu­nic­ated to its rel­ev­ant stake­hold­ers. This can be done through change logs or release notes, list­ing new com­pon­ents, updates to exist­ing com­pon­ents, and bug fixes.
• Mon­itor usage: Mon­itor the usage of the lib­rary and track which con­sumers are using the latest ver­sion. This can help identify areas where updates are not being imple­men­ted and allow for tar­geted edu­ca­tion and out­reach efforts to help ensure that con­sumers are up to date.

Step 6: Meas­ure success

The final step is to meas­ure the suc­cess of the design sys­tem and use this inform­a­tion to identify areas for improve­ment and make adjust­ments as needed. This step is cru­cial in ensur­ing that the design sys­tem is meet­ing the needs of the organ­iz­a­tion and deliv­er­ing the desired results.

Sev­eral met­rics can be used to meas­ure the suc­cess of a design sys­tem, such as:

• The time it takes for a product to go from devel­op­ment to launch.
• How sat­is­fied users are with the product.
• Con­sist­ency of the design across the product.
• Pro­ductiv­ity of design­ers and developers.
• Col­lab­or­a­tion and com­mu­nic­a­tion among teams and stakeholders.

Some of these quant­it­at­ive met­rics can be cal­cu­lated using scrap­ing scripts through the design system’s con­sumer repos­it­or­ies, by tak­ing peri­odic screen­shots of the applic­a­tion, or by using any ana­lyt­ics tool. But oth­ers have a more qual­it­at­ive aspect and must be obtained through feed­back forms and time indicators.

Con­clu­sion

Cre­at­ing and adopt­ing a design sys­tem in a hyper-scal­ing com­pany is a chal­len­ging task, but by start­ing small, involving all stake­hold­ers, and estab­lish­ing clear guidelines and pro­cesses for using the sys­tem, it is pos­sible to cre­ate a sys­tem that works for the com­pany and enables it to con­tinue to scale and grow.

By invest­ing in a design sys­tem, organ­iz­a­tions can really speed up developer pro­ductiv­ity while ensur­ing con­sist­ency across the product. This is our blue­print for suc­cess from pre­vi­ous exper­i­ence work­ing with large-scale cus­tom­ers who needed to stream­line and stand­ard­ize their end-user experience.

We hope this art­icle helps to shed some light on this topic and makes it easier for oth­ers going through this process.