Fintech • Design System
Consistency with Design System and UX Playbook
ROLE
TOOLS
Figma, Miro, Zoom, JIRA
YEAR
2022
Project Overview
Assurant is a fintech company that offers insurance, service contracts, and risk management. Their cross-platform digital products offer various services, including online claims filing, policy management, and product registration.
Projects I got to work on
I had the chance to work on UX playbook, design system and lend my help on the PGM (Pocket Geek Mobile) app. I’m honored to lead and be a part of of such big projects that impacted the entire design organizations and significantly increase the design efficacy and effectiveness.
Design System
I owned the design system update project from auditing, iteration to delivery.
Scroll down to view my process
UX Playbook
I researched, interviewed and developed the UX playbook from scratch.
Contact to view the UX playbook
Results
01/ Updated the company’s design system, including fixing outdated elements, adding new components, removing duplicate components and completing foundations page.
02/ Created the UX playbook from scratch. It's been used by the UX team, CRO (research) and leadership.
03/ The design system and UX playbook covers all aspects in the design and research process in Assurant. They guide the design and research teams and contribute to shaping the company strategies.
What I learned
During my time at Assurant, I tackled intriguing problems that tested and honed multiple skills. The skills I improved the most was cross-team collaboration and communication. I worked closely with PMs, designers, and engineers, and also interfaced with the leadership.
This experience broadened my ability to navigate diverse perspectives, ensuring that all voices were heard and integrated into the design process. It taught me the importance of clear, consistent communication and the value of fostering strong working relationships across various departments.
01
Documentation and Communication
Clear documentation ensured continuity and helped the team understand the design decisions, while regular communication prevented misunderstandings and facilitated smoother collaboration.
02
Understanding the Business Context and Constraints
Designing with business objectives in mind ensured that my solutions were not only user-friendly but also aligned with the company's strategic goals.
03
Getting Buy-ins
Securing buy-in for design ideas was often challenging. I learned how to present and defend my designs, emphasizing the value they bring to the user and the business.
04
Building Relationships
Building relationships with the team and mentors was invaluable. These connections provided support and diverse perspectives, enhancing my learning and development.
See my design system project process
Audit of PGM Components
Device Help
Learn how to solve all of your device frustrations.
Samsung
Galaxy S10
Button
Title
Body
Carrier Customer Care
Call
Have a question about your account or bill? Give customer care a call today.
My Device
Dashboard
Live Support
Removing Duplicate Elements
Duplicate elements within the Design System were confusing users who were trying to use these components in their designs.
Team cross-checked all elements to confirm which elements can be permanently deleted.
Cross-checked duplicated elements with PGM designs
Deleted unnecessary elements
Foundations Page
Following the Assurant Design System as a guideline our team is creating a more detailed and organized foundations page.
Colors
Created a more organized color system in the design system's foundations page.
Text Styles
The PGM team collaborated on finalizing the text styles. Text styles which were not being used in the DS have been removed. Use cases have also been added to the DS for guidance.
Auto Layout
Many elements within the Design System were not using auto layout, or had technical issues within the auto layout. We are constantly trying to fix these issues in order to create an easier working process for our designers.
Updated Assets
We added new assets as we delivered new client features. Out-of-date assets have also been updated.
New Icons
Icons have been updated in the design system to be more in line with PGH.
Brought in icons from PGH
Updated existing PGM icons to be in line with new styling.
Updated tools section icons to be inline with new styling
Over 20 icon updates in PGM to new style
Checkbox and Radio Button
These items were lacking consistency across PGH and PGM usage. Created a more consistent use case for these and optimized the components for easier use in our designs.