Built a comprehensive and scalable design system that supports Study Hall's mission of providing a personalized and effective approach to college education. The Study Hall Design System is a robust and versatile system, comprising of over 900 interactive components leveraging the latest features of nested instances, properties and variants.
4 months (Fall 2023)
When I joined Edplus (Study Hall), the team was at a crucial stage of transitioning from Adobe XD to Figma. Recognizing the potential of Figma as a powerful design tool, Jack (Principal Product Manager) took a leap of faith in me and my abilities and made the decision to switch. I was tasked with creating the Study Hall Design System while my other teammates were still getting acquainted with Figma. During this transition period, the team continued to use Adobe XD for ongoing projects, while my goal was to have the beta version of the Study Hall Design System ready by the time the entire team was ready to fully embrace Figma.
The core challenge revolved around the lack of a centralized design language. Every project phase often involved recreating components from scratch, leading to:
1. Duplicated Efforts
2. Inconsistent Visual Identity
3. Poor File Management
4. Difficulty in Collaboration
5. Time Consuming
6. Brand Dilution
7. Increased Maintenance Overhead
My first plan of action was to deeply understand the company's values, design philosophy, and target audience. Working as a solo designer meant I had a limited amount of time to spend developing the design system alongside other rapid UX work. The design system had to scale fast, as I was discovering new use cases and constantly rethinking and expanding the library, so I had to approach this challenge strategically. Recognizing the diversity of user groups at Study Hall, I focused on understanding the unique needs of designers, developers, and end users. By collaborating closely with these stakeholders, I ensured that the design system catered to their respective requirements. This comprehensive research phase also involved studying existing design systems, such as Atlassian, Polaris, Carbon, and Ant, to gain inspiration and insights into best practices.
Atomic design is a process that consists of five separate steps that work together to build coherent, hierarchical, and thoughtful interface design systems.
The following are the five stages of atomic design:
1. Atoms
2. Molecules
3. Organisms
4. Templates
5. Pages
Informed by the user research findings, collaborative workshops were conducted with both design and development teams. These workshops fostered an environment for brainstorming and ideating solutions that addressed the following key considerations:
Typography and color choices serve as the foundational building blocks for all design components; they are the fundamental atoms of the design system. These elements not only establish the visual aesthetics of a product but also convey the brand's identity and overall style. In our approach, we leveraged cutting-edge variable properties for typography and color management
Surprisingly, one of the most challenging components turned out to be the button, with the icon taking most of the blame. Our requirements included the need to change the size and color of the icon while ensuring it remained consistent in size and color during other states, such as hover and pressed.
The product incorporated tooltips in various instances to provide additional information. These tooltips needed to display arrows on different sides and not just at the center of those sides but also at various positions. To address this challenge without having to create 50 different variants.
The culmination of all molecule components, such as buttons and inputs, helped us in the development of modals and other intricate components. We designed various modal variations, including full-page, centered small, centered large, bottom, and side modals. To handle the dynamic content within the modals, we utilized slots.
As part of our focus on accessibility, we followed the Web Content Accessibility Guidelines (WCAG) to ensure our design system met established standards for digital accessibility.
The process of building the Study Hall Design System was an incredible learning experience. While I had previously utilized components in my design work, developing an entire design system at this scale took my understanding to new heights. Witnessing the power of master components, where changes made to a single component propagated across thousands of screens, was truly awe-inspiring. Beyond design skills and mastering Figma, this endeavor taught me the importance of discipline, patience, and consistency in creating a successful design system.
The implementation of a design system not only boosted the speed and efficiency of design execution but also significantly accelerated the development process. With the advent of features like Dev Mode in Figma and other tools aimed at enhancing the designer-developer handoff experience, implementing a design system will become easier than ever whether your team is using React, Swift, Flutter, or Angular.
While startups building minimum viable products (MVPs) may initially overlook the need for a massive design system, I firmly believe that every company that has achieved product-market fit and is generating revenue should invest in a design system. Despite the significant investment of effort and time required in the beginning, the long-term benefits are undeniable. A design system ensures consistency across all products, reduces execution time, improves the efficiency of designers and developers, and ultimately leads to the development of more products and features, resulting in increased revenue.