Case StudyEcosystem Team: Enabling Teams - Streamlining Development with Design Principles
Brainly, the world's largest online learning community, faced significant challenges in maintaining consistency and efficiency across its design and development teams. Despite the company's relatively small size, it served over 250 million users in 35 countries, leading to tensions and inefficiencies in product development. Discrepancies between the designers' UI kits and the developers' style guides created a "ping-pong" effect during the handoff process, causing frustration and delays. The lack of a shared language and unified design system resulted in increased design and technical debt, inconsistent product quality, and misaligned branding efforts. To address these issues, Brainly needed a cohesive and collaborative approach to streamline its design and development processes.
The Solution
Brainly embarked on developing a comprehensive design system, focusing on several strategic steps:
- Initial Inquiry and Workshops: Conducted an inquiry among design and front-end teams to identify key issues. Workshops facilitated open discussions, allowing team members to prioritize problems and pinpoint the lack of shared libraries and logical structure as the main issue.
- Creating a Unified Design System: Developed a design system that integrated both product and marketing elements. Emphasized the creation of shared libraries and guides to ensure consistency across all teams, including non-designers involved in marketing tasks.
- Securing Buy-In: Addressed skepticism about the design system by highlighting its benefits in improving product quality, consistent branding, and reducing design and technical debt. Secured cautious support from the business by demonstrating the system's potential for cost savings and efficiency gains.
- Developing Tools and Processes: Leveraged internal expertise to create innovative tools like HTML-Sketchapp, which allowed for seamless integration of design and development workflows. This tool exported HTML code to Sketch, enabling both teams to work from the same components and maintain consistency.
- Establishing Design Principles: Developed and implemented design principles using the PENCIL mnemonic, which guided the design team's work and provided a framework for structured feedback during design critique meetings.
- Refactoring and Continuous Improvement: Implemented a process for refactoring elements in the design system based on A/B testing results. Ensured continuous updates and synchronization between design and front-end libraries to maintain alignment.
- Team Structure and Collaboration: Organized the design and development teams into contributors and users of the design system. Emphasized cross-functional collaboration within product teams and adopted the "2 in the Box" model, where interaction designers and product designers worked together on the same features, each contributing different perspectives.
Outcomes achieved
The unified design system at Brainly led to significant improvements in collaboration, efficiency, and product quality:
- Enhanced Collaboration: The shared language and integrated tools facilitated smoother collaboration between designers and developers, reducing the "ping-pong" effect and ensuring that final products matched the prototypes.
- Consistency and Quality: The design system ensured consistent branding and design across all products and marketing materials, leading to a more cohesive user experience and stronger brand identity.
- Efficiency Gains: By reducing design and technical debt, the design system streamlined the development process, saving time and resources. The HTML-Sketchapp tool, in particular, allowed for quick and consistent design implementations.
- Increased Buy-In and Visibility: The successful implementation of the design system garnered support from across the company and the broader design and development communities. Recognition from media outlets and industry leaders, such as Smashing Magazine and Microsoft, validated Brainly's approach and boosted internal morale.
- Scalable Processes: The structured approach to adding new components and continuously updating the design system ensured that Brainly could scale its operations without losing efficiency or quality.
- Innovative Tools and Methods: The development of additional tools, such as SVG Animates, and the focus on creating a design system for motion, showcased Brainly's commitment to innovation and excellence in design and development.
