Xccelerate Design System

Core Design System

Overview

Xccelerate was founded with the original vision of bridging the tech talent gap in Hong Kong. Through 2021, Xccelerate started to build its products. Besides the main website about full-time Bootcamp and short courses, platforms such as Xccelerate Jobs (The home for tech jobs and talent in Hong Kong) and Xccelerate Live (Break into the hottest topics with small expert-led jams) were built to enable students and companies to acquire the skills and match the job opportunities in 4th Industrial Revolution.


I was tasked with developing and designing a structure with a flexible framework for Xccelerate's design system. The design system aimed to provide a shared resource across different departments, which simplifies design processes, accelerates end-to-end delivery times, establishes a standard for reusable components and font styles, and integrates standard base spacing units, font hierarchy increments, and other elements into the team's workflow.

My Role

I led the design strategy and implementation of the system. I was responsible for how it was going to be used in the upcoming projects and the architecture of the Figma file. My responsibilities included working closely with the design team and development team to establish clear guidelines, collaborating with stakeholders to ensure the system met their needs and expectations, and generating documentation.

Discovery & Strategy

Audit

An audit is always the first step in setting up a system. This process helps to identify common elements among each product. I utilized Miro to capture screenshots and identify similarities by highlighting them.


User Interview

During the process of identifying similarities and conducting an audit, I spoke with key stakeholders from the design, development, marketing, and business development teams to understand their pain points, worries, and goals.


Roadmap

Strategy & Roadmap

Upon completion of the discovery phase of our work, I progressed to developing the strategy and rollout plan for the system. I engaged key stakeholders in developing the strategy to ensure the plan was comprehensive and considered all relevant perspectives. To ensure that the strategy and roadmap were still aligned with the goals and objectives, I regularly reviewed progress every two weeks and made adjustments as needed.


Roadmap

Execution

Architecture

In collaboration with front-end developers and designers, we began constructing the foundation for the system. My documentation of the findings was crucial in determining the mapping and customizing options for the base system. A card sorting was performed to define the grouping of components.


Defining global style guidelines

After organizing the necessary elements, I proceeded to establish the foundation of our design system by creating global style guidelines that applied to all platforms. These guidelines enabled designers to develop new components and expand the design system, while also allowing other users to comprehend the appropriate usage and context of the design system.


When it comes to style guidelines, lengthy and complex documents can be overwhelming and time-consuming to read. Keeping the guidelines simple and concise is crucial for the team to understand and use them effectively. A brief, clear set of guidelines allow for creative freedom while still maintaining consistency.


I began by creating the framework of the guidelines, and then gradually generated the context.


Guideline structure
Cards guideline

Logo System

I started with establishing components for various logo options. Since the logo was utilized in various global regions such as the header, menu, footer, and more, I made sure to include all possible combinations of logo layouts. I also ensured that the logo options were versatile and could adapt to different background colors by providing light and dark versions of the logos, as well as full-color versions.

Logo System

Iconography

A research study discovered that solid icons are generally more recognizable when conveying the same meaning of the original subjects like a phone, thumb, or tools. However, this recognition can be affected by the visibility of characteristic cues.


I reviewed our existing icon set and found that most of them were not action-oriented icons and had abstract meaning. In other words, these icons were not used to draw attention to a call-to-action button. Retaining the current outlined style would not pose an issue. To increase consistency and recognition, small adjustments were made to the current outlined style and new guidelines were added to the iconography guidelines.

Iconography Guideline

Updates are coming...

Voice and tone

Maintaining consistency in the writing helps users comprehend the interface and complete tasks more efficiently. A few basic guidelines for voice and tone include:


  • 1
  • 2
(Screenshot of the voice and tone)

Conclusion

What I have learned from this project?

This project allowed me to take on the role of an educator within my company, providing guidance, tutorials, and review sessions for the team. It was crucial for the company to understand the reasoning behind design decisions and the thought process that supported them.


Simplified design process, improves company-wide acceptance

By breaking down and simplifying the design process, it was able to achieve better acceptance and understanding across the company, while also reducing confusion around which styles and user interface elements were appropriate.


Collaboration is crucial

I collaborated with our product, development, marketing, and business development team to ensure that new components and established guidelines were aligned, and that we had a mutual understanding of expectations.


What next?

We have our design system documentation on Figma, but we are always looking for ways to facilitate the sharing of the design system throughout the company and have an effective system of governance and protocols in place. We have a plan to create a complimentary documentation site and schedule training sessions for new employee on boarding in the future.