HTEC Group Reusable Design System

Overview

The objective of this project was to establish a unified design language across HTEC, fostering collaboration among all designers. By doing so, we aimed to enhance efficiency and streamline product development processes beyond individual projects, teams, and departments, promoting consistency and alignment across the organization.

Key Results

• Entrusted with leadership and development of the Reusable Design System to establish a unified design language across HTEC and foster collaboration among designers.

• Established a robust Reusable Design System and laid the groundwork for Design System Standardization across HTEC.

• Designed Figma files with modularity and flexibility for future iterations and expansions.

• Designed as an educational resource and reference guide for junior-level designers.

• Overcame challenges in convincing designers to adopt the system by promoting collaboration and streamlining processes.

• Enhanced the quality and consistency of design work across all levels of designers within the organization.

• Increased efficiency and delivery in product development.

Role

Entrusted with the leadership and development of the Reusable Design System aimed at establishing a unified design language and fostering better collaboration among all HTEC designers.

Tools

Figma
Figjam
Google Analytics
Notion
Adobe After Effects

Contents

WHY

HOW

WHAT

The Challenge

Creating and maintaining a design system is a time-intensive activity which requires a dedicated team. Design systems, unfortunately, are not a one-and-done solution. At their best, they are constantly evolving as teams gather feedback from those who use them.

WHY

Start With Why

In collaboration with our Principal Product Designer, Andrija Stojkovic, we chose to adopt the Golden Circle model, inspired by Simon Sinek's theory of value proposition, to guide our design process.

This approach guided our analysis in three steps:
Why - What is our purpose
How - Outlining our process
What - The Result of Why

What is our purpose?

The primary purpose was to increase efficiency and delivery in product development.

Our system is designed to serve as both an educational resource and a reference guide, specifically tailored for junior-level designers. Written usage guidelines and style guides can help onboard individual contributors who are new to UI design or content creation.

The primary benefit was the ability to replicate designs quickly by using pre-made UI components, interactions, plugins and guidelines. Teams can continue to use the same elements over and over, reducing the need to reinvent the wheel and with that we can stop inconsistency.

Since simple UI elements are created already and are reusable, designers can focus less on tweaking visual appearance and more on solving complex problems (like flow optimization, journey management or
interaction design).

User Sessions and Survey Results

Based on the answers from our research, there are potential hurdles and limitations which prevent a design team from using a design system.

It takes time to create and teach others how to use the design system. Any design system, even if it were adapted from an existing one, needs instructions for use — otherwise there is a risk that it may be applied inconsistently or incorrectly across projects.

HOW

Outlining our process

By applying Aarron Walter’s Hierarchy of User Needs, we meticulously structured our project to prioritize the successful implementation of the Reusable Design System and Design System Standardization.

Pleasurable

Figma emerged as our primary canvas for design exploration.

Usable

Recognizing the importance of sharing knowledge, we provided tutorials. These instructional materials were designed to guide and educate our colleagues, empowering them to embrace and effectively use the design system.

Reliable

To ensure that our design system remained adaptive and aligned with evolving design trends, we implemented a process of monthly updates. Updates were a critical aspect of our project's success keeping the design system reliable.

Functional

The OneDrive repository served as our centralized storage solution, housing all design assets, documentation, and resources. This not only ensured secure data storage but also facilitated easy access and sharing for all team members.

WHAT

The Result of Why

Each element was crafted and documented to ensure consistency, scalability, and ease of use across all design projects within the organization. Additionally, the Figma files were designed with modularity and flexibility in mind, allowing for future iterations and expansions of the Design System.

Multiple Figma Files

Multiple Figma files were dedicated to various aspects of the design system, enabling us to dissect and encapsulate design elements, UI components, and guidelines with precision.

Basic Plan

The Basic Plan was tailored to designers who were looking to establish a foundational understanding of the design system. It provided essential resources, guidelines, and tools tocreate cohesive and consistent designs.

Advanced Plan

For designers seeking a more in-depth experience, the provided a comprehensive suite of resources and insights. It empowered them to delve deeper into the design system, offering a more extensive toolkit and expertise to refine their design skills.

Positive impact and good
engagement

40%

The use of multiple Figma Files fostered a collaborative design environment, leading to more cohesive and consistent design outputs.

30%

A 30% increase in design consistency and a 20% reduction in design iteration time were observed post-implementation.

50%

Contributions and collaboration were evidenced through a 50% rise in external contributions to the Open Source Files.

Reflect

This project was a monumental undertaking that not only established a robust Reusable Design System but also laid the groundwork for Design System Standardization across HTEC.

Convincing other designers to adopt the system proved to be a significant challenge. Presenting the benefits of design tokens and time-saving plugins consumed considerable effort and time. Many designers were accustomed to working independently, a mindset we aimed to shift by promoting collaboration and streamlining processes through our system.

By providing a well-structured framework and comprehensive plans, we were able to ensure that designers of all levels could seamlessly integrate the design system into their workflow, ultimately enhancing the quality and consistency of our design work.

Future Plans

Include in our Design Evaluations

Include in our Competency Frameworks

Create a Developer-Focused Style Guide Website.