Atoms, molecules, and organisms

I started with a visual audit of all existing products, style guides, and processes to better understand our existing patterns. Following Atomic Design methodology, I built a foundation of colors, typography, spacing, and icons in Sketch since that is the tool our team primarily used.

Building a components library

Referencing what we learned from our visual audit, I used our atoms to build our mobile UI components such as buttons, navigation, list items, inputs, forms, cards, progress indicators, and modals. Each component accounted for every type, state, and white-labeled brand with supporting documentation and standards based on our previous usability testing. Facilitating a card sorting with our product designers helped us explore the best way to group and organize these components.

Managing updates collaboratively

As product designers, engineers, product owners and managers continued to use the design system, we learned how to better optimize the components and documentation to fit our needs. To further nurture this collaboration and mature our design system, I scheduled a reoccurring meeting to review all updates, listen to feedback, and discuss requests.

As our design system matured, more product designers grew interested in learning how they could contribute towards its growth. I hosted lunch and learns and provided mentorship so that they could begin to lead areas of the design system that complimented their interests or skillset.

Bridging the design system with our codebase

After collaborating with engineers, we decided that Storybook would be the right tool for us to host our library of design components, documentation, and live interactive components with code snippets. Engineers across all product teams were already familiar with using Storybook, so it could easily be hosted internally and accessed as our single source of truth across all product teams.

Continued growth globally across Assurant

This design system has increased our design consistency and scalability across all of Assurant Labs. It has defined a common language between all product teams and provided more opportunities to focus our efforts in other areas and drive for innovation.

Recently, we have decided to pivot away from using Storybook and align with Assurant’s new global design system hosted on a custom internal site. This also includes transitioning our design library from Sketch to Figma, since that will be our primary tool moving forward. It is exciting to see this Design System continue to expand across global Assurant and be adopted by product teams outside of Assurant Labs.