Empowering seamless workflows while championing inclusivity for users of all needs drives my passion at MED-EL. As the orchestrator behind our transition to Figma and the architect of our dynamic design system, I'm dedicated to enhancing user experiences across every digital touchpoint.
When I joined MED-EL, it was clear that our workflow based on Adobe XD was outdated and ineffective for cross-team collaboration. With offices around the world and over 2,000 employees, MED-EL needed a cohesive and user-centric design system to ensure consistency and efficiency. Recognizing this, I proposed transitioning our workflow to Figma, a platform better suited for collaborative and scalable design processes.
Once the transition was implemented, I took on the task of designing a comprehensive design system.
The problem
I started by creating a trial design system with the developer responsible for newsletters. This step allowed us to practice our collaboration and identify suitable components for team members with no prior Figma experience. It also helped us understand how to collaborate most effectively with developers.
Since newsletter components in a dynamic system differ from our global design system, this was a relatively straightforward process.
To ensure simplicity and consistency in the newsletter design system, I created a separate color and font library, along with components offering a set of variation options adjustable in properties.
Trial
We conducted several rounds of usability tests with designers and developers to refine the design system.
Necessity of creating main detachable advanced templates, allowing for easy drag-and-drop of assets.
Components offering a set of variation options adjustable in properties.
Centralized curation
As a result, newsletter creation now takes about 15 minutes, ensuring consistent newsletters across all departments and areas.
Key Research Takeaways
Leveraging insights from the trial system, I proceeded to design a comprehensive global design system. This system was crafted to be intuitive and accessible, ensuring seamless use for all team members, regardless of their familiarity with Figma.
Additionally, this initiative gave us an opportunity to review and clean up our code, addressing CSS overrides that had accumulated since 2000s to enhance loading speeds and optimize our performance.
Developing the Global Design System
While creating styles and variables, I discovered that there were no defined colors for dark mode, causing apps to default to the operating system's colors. To address this, we organized a series of meetings and roundtables to develop an accessible dark mode theme.
We established a comprehensive workflow for designing and coding each asset, which includes request, proposal, deve and design review, creating specifications, patterns, and instances, coding, and documentation. This ensures that designers and developers are aligned at every stage of the process.
Our assets are like LEGO blocks, they're interactive and let easily switch between variant variations. Designed to work seamlessly across all breakpoints, they provide a user-friendly experience for everyone involved.
Onboarding
Next on the list was meticulous onboarding. I gathered feedback from other departments and international offices to develop a detailed document designed to help new users get started. This comprehensive guide covers all aspects, from gaining access to teams and dedicated workspaces, to using assets and switching properties, and correctly utilizing variables.
Updates & tranings
Lastly, I initiated weekly practice sessions for designers to gain hands-on experience. We also established regular update meetings with designers, developers, content, and project managers to review the changelog of the design system and discuss any future updates and additions.
Incorporating the design system into our workflow has resulted in an efficient, consistent, and user-friendly experience for both the company and its users, ultimately driving improved productivity, collaboration, and satisfaction.
Streamlined Workflow: By implementing the design system, we significantly streamlined our workflow, reducing the time and effort required for design and development tasks.
Consistency Across Platforms and offices: The design system ensured consistency across all platforms and devices, providing users with a seamless experience regardless of their device or location.
Improved Collaboration: The detailed workflow and onboarding process facilitated better collaboration between designers and developers, leading to more efficient project execution and fewer misunderstandings.
Enhanced Productivity: With access to a comprehensive library of assets and components, designers and developers are now able to work more efficiently, resulting in increased productivity and faster project delivery times.
User Satisfaction: The consistent and intuitive user interface created through the design system improved user satisfaction and usability, leading to higher engagement and retention rates.
Cost Savings: By reducing the time and effort required for design and development, the design system ultimately led to cost savings for the company.
We're excited about the progress we've made so far and are looking forward to making our design system even better as we continue to develop it.