Orchid: Design System Refresh
TL;DR: The ORCHID Design System project involves a design system refresh initiative at Keela, addressing inconsistencies in design and improving scalability. The problem solved was streamlining design variations and enhancing the product's appeal to mid-market non-profits. The Design Team, full stack and QA developers, the customer care team, and leadership were involved in the coming of this project.
Outcome
With the acquisition complete, the company now has the resources and opportunity to unify the experiences of the three products into a cohesive cloud platform. A key initiative in this transition is establishing a unified ARK Design System, ensuring consistency, scalability, and efficiency across the ecosystem.
Keela’s Orchid Design System has served as a foundational reference, offering insights into structuring a system that balances usability with flexibility. However, merging the existing design systems presents significant challenges, including differences in technology stacks (React vs. Vue) and inconsistencies in component structure, interaction patterns, and accessibility standards across the three platforms.
As the Design System Lead for this initiative, I lead the effort to bridge these gaps, working closely with a dedicated cross-functional team. My role involves strategic planning, stakeholder alignment, and hands-on implementation to ensure the new system is technically sound and enhances developer efficiency and design coherence across products. Additionally, I am facilitating collaboration between design and engineering teams across all business units to establish best practices, maintain system integrity, and drive the adoption of the unified framework.
This initiative is a significant step toward scaling ARK’s design capabilities, streamlining development processes, and creating a unified and consistent user experience across the platform.
Process
📝 Internal Survey/Research
Throughout the preparation for the presentation, I identified a lot of unused knowledge from departments across the company. This led to curated internal surveys to collect relevant information for the Redesign/Design System initiative. With the collected responses, the presentation above was able to share with leadership how the Design System refresh would resolve many of the recurring issues arising across departments and sparked conversations between teams to share internal knowledge with the Product team.
💡 Project Progress
This initiative was launched in response to feedback highlighting inconsistencies in our design from customers and developers pointing out issues with unique variants and scalability. My responsibility involves revising our existing system to address these challenges, manage design variations, and enhance our product's appeal to mid-markets (non-profits).
By adopting Storybook as our Source of Truth and integrating Chromatic, we enable the Design Team to engage with a workflow linked to GitHub. We hold bi-weekly meetings with stakeholders to ensure alignment with our overarching goals and product direction. With the sharing of our acquisition news in May, the team is diligently working on developing our UI library focused on enhancing the workflow, communication, systems thinking between designers and developers, and collaboration across 3 products.
🔬 The Past, Present, and the Future
The designs on Figma were inconsistent as many elements were not reusable, with messy layering and decimal values. Since most of the screens were not utilizing the Components/Instances feature on Figma, designers were required to put in large amounts of manual work to update old designs and/or quick fixes.
Audits, Reorg, building on Chromatic & Storybook
Figma Prototype: Prototype with a list of available components vs. what needs to be worked on. This prototype was shared across the company to prepare for upcoming release notes, knowledge base articles, and marketing materials.
With a successful Design System refresh, we enable quicker development time, squash inconsistencies in the product, offer customizability to our customers, and a strong value proposition to our targeted upper markets.
