I led the design of a collaborative design-dev framework and it’s multi-brand Design System.
Context
At Bosonit, amidst a broader initiative to streamline project execution and enhance product delivery, the company recognized a crucial need to optimize the collaboration between UI/UX designers and front-end developers.
Goals
The primary goals of the Prisma project were set to address key challenges mainly faced by designers and developers involved in the product development lifecycle at Bosonit:
- For designers
Reduce the time spent on accommodating technical constraints and creating new components at least by 30% within three months post-launch, in order to enhance design efficiency and elevate the user experience across digital products.
- For developers
Decrease the time required for visual refinements and component creation at least by 50% within three months post-launch, thereby streamlining development processes and improving agility and time-to-market.
- For all team members
Establish a transparent method for accessing and leveraging insights from previous projects. This was intended to promote improved collaboration, ensure consistency in project execution, and reduce misunderstandings across teams, fostering a more integrated and efficient work environment.
My Role
As the leader of this initiative, I spearheaded a team comprising researchers, designers, and developers, totaling seven core members. My responsibilities included:
- Leadership and vision: Charting the course for the project, presenting the vision to stakeholders to secure buy-in, and navigating the team through the project’s lifecycle to ensure alignment with strategic goals.
- Research and development: Conducting comprehensive research to identify bottlenecks and areas for improvement, followed by designing and testing solutions iteratively to meet the identified needs.
- Workshop facilitation: Organizing and leading design thinking workshops that involved a broader spectrum of stakeholders, including project managers and product owners, to foster a collaborative environment and gather diverse insights.
- Advocacy: Championing the needs of our primary users—designers and front-end developers at Bosonit—ensuring that their voices were heard and that solutions addressed their most pressing challenges.
Outcomes
The process
1. Discovery
Research goals
Our research aimed to dive deep into the collaboration dynamics between front-end developers and UX/UI designers at Bosonit.
- – Understand the end-to-end collaborative process between front-end developers and UX/UI designers.
- – Identify key pain points associated with using external design systems or UI libraries.
- – Assess the reusability of code and designs across projects.
- – Pinpoint tasks that disproportionately consume time and the underlying reasons.
To ensure a comprehensive range of perspectives, we conducted a screening process and selected a diverse group of team members. This selection took into account various factors such as demographics, seniority, experience with design systems, type of project, and departmental roles. We ensured diversity in race, gender, age, and disability to capture a broad spectrum of experiences and insights.
Through structured interviews, we explored the daily workflows, inter-team communication, and tool effectiveness.
Observational research was conducted over two weeks, where researchers shadowed agile teams at various project stages to understand natural workflows and communication patterns.
Research findings
Findings from interviews:
Findings from observational research:
The problem
In our collaborative work environment, front-end developers and UX designers encounter recurring obstacles that hinder efficiency, collaboration, and the quality of deliverables.
These challenges include the creation of redundant UI components, discrepancies between visually similar components’s functionalities, tensions arising from perceived trivial design changes, a lack of transparency regarding past projects, insufficient senior expertise, excessive time spent on pixel-perfect UIs, frustration stemming from deviating from design specifications due to technical/time constraints, pressure from the technical complexity of designs, mutual feelings of undervaluation, and concerns regarding the overall quality of deliverables.
Addressing these challenges is paramount to fostering a more harmonious and productive collaboration between both teams, ultimately leading to the delivery of higher-quality products and a more positive work environment.
2. Design
During the design phase we prioritized extensive stakeholder involvement, encompassing designers, developers, project managers, and product owners.
We recognized the value of collective insights and organized a series of design thinking workshops aimed at addressing key challenges identified in the discovery phase, such as component redundancy, functionality consistency, and historical data accessibility.
- Activity-based ideation: We employed a range of design thinking workshops. These activities included brainstorming sessions, role-playing scenarios, and rapid prototyping to explore new ideas. This approach was not just about generating insights; it was also strategically designed to involve key stakeholders deeply in the process. By making them an integral part of these collaborative activities, we aimed to secure their buy-in and ensure they felt genuinely connected to the solution.
- Outcome of standardization activities: From a session focused on creating a standardized UI component library, we developed a blueprint for a library that could be dynamically scaled and adapted across different projects without sacrificing design integrity or developmental agility.
- Functional consistency workshops: Through targeted discussions and prototyping, we tackled the challenge of ensuring consistent functionality across visually similar UI components. These workshops produced a set of functional specifications and component behaviors that are consistent across all implementations.
- Historical data accessibility sessions: Recognizing the value of leveraging past project insights, we conducted sessions dedicated to enhancing the accessibility and usability of historical data.
From these ideation sessions, numerous ideas were generated, focusing on enhancing workflow efficiency and promoting user engagement.
3. The solution
Prisma is a design-development framework centered around a multi-brand, tokenized Design System, connected via API. Prisma aims to standardize and streamline creative and technical processes across different brands, sectors, and projects at Bosonit.
Methodology
Cross-product collaboration methodology
Design System
DS based on design tokens and bidirectionally synchronized libraries through API
Repository
Project repository for consultation
Methodology
As a consultancy firm, Bosonit faces the challenge of managing numerous projects simultaneously, each with different requirements and stakeholders. This model helps to address these challenges by facilitating smooth communication and efficiency throughout the product development process.
Prisma’s cross-product collaboration model is designed to simplify and organize creative and technical processes across various brands, sectors, and projects.
The model incorporates inputs from a wide range of stakeholders and maintains a continuous cycle of understanding, defining, designing, and evaluating. This process, supported by the Prisma Design System, ensures a better collaboration and a better approach to product development, helping to standardize processes across different brands, sectors, and projects.
The model is divided into two main sections: Requirements and Collaboration.
Requirements involve gathering input from different sources within the company. These sources include:
- General insights from Bosonit workers.
- Contributions from business and IT stakeholders.
- Feedback from final users of the product.
- Ideas from the designers and developers creating the products.
The demands gathered at the previous phase are analyzed and prioritized based on their importance and feasibility. Cross-functional working groups, typically composed of front-end and UX teams, collaborate to develop conceptual solutions. These solutions are then turned into components that fit into the multi-brand design system. After development, components undergo rigorous evaluation to ensure they meet the necessary standards and requirements. Successful components and design patterns are documented for future reference and use.
Design System
Design tokens are key elements in maintaining visual consistency. We use predefined variables for colors, sizes and other elements throughout our system. This ensures that when a change is made to a design token, it is automatically reflected in all components and interface elements, not only in Figma, but also in the front-end, as we use Figma’s REST API to sync the variables.
When both a designer’s mock-ups and an engineer’s implementation refer to the same token named primary backgorund color, it ensures that the same color will be consistently used in both design and development. This consistency is maintained even if the color value assigned to the token is updated, ensuring that design and engineering remain aligned.
Styles refer to the visual elements of a user interface that create its unique look and feel. These can be tailored by adjusting the Prisma theme.
With dynamic color, typography, border properties and spacing a product can automatically create and apply styles to each UI element. This offers:
- – A personalized user interface
- – Enhanced accessible contrast
- – User-controlled contrast
One of the most difficult challenges we faced was regarding color. We had to ensure the AA WCAG accessibility level without sacrificing too much design freedom. To tackle this, we developed a primary palette consisting of five color tokens primary, secondary, dark neutral, and light neutral. Each brand provides its own primary color. The secondary color is derived from the primary color by reducing its opacity by 90% and then making it solid. The neutral gray colors, gray-800 and gray-100, are consistently taken from the extended palette we provide, although there is flexibility from the designer to change the extended palette color hue following to a set of guidelines we provide.
To address the potential accessibility issues with brand colors, we developed a step-by-step tutorial to generate accessible color palettes while maintaining brand identity.
Once tokens and styles were set up, we started building the components following the atomic design methodology. This approach helped us to create a scalable and consistent design system by breaking down the user interface into its fundamental building blocks.
From the simplest components we built the most complex ones:
Repository and documentation
As Prisma is an ongoing project, we are currently working on building the repository of patterns and previous projects.
4. And then… what?
After developing the Prisma methodology and design system, the next critical step was to ensure its successful adoption by designers and developers within the company. This required a structured approach to onboarding, support, and community engagement to embed the framework into the daily workflows and culture of the teams.
Onboarding Strategy
To facilitate the smooth onboarding of designers and developers, we implemented several initiatives:
- Onboarding event
Hosted a company-wide event to officially launch Prisma. This event included presentations from key stakeholders, live demonstrations of the system, and a Q&A session to address any initial questions. The event served as a platform to generate excitement and buy-in from the team members.
- Comprehensive training program
Created step-by-step guides and video tutorials that walked through the key features and usage scenarios of Prisma.
- Dedicated Slack channel
Established a Slack channel specifically for Prisma to provide ongoing support and facilitate communication among users. This channel allowed any Bosonit worker to ask questions, share feedback, and showcase their work using Prisma. It became a vital hub for community interaction and support.
- Support and feedback mechanisms
Created a ticketing system within Slack where users could report issues or request features.
Regularly monitored the channel to provide timely assistance and gather feedback for continuous improvement.
- Open backlog
Implemented an open backlog system where everyone in the company could see what the Prisma team was working on.
This transparency helped keep everyone informed about ongoing and upcoming tasks, fostering a culture of openness and collaboration.
Community engagement and continuous improvement
To sustain engagement and foster a sense of community around the Prisma framework, we initiated several recurring events and activities:
Design systems monthly catchup
- Hosted an informal monthly catchup session on Teams. Each session included a “show and tell” segment from the Design System team and contributors, followed by group discussions.These meetings provided an opportunity for team members to stay updated on new developments, share their experiences, and discuss challenges and solutions collaboratively.
Workshops
- Organized regular workshops to gather ideas and feedback on ongoing work. These sessions were particularly valuable for ensuring that the framework remained aligned with the needs of the teams and to foster collaboration.
Prisma’s collaboration awards
- Introduced the colaboration awards to recognize and reward individuals and teams who made significant contributions to improving Prisma. Winners were celebrated during the monthly catchup sessions and received both recognition and tangible rewards.
4. Learnings
After successfully completing the adoption phase, Prisma is becoming an integral part of Bosonit’s project development lifecycle. We are now in an advanced phase where multiple teams are adopting the system, allowing us to track their use of the framework through key performance indicators (KPIs). By continuously gathering feedback and making adjustments, we ensure that Prisma remains effective and aligned with the teams’ needs.
- Adaptability over perfection
While our initial focus was on creating a perfect system, we learned that adaptability is more critical. The ability to evolve and integrate feedback quickly is paramount to maintaining a relevant and useful framework. - Stakeholder involvement
We discovered that continuous stakeholder involvement, beyond the initial buy-in, is essential. Regular check-ins and workshops help keep the system aligned with user needs and foster a sense of ownership among the teams. - Balancing standardization with flexibility
Striking the right balance between standardization and flexibility was more challenging than anticipated. Too much rigidity stifles creativity, while too much flexibility leads to inconsistencies. Our ongoing adjustments aim to find this balance. - Real-world testing
Practical, real-world testing revealed issues that theoretical planning did not. By putting the design system into practice early and iterating based on real designers and developers experiences, we were able to make more impactful improvements.
Prisma has significantly improved collaboration between designers and developers at Bosonit, leading to enhanced efficiency and product quality. As we continue to refine and perfect the framework, we remain committed to its ongoing development.