{"id":306,"date":"2026-10-05T21:59:44","date_gmt":"2026-10-05T21:59:44","guid":{"rendered":"https:\/\/wildesignagency.com\/?page_id=306"},"modified":"2026-10-07T10:27:44","modified_gmt":"2026-10-07T10:27:44","slug":"comprehensive-design-system","status":"publish","type":"page","link":"https:\/\/wildesignagency.com\/index.php\/comprehensive-design-system\/","title":{"rendered":"One System, One Language"},"content":{"rendered":"\n
\n
\n

Intro<\/p>\n<\/div>\n\n\n\n

\n

Time<\/p>\n<\/div>\n\n\n\n

\n

Role<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

Design system<\/p>\n<\/div>\n\n\n\n

\n

6 months, 2023<\/p>\n<\/div>\n\n\n\n

\n

Lead UX\/UI designer<\/p>\n<\/div>\n<\/div>\n\n\n\n

<\/div><\/span>
\n
<\/div>\n<\/div><\/div>\n\n\n\n
\n
\n
\n

Initial problems<\/p>\n<\/div>\n\n\n\n

\n

As the product evolved, issues in the engineer-led design and the underlying codebase became increasingly apparent. Beyond growing maintenance challenges, inconsistent components, colours, and visual patterns across interfaces made it harder for users to scan, navigate, and find the right information.<\/p>\n<\/div>\n<\/div>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n
\n
\n
\n
\"\"<\/figure>\n\n\n\n
\n

Hierarchy<\/strong><\/p>\n\n\n\n

We started by defining the hierarchy of information across the product. This helped establish clear relationships between content, using spacing, typography, and visual weight to guide users through different levels of information.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n
<\/div>\n\n\n\n

Taxonomy<\/strong><\/p>\n\n\n\n

We then defined a consistent taxonomy for content and UI elements. By establishing clear naming and usage rules, we reduced ambiguity and created a more predictable experience across different interfaces.<\/p>\n<\/div>\n\n\n\n

\"\"<\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n
\n
\n
\n

Aligning tokens & logic<\/h2>\n\n\n\n

To better bridge design and development, I contributed to simplifying the codebase and creating custom attributes that developers could quickly apply and reuse. This reduced development time and shortened the PR review process for designers, ultimately improving both efficiency and the quality of the final product.<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\n

Design\u2013Development documentations<\/h2>\n<\/div>\n\n\n\n
\n

To better align design and development, I led the team in structuring a comprehensive component library covering components, variants, methods, event handling, and usage examples. <\/p>\n\n\n\n

Built with MkDocs for Material, the custom documentation also consolidated information from four development repositories into a single source of truth, significantly reducing the time developers spent searching across repositories.<\/p>\n<\/div>\n<\/div>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n<\/div>\n\n\n\n
<\/div>\n","protected":false},"excerpt":{"rendered":"

Intro Time Role Design system 6 months, 2023 Lead UX\/UI designer Initial problems As the product evolved, issues in the engineer-led design and the underlying codebase became increasingly apparent. Beyond growing maintenance challenges, inconsistent components, colours, and visual patterns across interfaces made it harder for users to scan, navigate, and find the right information. Hierarchy […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-306","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wildesignagency.com\/index.php\/wp-json\/wp\/v2\/pages\/306","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wildesignagency.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wildesignagency.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wildesignagency.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wildesignagency.com\/index.php\/wp-json\/wp\/v2\/comments?post=306"}],"version-history":[{"count":15,"href":"https:\/\/wildesignagency.com\/index.php\/wp-json\/wp\/v2\/pages\/306\/revisions"}],"predecessor-version":[{"id":359,"href":"https:\/\/wildesignagency.com\/index.php\/wp-json\/wp\/v2\/pages\/306\/revisions\/359"}],"wp:attachment":[{"href":"https:\/\/wildesignagency.com\/index.php\/wp-json\/wp\/v2\/media?parent=306"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}