07 / Design system
τм Design System.
The problem
Maharishi Foundation's digital products had grown into dozens of separate applications. Students, teachers and administrators in several countries each used something different, and each app carried its own idea of the brand. Buttons, forms and navigation changed from one product to the next. Accessibility gaps appeared in some apps and not others, depending on who had built them.
Design work was being done again and again. A team that needed a new form built one, then another team built a slightly different one. Earlier attempts at shared files had drifted into version chaos, so people stopped trusting them. The foundation needed one language that could scale across countries and still respect the requirements of each education program and region.
How I worked
- 01Auditing the applicationsI began by going through the existing apps with the people who ran them. I collected the repeated pieces, such as forms, tables and navigation, and noted where branding and accessibility differed. The audit gave me an honest list of what already repeated and which differences were real needs, not accidents.
- 02Talking with education programsI met stakeholders across the education programs to understand their requirements. Some differences were regional rules and some were teaching needs. I wrote them down as requirements the system had to carry. Hearing them directly kept me from flattening real differences just to make everything match.
- 03Tokens for themingI built the foundation on design tokens for color, type and spacing. A program or region could take a theme by changing token values, not by copying components. That answered the central tension of the project: one system that could look right for different audiences without splitting into separate codebases.
- 04Building the component libraryI built the components in Figma from the ground up, with accessibility treated as a requirement of each one, not a later review. The library was self-service. Distributed teams could assemble screens that were already compliant, which reduced how often anyone needed to ask the design team for approval.
- 05Automated documentationI set up automated documentation pipelines so designers and developers read the same reference. When a component changed, the documentation changed with it. That removed the version control chaos of earlier efforts, and gave developers a single place to check names, states, tokens and usage.
- 06Reporting to leadershipEach quarter I presented adoption and ROI to executive leadership. I used those sessions to show which teams had moved onto the system and what it had changed for them. The presentations kept the work funded and visible, and they told me where to focus next.
The solution
The result is a Figma design system that serves students, teachers and administrators across Maharishi Foundation's educational network. It has a shared component library, token-based themes for different programs and regions, and documentation that updates itself. A walkthrough video covers how the system is organized and how teams across the foundation use it day to day.
The idea that made it work was keeping the differences in the tokens and the sameness in the components. Programs could look and behave as their requirements demanded, while every product drew from the same parts. Teams could build compliant screens without a designer in every conversation, and the brand stayed recognizable.
What I delivered
- Figma design system built from the ground up
- Token-based themes for programs and regions
- Self-service component library for distributed teams
- Automated documentation pipeline, one source of truth
- Quarterly adoption and ROI presentations
- Walkthrough video of the system
See it working
Value added
For people using it
Students, teachers and administrators met the same patterns in every product, with accessibility built into each component. Moving between apps took less relearning, and fewer screens had gaps for assistive technology.
For the business
The brand became consistent across the global platform, and duplicated design effort dropped. The system is now the foundation for all digital experiences across the worldwide educational network.
For the team
Design-to-development handoff time fell by 60%. Developers and designers worked from one source of truth, and distributed teams could build compliant experiences without constant design oversight from a central group.
The result
Design-to-development handoff time dropped by 60%, and the brand became consistent across the global platform. The system is now the foundation for all digital experiences across Maharishi Foundation's worldwide educational network.
Results
- 60%reduction in the time it takes to hand work from design to development
What I took from it
Reporting adoption every quarter kept the system alive after the first build. On the next system I would set up that reporting in the first month, before there is much to report.
Background
Maharishi Foundation International publishes the Transcendental Meditation app. Its help center describes it as a US public charity with a fully remote team. The team aims to make the TM technique more accessible through modern technology.