The Challenge

The KingHost Design System project presented several significant challenges:

1. Starting from Scratch: The Design System had to be built entirely from the ground up. KingHost only had a basic color palette and brand guidelines, which meant defining a complete design language and creating foundational components from the beginning.

2. Lack of Accessibility: There were no existing accessibility standards in place. This required us to establish comprehensive guidelines for color contrast, screen reader compatibility, and overall inclusivity to ensure the system was accessible to all users.

3. No Documentation: Without prior documentation, we needed to create detailed resources to guide designers and developers on how to use the Design System effectively. This included usage instructions, component behaviors, and integration methods.

4. Absence of Voice and Tone Guidelines: KingHost lacked a consistent way to communicate with their clients. Establishing a clear voice and tone became a crucial part of the process to align the Design System with the company’s brand identity and messaging.

Addressing these challenges required close collaboration with stakeholders, rigorous research, and iterative design to ensure the system was comprehensive, scalable, and user-friendly.

Goals

The goal of the KingHost Design System project was to create a robust, scalable, and cohesive system that could serve as the foundation for all of KingHost's digital products. KingHost aimed to have a complete Design System ready within a 10-month timeframe.

As part of the team, my primary responsibility was the development and maintenance of components, ensuring they adhered to the brand's guidelines and provided flexibility for developers. I also collaborated on other crucial areas, including token creation, documentation, and accessibility standards. The ultimate objective was to streamline design and development processes, establish consistency across platforms, and enhance the user experience for KingHost’s customers.

Development

Color Tokens

Creating the color palette was one of the foundational steps in developing the KingHost Design System. We designed a comprehensive palette of 92 colors, divided into 10 categories such as primary, secondary, neutrals, status indicators (success, error, warning), and gradients.

To ensure accessibility, we ran over 100 tests to check contrast ratios across all platforms and ensure compliance with WCAG standards. This process was critical to making the system inclusive and functional for all users, regardless of their needs or devices.

One major challenge we faced was adapting KingHost's original colors, as many did not meet accessibility standards. To address this, we conducted accessibility workshops with the team to explain the importance of inclusive design. These workshops helped stakeholders understand the need for adjustments, aligning everyone on the goal of creating a more user-friendly and accessible product.

Typography

Typography played a vital role in creating a cohesive and accessible design system. We developed over 30 text styles using two distinct font families, carefully selected to balance readability and brand identity.

To ensure accessibility, we conducted more than 50 tests to verify that font sizes, line heights, and spacing worked seamlessly across various platforms and devices. These tests helped us ensure that text remained legible for all users, regardless of screen size or resolution.

This meticulous approach to typography guaranteed consistency while making the system adaptable to diverse user needs and devices, reinforcing KingHost's commitment to accessibility and usability.

Components

Creating the components was one of the most critical aspects of the KingHost Design System. We built a library of over 50 reusable components, tailored to meet the platform’s specific needs while maintaining flexibility for future scalability. These components included buttons, input fields, modals, tables, dropdowns, and more. Additionally, we developed 250 unique variants of these components to handle various use cases, ensuring maximum adaptability.

Each component was designed with consistency and accessibility in mind. We ensured that all components adhered to WCAG guidelines, focusing on proper color contrast, keyboard navigation, and screen reader compatibility. This was particularly important for interactive elements like buttons and forms, where clarity and usability were paramount.

To support implementation, we documented every component thoroughly. This documentation included over 150 detailed specifications, complete with usage guidelines, code snippets, and examples of behavior in different contexts. Collaboration with developers was key, ensuring the components were not only visually consistent but also easy to integrate.

The resulting component library became the backbone of the KingHost platform, enabling faster development cycles, consistent design across products, and a significantly enhanced user experience.

Documentation

Principles

The design principles are the cornerstone of the KingHost Design System, guiding every decision we made throughout its creation. These principles reflect KingHost's core values of excellence, affordability, and innovation, ensuring that the platform consistently delivers value to its users.

Our principles emphasize:

• Inclusivity: Ensuring that all users, regardless of ability or background, can interact with the platform seamlessly.

• Intuitiveness: Designing experiences that are easy to navigate and understand without a steep learning curve.

• Aesthetic Precision: Maintaining a clean, modern, and visually cohesive design that reflects the professionalism of KingHost's brand.

Language Guide

The Language Guide is more than just a set of rules—it’s a bridge that connects KingHost with its users. It embodies the principles of inclusivity, clarity, and engagement, ensuring that every interaction resonates with diverse audiences.

• Inclusivity: Our language reflects cultural diversity and respects the backgrounds of all users, avoiding jargon or terminology that could alienate or confuse.

• Clarity: Messages are designed to be straightforward and easy to understand, eliminating ambiguity and ensuring users can quickly grasp the information or action required.

• Engagement: We aim to communicate in a friendly and approachable tone, fostering trust and encouraging positive interactions with the platform.

These guidelines were crafted to enhance communication across all touchpoints, making the Design System not only accessible but also welcoming and relatable. With this approach, we ensure that every message creates a meaningful and effective connection with the user.

Atomic Design

Atomic Design is a methodology that emphasizes breaking down a design into its most fundamental components, allowing for the creation of a scalable, modular, and flexible system. This approach is crucial for building a Design System like KingHost’s because it enables consistency, efficiency, and adaptability across all platforms and devices.

In the context of the KingHost Design System, we used Atomic Design to structure the system in five distinct levels:

• Atoms: The smallest building blocks, such as colors, typography, and individual UI elements (buttons, input fields, icons).

• Molecules: Groups of atoms combined to form functional elements, like form fields or cards.

• Organisms: More complex components made up of molecules, such as navigation bars or product listings.

• Templates: Layouts that define the structure and arrangement of components on a page, ensuring consistency across the platform.

• Pages: Fully designed and populated templates, demonstrating how components work together in the final interface.

This methodology allowed us to create a cohesive and scalable system where components could be reused, combined, and adapted without starting from scratch each time. It ensured that updates to one part of the system would be reflected across the entire platform, maintaining visual and functional consistency. Atomic Design also made it easier to collaborate across teams, as the system’s modularity provided clarity and structure for both designers and developers.

Tools

To efficiently design and implement the KingHost Design System, we utilized a set of powerful tools that facilitated collaboration, design, and documentation:

• Figma: The primary tool for designing components, interfaces, and prototyping, allowing real-time collaboration among the team and seamless handoff to developers.

• Miro: Used for brainstorming, user journey mapping, and ideation, helping us visualize ideas and align on strategies.

• Office 365: Utilized for documentation, communication, and project management, ensuring smooth workflows and efficient tracking of progress.

• Discord: Served as our communication hub, enabling instant messaging, quick team discussions, and updates.

• JSON Files: Used for storing and sharing design tokens and component specifications, ensuring easy access and integration across platforms.

These tools allowed the team to work collaboratively, maintain consistency, and stay organized throughout the project, from ideation to final implementation.

*This is just a brief overview of the project. If you’d like to dive deeper into the details or discuss my work further, I’d be happy to schedule a chat. Feel free to reach out!