One library to rule them all:
The Amdocs Case Study
When you hear "multi-brand," what number comes to mind? For Amdocs, that number is 150 brands per year. How do you create a design infrastructure to cater to the needs of 150 new brands annually? This case study outlines how we achieved this ambitious goal within a three-month timeframe.
Amdocs, a leading software and services provider to communications and media companies, offers innovative solutions and intelligent operations to global brands such as AT&T, Vodafone, and T-Mobile. To serve their customers' design needs quickly and efficiently, Amdocs has a team of approximately 70 experienced UI and UX designers worldwide, supported by a dedicated Design Ops team responsible for design operations and system infrastructure.
We partnered with Amdocs at a crucial point in their transition from several tools used in day to day design processes: Sketch, Axure, Invision, and Zeplin to Figma. This migration required comprehensive training for teams unfamiliar with Figma and the unification and transfer of robust design system documentation.
Our primary challenge though was to create a single, unified library of base components used across all products, each with its specific branding.
Main project goals
- Unite and transfer all UI/UX tools to Figma
- Create 1 library of base components for all brands
- Train and support design teams in switching to Figma in day to day work
- Find and set up a painless solution for theming and multi-brand design components
- Streamline documentation creation and maintenance process
- Create a new Figma infrastructure to be used across all design teams at Amdocs
1. The Foundation
Before the release of Figma variables, options for theming and mode support were limited. Plugins like Themer allowed for color switching between modes, but they had to be linked to specific Figma files and installed by every user. Tokens Studio offered (and still does!) a more flexible solution for theming and scaling design systems, and we were close to adopting it despite some drawbacks in prototype mode. However, just as we were about to commit, Figma announced the beta release of variables. We decided to wait and focus on other foundational tasks like building the component structure and transferring documentation into Figma.
When Figma variables were released, albeit in beta mode, we decided to integrate them, opting for a native solution. Through extensive research, trial and error, we developed a sustainable and feasible solution for our unified base library, making it a robust foundation for our design system. In the process we also communicated with the Figma Product team and validated our suggested architecture with them.
The final solution included creating a variable collection that was split into 2 subgroups of variables:
- Customizable (i.e. changing per each customer)
- Non-customizable (aliasing the variables from the Customizable group) that covers all the system and component tokens.
In order to enable both client themes and light and dark modes switching, the variable modes were used.
The final foundation architecture looked as follows:
- Colors collection (customizable values changing per customer)
- Aliased variables (system and component tokens):
- Modes and client themes management
As a result, with every new client, the Design Ops team had to only create a new mode, name it with the client’s name and mode indication (light/dark) and enter the new raw hex values in the customizable part of the collection (colors such as brand, primary, secondary and so on).
2. Components
While exploring variables and consulting with the Figma Product team, we also focused on creating flexible components. These components needed to be versatile enough to meet any design requirement, despite not knowing the exact content. We implemented a slot approach and straightforward documentation to communicate design decisions that must remain fixed and those that could be modified. There were a handful of components (mostly organisms) designed, for example, with a defined header and footer and a flexible middle slot, allowing for updates without restricting designers.
As a result, the designers could create custom content, make it a local component and then replace
the slot in the base component to create any required layouts and designs without detaching the
components from the system.
3. Training
Training was a crucial part of the transition to Figma. We conducted 16 training sessions with Amdocs design teams in Israel and India, delivering the sessions in two languages. These sessions covered all the essentials to help teams kickstart their work in Figma, ensuring a smooth transition from their previous tools.
The training program was comprehensive and included the following elements:
- Introduction to Figma: We provided an overview of Figma and its features, highlighting the benefits of using a unified design tool.
- Hands-On Workshops: We conducted hands-on workshops where designers could practice using Figma
- Office hours: We held office hours to address any questions or concerns, providing additional support and clarification as needed.
4. Documentation
We created a mini-design system for documentation as well, connecting documentation components in prototype mode. This allowed all documentation consumers to view it both on the canvas and in presentation mode. Additionally, thanks to Figma variables, the documentation itself was made themeable, enhancing its usability and adaptability. The documentation process involved several key steps:
- Standardize Documentation Format: We standardized the format for documentation, ensuring consistency and clarity across all documents.
- Connect Documentation Components: We connected documentation components in prototype mode, making it easy for users to navigate and interact with the documentation.
- Implement Theming: We used Figma variables to implement theming for the documentation, allowing it to be customized to match different brand guidelines.
- Create Templates: We created templates for common documentation types, making it easy for designers to create new documents quickly and efficiently.
5. Processes and infrastructure
To ensure smooth communication of non-obvious solutions and guidelines, we developed file templates with specific layouts and designated areas for all design stakeholders, including designers, product managers, and developers. This structured approach facilitated clearer communication and more efficient collaboration across teams.
Key achievements included:
- Unified Design Environment: Migrating all UI/UX tools to Figma streamlined workflows and enhanced collaboration across global teams.
- Flexible Component Library: Creating a comprehensive library of base components ensured consistency while allowing for brand-specific customizations.
- Effective Training: Conducting extensive training sessions equipped Amdocs' design teams with the skills needed to leverage Figma effectively.
- Dynamic Documentation: Developing a themeable, interactive documentation system improved accessibility and usability.
- Streamlined Processes: Implementing structured templates and communication protocols facilitated efficient collaboration among designers, product managers, and developers.
Conclusion
Our collaboration with Amdocs marked a significant transformation in their design processes, showcasing the power of innovative tools and strategic planning. By transitioning from a fragmented toolkit to a unified Figma-based environment, we established a robust infrastructure capable of supporting the design needs of 150 new brands annually.
These achievements underscore the importance of embracing new technologies and methodologies to enhance operational efficiency and creativity. The integration of Figma variables and the development of flexible components played a pivotal role in enabling Amdocs to scale their design efforts effectively.
Next Case Studies
Anodot
Monitoring that understand business
Peerspot
The Buying Intelligence Platform
