Design System
I contributed to the creation of a Design System by playing a key role in establishing a cohesive design language, maintaining design tokens, and developing new components and patterns. By ensuring that the design tokens provided flexibility and consistency across projects, my team was able to adapt to evolving needs and enhance scalability.
Also integrated accessibility considerations, such as better colour contrast, keyboard navigation, and compatibility with assistive devices, to create an inclusive user experience. Throughout this process, close collaboration with the engineering team was crucial to ensure the design decisions aligned with technical constraints, resulting in a seamless and efficient integration of the design system into products.
UI/UX Methodologies
UI Design, Style Guide, Pattern library, UI Inventory, UX Audit, QA of implementation
Duration
March 2024 - Feb 2025
Company
Viral Nation
How can we develop a scalable and flexible design system from the ground up?
🎨 Colours
The colour palette was thoughtfully chosen to reflect the brand’s bold and engaging identity while maintaining a reliable and timeless appeal. When applied across various design elements, it was ensured that the colours consistently met the AAA standards of the Web Content Accessibility Guidelines (WCAG), ensuring high accessibility.
Both light and dark themes were carefully considered to ensure a balanced and inclusive design.
🔡 Typography
A clear typographic hierarchy was established, with font properties designed to improve legibility at various text sizes, ensuring seamless adaptation across different device sizes.
Followed a "rem for fonts and px for padding" approach, where font sizes were defined using the "rem" unit for scalability based on the user's browser settings, while padding was set in "px" to maintain precise spacing control, independent of font size preferences. This approach ensured both flexibility in text and consistency in layout elements.
🥞 Elevations and Shadows
A layering model was implemented for elevations to create a sense of depth, with distinct guidelines for both light and dark theme layering. In the light theme, shadows and borders define each layer, while in the dark theme, each layer is a shade lighter than the one beneath it, maintaining visual hierarchy.
📱 Layouts
The gridless design approach was adopted to create flexible, content-driven layouts that seamlessly adapt to the platform, removing the constraints of rigid grid structures.
It prioritizes accessibility by allowing content to flow naturally, enabling elements like buttons to adjust based on text length rather than being confined to a grid. This results in a more intuitive, adaptable design that considers user preferences and content context while preserving visual balance.
🧠 Developing a Token Structure
In design systems, a token structure defines predefined values for key design properties such as colours, typography, and spacing, ensuring consistency and scalability across the product. Here is a breakdown of the token structure and nomenclature implemented in the design system:
We handled tokens as variables in Figma, primarily focusing on primary and semantic tokens, while creating additional component-specific tokens when required.
🧱 Reusable Components
A comprehensive design kit was developed, featuring a library of symbols, components, and reusable design assets. This kit served as a central resource for the design team, ensuring consistency across projects with standardized elements like buttons, form fields, filters, and pagination.
It streamlined the design process by reducing redundancy and minimizing errors. Moreover, it facilitated smoother collaboration between design, development, and product teams, leading to a more efficient workflow.
📜 Documentation
The documentation included detailed explanations of each component’s use cases, along with examples and guidelines for their application. It also featured annotations and descriptions, as well as information on state change attributes.
🧩 UI Patterns and Recipes
UI patterns were defined by grouping components to create consistent layouts and templates for reuse across the product. This approach ensured cohesive design, improved usability, and accelerated the design process by providing adaptable structures for different use cases.
🕓 Scalable and Evolving
The design system is built to evolve and adapt, allowing it to stay flexible as requirements change over time. As new needs arise, the system is continuously updated to ensure it remains relevant and effective in supporting the product's growth.
Other Works
Content Planner
Brand Reputation Management