Boosting Design Efficiency for Farmers Insurance
Design System Creation for BIE
Business Insurance Express (BIE) is a web-based app used by Farmers Insurance Agents, Underwriters and Service Operators that facilitates insurance quoting and policy managing for commercial businesses.
Overview
I initiated and pioneered my product team's first design system, beginning the transition from a manual, disjointed design processes to an efficient and collaborative UX ecosystem.
Problem
Significant inefficiencies within the design process, including ad-hoc component creation and reliance on copy-paste, created time-consuming workarounds and created a fragmented user experience. A lack of centralized documentation and inconsistent engineering practices led teams to rely on email notes for guidance.
Team
Product Design team
Multiple Engineering Teams
External Design System Designer
Relevant Cross-teams
Goals & Outcomes
Achieved: More consistent vision between development teams.
Achieved: Increased team efficiency, streamlined communication and reduced volume of unnecessary messages.
Exceeded: Created new processes for critique and future updates, ensuring future consistency.
Exceeded: Unified presentation materials across different products.
Audit & Preparations
Our product consistently faced visual and technical inconsistencies. Many of our engineers struggled to properly implement elements throughout the product without the proper governance. Two key areas where these challenges were particularly evident were the use of off-brand colors and the implementation of banner notifications, which required more custom coding.
I discovered an outdated and poorly-adopted design system that was malfunctioning and had been abandoned for a number of reasons, such as its inability to cascade components efficiently.
I gathered our teams to take audit of this system, and catalogued all of our existing components; taking note of how they were used in our product and ordering them by how out of sync they were vs. how critical they were to repair.
I reached out to a Design Systems Designer from the Farmers Insurance Personal Lines team, who was managing an effective design system for her product. She helped me harmonize our design approach with the Farmers brand.
Structuring
Our team was new to the concept of working design systems, so I made a point to educate my team on the benefits of our design system, ensuring that everyone understood its value and importance for our collective success.
Our Figma file was open to all, and I helped everyone get comfortable with navigating the file.
I provided documentation for each component, and encouraged engineers and designers to test components in a 'sandbox' section within our file.
Numerous components required complete redesign, which allowed me to establish some much-needed design standards for the first time.
I created the first customized color palette for our product, which incorporated official company colors to strengthen alignment with our brand identity and overall visual cohesion with other products.
I was able to decide which components to create as variants and which properties to group by using data from my audit.
Buttons and inputs were frequently used and subjected to case-by-case customization, so I prioritized the careful selection of their variants and properties.
Operations
I implemented regular design system critiques, documenting the discussions and actively seeking feedback from engineering teams. This centralized feedback process allowed me to make more informed design decisions and better prioritize improvements.
I leveraged Figma branches to establish guidelines for merging new components into the system.
I also fostered a shared understanding of our design system across channels with documentation that covered in-depth usage guidelines and constraints for various components, as well as other relevant information.
Conclusion
Developing a design system for the first time was a challenging yet rewarding experience. I helped strengthen the professional appearance of our internal brand, and also fostered a sense of unity between our teams.
Although I received some guidance, most of my research and planning was self-directed and pushed me outside my comfort zone.
Additionally, our collaboration with the Personal Lines team led to the adoption of consistent presentation materials across products, including coordinated cover designs for our Figma files company-wide.
While I encountered setbacks and learned valuable lessons along the way, the overall process proved to be immensely gratifying. I learned that a successful design system includes a shared vision between design and engineering; is scalable, efficient and accessible; has clear rules, guidelines and documentation that extends past the components themselves; and is constantly being improved. I'm grateful for the lessons I learned and am eager to apply this knowledge in future projects.
