Back
Retail Select Access - A dedicated system by Sayata for insurance retail agents
Design System
Creating “Binder” Design System
A lean, scaleable Design System designed for efficiency and growth
In a Nutshell
In the early days of Sayata, we acted like many startups do, and prioritized fast creation and release of features over proper methodical work and laying foundations. However, as the platform grew, it became evident that the rapid pace of feature development had led to a fragmented user experience, characterized by inconsistent UI components and inefficient development cycles with ever bloating development time. The need for a unified, scalable design system became apparent, not just as a tool for aesthetic coherence but as a strategic asset essential for Sayata's next growth phase.
The Company
Sayata is an comprehensive platform for wholesale and retail insurance agents. It tailors solutions for SMBs, simplifying business coverage and streamlining the procurement process. The platform offers tools to navigate complex insurance matters. Its strategy leverages technology to advance the industry.
My Role
Lead Product Designer and Project Manager. I led the development of the design system by a wonderful team, enhancing UI consistency and development speed. Responsibilities included need assessment, strategy formulation, stakeholder collaboration, system architecture design, and feedback loop establishment.
The Cracks Begin to Show
Remember the early days of building apps? You throw features together, iterate quickly, and celebrate each launch. We at Sayata did the same. It was exhilarating, but as our platform grew, the cracks started to show. Here's what we faced:
UI Inconsistency
Buttons looked different from page to page, forms had varying layouts, and colors clashed. Users felt like they were navigating a maze, not a platform.
Developer Headaches
Each new feature meant reinventing the wheel. Developers spent hours recreating basic UI elements, slowing down progress and hindering scalability.
Bloating Development Cycles
With no centralized design language, communication between designers and developers became cumbersome. Features took longer to build, impacting our ability to keep up with market demands.
It was clear we needed a solution, not just for aesthetics, but for efficiency and future growth.
Building Consensus: From Vision to action
Recognizing the potential of a design system, I knew stakeholder buy-in was critical. To build a compelling case, I combined data-driven insights (e.g., increased development time, user inconsistency feedback) with industry best practices (peer consultations) and design workshops with DS experts.
Through ongoing meetings with leadership, collaboration with developers, and amplification of user voices, we created a shared vision and secured the green-light and the resources needed to transform Binder DS from concept to reality, and I was appointed as the Project Manager for this mission. This collaborative approach laid the foundation for its successful implementation.
Building the Foundation: Binder DS Emerges
A Design System is a product that needs to be managed to work properly. Since Sayata didn’t had the resources to manage it full time, we decided on a lean and efficient DS, and proper foundation was the key. I’ve joined a core team with the system architect, frontend lead, and automation head, and together we embarked on a structured planning process.
Our focus:
Scalable architecture:
‍We meticulously designed a system that could effortlessly adapt to future growth, ensuring leanness without compromising flexibility.
Modular components:
‍We prioritized defining reusable components with clear integration points, eliminating redundant efforts and streamlining development.
Streamlined workflows:
‍We established clear communication and collaboration channels between design and development, optimizing workflows for maximum efficiency.
This structured, collaborative approach ensured Binder DS wasn't just lean in its design, but also in its implementation.
We weren't just building a system; we attempted to optimize big parts of our UI development process.
User-Centered at its Core
Instead of relying solely on assumptions, we built Binder DS on a foundation of deep user empathy. Extensive research, encompassing diverse perspectives, provided invaluable insights:
Identifying the Users
We started by understanding the needs and challenges of each key user group: Designers, Product Managers and Developers.
Pain point identification
We pinpointed specific user frustrations and developer bottlenecks within the existing system.
Stakeholder alignment
We ensured the system balances user needs with strategic business objectives, and KPIs were set.
Prioritization based on user needs
User research findings directly informed which components and functionalities to prioritize within the design system.
Industry best practices
Insights from peer companies about successful and failed Design Systems further refined our user-centric approach.
The Power of Atoms: Atomic Design in Action
Forget monolithic UI constructs. Binder DS embraced the atomic design methodology. Picture a Lego set: countless structures built from a core set of bricks. Similarly, we meticulously decomposed UI elements into reusable, modular components, each serving a specific purpose.
This wasn't just about efficiency. While developers rejoiced at no longer reinventing the wheel for basic elements like buttons and forms, the true power lay in flexibility and maintainability:
*
You can effortlessly updating a single "atom" (e.g., a color palette) and seeing the change cascade across your entire platform, instantly achieving design consistency.
*
Developers can seamlessly assembling complex features from pre-built components, focusing on unique functionality instead of repetitive tasks.
Based on that logic, we categorized our components:
*
Atoms: The fundamental building blocks (e.g., buttons, labels, icons).
*
Molecules: Groups of atoms forming basic UI units (e.g., search bars, navigation menus).
*
Organisms: More complex combinations of molecules and atoms (e.g., login forms, product cards). For additional flexibility, some organisms acted as molecules of more complex organisms.
Each component had its own "style guide" specifying behavior, usage guidelines, and accessibility considerations. This organization ensured:
*
Consistency: A unified design language across the entire platform.
*
Scalability: The ability to effortlessly adapt to new features and complex layouts.
*
Maintainability: Simplified updates and bug fixes, saving developers valuable time.
Breaking Down the Text Blocks
instead of pre-built "card-title" fonts, we defined generic styles like "title." This simple but impactful decision had numerous benefits:
*
Streamlined communication: Designers and developers now spoke the same language, fostering smoother collaboration.
*
Effortless updates: Changing a generic font instantly refreshed it across the entire platform, saving time and ensuring consistency.
Colors that Adapt and Flow:
Similarly, our color palette wasn't a rigid set. We established a system of core colors with various tints and shades, enabling:
*
Flexibility: Designers had a rich palette to work with, while maintaining brand consistency.
*
Scalability: Adding new colors in the future wouldn't disrupt the existing system.
*
One-click Refresh: An insurance partner changed its brand color? A single adjustment updated everything in a flash.
Utilizing the Building Blocks
As stated before Binder DS wasn't just about aesthetics; it was about creating a modular foundation for a cohesive user experience. Let's dive into the building blocks that powered its success:
Atoms: The Fundamental Bricks
In atomic design, the simple button isn’t just a component; it’s an atom, available in various states (primary, secondary, outlined) and sizes (small, medium, large). Each button adhered to the same design principles, ensuring consistency across the platform. Hover animations provided subtle feedback, while clear labels guided users effortlessly.
Beyond buttons, other atoms included icons, alias color palettes (i.e. “Button color_main” that uses “teal30”), and alias text styles. Each crafted with thought of scalability, each reusable across the entire system.
Molecules: Combining Atoms for Impact
Now, picture combining these atoms. An input field, formed by the marriage of a text style and a sleek container, became a molecule. Different types existed, each tailored for specific functions like email addresses or dates. Validation rules and error states provided intuitive guidance, ensuring user data accuracy.
Other molecules included search bars, navigation menus, and progress bars. Each built from atoms, yet serving a distinct purpose, all adhering to the same design language.
Organisms: Putting It All Together
Finally, let's build a form. This organism combined molecules like input fields and buttons, structured for clear hierarchy and efficient interaction. Login forms, contact forms, and product filters - all leveraged the modular power of atoms and molecules, ensuring consistency and usability across diverse functionalities.
A Phased Approach to Success
We knew rolling out a massive system overnight was risky. Instead, we opted for a phased implementation:
1
Pilot projects:
‍Selecting key features to test the system, refine processes, and gather early feedback.
2
Training and onboarding:
‍Equipping both design and development teams with the knowledge and tools to use Binder DS effectively.
3
Iterative rollout:
‍Gradually integrating the system into existing projects, incorporating feedback from each phase.
4
Dedicated support:
‍Assigning a point person to ensure smooth adoption and address ongoing needs.
The Impact: Numbers Tell the Story
More than just aesthetics, Binder DS delivered quantifiable results that tell a compelling story. The numbers speak volumes, painting a picture of increased efficiency, enhanced user experience, and accelerated strategic growth.
Let's dive into the data:
*
40% reduction in Frontend development time for features using existing components. That's like freeing up an entire developer for a week every month!
*
23% reduction in frontend development time for features requiring new components. Even building new things became faster and more efficient.
*
Unified user experience: Streamlined interfaces and consistent interactions boosted user satisfaction and brand recognition, and resulted in 12% fewer help center inquiries.
*
Strategic growth: The design system helped with the rapid development of new features aligned with user needs, and enabled creating the RSA system faster than planned.
Lessons Learned: A Journey, Not a Destination
Developing Binder DS wasn't a one-time project; it's an ongoing journey. We continuously:
*
Expand the component library: Keeping pace with Sayata's evolving offerings and user needs.
*
Enhance tool integration: Streamlining workflows and leveraging new technologies.
*
Prioritize global accessibility: Ensuring inclusivity for our diverse user base.
But most importantly, we've learned some valuable lessons:
*
Stakeholder engagement is crucial: Secure buy-in from leadership and end-users at every step.
*
Flexibility is fundamental: Adapt to new technologies, user needs, and business goals as they emerge.
*
Feedback loops are vital: Continuously gather and incorporate feedback to ensure the system stays relevant and effective.
Thank you!
Thank you for your attention to our Design System journey 🫡
Back to all case studies