Design System
Building a Design System
Essential Studio Manager (ESM) is a web-based application that offers studio management tools for freelancers and entrepreneurs. The product was acquired by the company I worked for, leading to a rebranding initiative. As a UX designer on the project, my primary objective was to establish a design system that would deliver a consistent and seamless user experience throughout the application. Additionally, we aimed to enhance efficiency and scalability, ensuring the design system could accommodate future design iterations and advancements.
Prior to an update, Essential Studio Manager (ESM) faced a significant challenge as it lacked a comprehensive design system that could unify the brand. The product suffered from fragmentation, inconsistency, and outdated elements. Furthermore, the absence of proper documentation led to inconsistencies and misinterpretations. As a result, the product, brand, and engineering teams lacked a shared foundation for processes, design language, guidelines, and UI pattern libraries. This situation caused inefficiencies and inconsistencies within the product.
To build a robust design system for ESM, I implemented a strategic approach that prioritized the establishment of foundational elements (atoms) before progressing to more complex blocks and components (molecules, organisms, templates, and pages). During this phase, I undertook the following activities:
Research and Inspiration:
Performed comprehensive research on various interfaces, thoroughly examining their information architecture. The gathered insights served as a foundation for analyzing real-world instances and use cases, enabling the generation of innovative solutions that effectively align with the users' objectives.
Branding Integration:
Fostered close collaboration with the marketing design team to seamlessly integrate the new branding guidelines into the ESM project. Through constant communication and joint efforts, successfully implemented the updated brand identity within the design system, ensuring a consistent and cohesive visual language that reinforces the brand's overall image.
Created components from scratch in Figma:
To establish a robust and dependable foundation for our design system, we opted to utilize Tailwind as our base CSS framework. By leveraging Tailwind, we ensured a solid and consistent starting point that provided a wide range of powerful styling capabilities.
Accessibility Consideration:
Designed each component with accessibility in mind, striving to adhere to the WCAG AA accessibility standards.
Paid attention to factors such as color contrast, keyboard navigation, and appropriate semantic markup to ensure inclusivity and usability for all users.
Recognizing the significance of high-quality component documentation in facilitating an efficient design library, our primary goal was to develop comprehensive documentation that would empower the teams to make consistent decisions swiftly and effectively. With meticulous attention to detail, we created a well-organized, coherent, and user-friendly documentation system that covered every aspect of our design system.
