Role
Senior Product Designer
Company
Ieso Health
Keywords
Documentation, Design Ops, Design System, Visual Systems, Digital Assets
Sector
Healthcare, Mental Health, B2C
Implementing a Design System across Ieso’s services and products
Ieso Health provides typed therapy services for mental health patients through a web app where both patients and therapists can access online sessions. The platform also facilitates patient triage, various assessments, and appointment booking.
In September, Ieso launched a native mobile app for iOS and Android, offering a six-week program developed by therapists and delivered via AI for individuals diagnosed with anxiety disorders. Behind the scenes, two separate back-office systems are in the process of merging. Alongside these products, brand and marketing messaging need to remain consistent across multiple formats, including web platforms.
With all these moving parts, the need for a cohesive design system became a high priority. I was responsible for implementing this system to ensure a unified and consistent brand experience across Ieso’s services and cross-functional teams.
Establishing Structure and Organization
Working at a fast pace, my first Design Ops task was to establish a structured, scalable approach to file organization. The goal was to create a shared understanding of how design assets would be managed moving forward.
As shown in the image above, I structured the library with a Foundations file, which serves as the backbone of the design system. This file contains essential UI elements that all products link to, including colors, typography, logo assets, icons, and buttons. I also leveraged Figma’s color token variables to support both light and dark modes effectively.
Handling Illustrations and Imagery
Typically, imagery would be part of the Foundations file. However, given Ieso’s extensive library of illustrations, variations, and photography, I created a dedicated file for these assets.
Illustrations are categorized by themes such as ‘Activities,’ ‘Communication,’ and ‘People’ or aligned with specific clinical sections of Ieso’s six-week program. Our illustration style includes flexible blob shapes that can be repositioned as needed. To maintain consistency while allowing creative freedom, I ensured that these blobs and illustrations remained separate, enabling designers to build custom compositions while staying within the brand’s visual identity.
Creating a Flexible yet Cohesive Workflow
To facilitate collaboration and iteration, I established two key working file types:
- Sandbox Files: A space for exploration—messy, as it should be—where designers can freely experiment with wireframes, user flows, UI solutions, and rapid prototypes for testing.
- Release Files: When designs are finalized and ready for implementation, they move into the Release files, ensuring consistency before handoff to the engineering team.
- Front-End QA Files: To bridge the gap between design and development, these files support collaboration with engineers, ensuring smooth implementation.
Impact
By implementing this design system, Ieso now has a structured, scalable, and flexible approach to managing design across its products and services. This system ensures brand consistency, enhances collaboration, and supports innovation, all while adapting to the evolving needs of the business.