Mandela Design System
Maintaining and enhancing LegalShield's Mandela Design System
LegalShield Overview
LegalShield empowers individuals to get legal protection through affordable legal subscription services.
They connect members with local provider attorneys that help with any personal legal matter without charging a high hourly bill.
Roles and Responsibilities
I was the sole product designer on the Front-end team. This team is responsible for building and maintaining the Mandela Design System as well as other apps and products. When I was put on this team, I helped maintain the design system and updated and created new components using Figma. I collaborated with devs and my PM to ensure a collaborative relationship, and identified processes to manage design system change requests. I also created an email template design system that allowed the marketing team to efficiently build emails for their specific needs.
Mandela Design System
Mandela is LegalShield's single source of truth for our design patterns of our system. It is a product that services other products to ensure efficiency and consistency across all of our apps and platforms. By having an established design system, developers are able to focus on implementation while product designers focused on the experience - saving time, money, and effort.
What does Mandela consist of?
Foundations
These are the visual elements needed to build engaging end-to-end user experiences. Foundations include guidance on iconography, typography, spacing and grid.
Components
Components are the building blocks that have been crafted to meet a specific interaction or UI need that serves a variety of different products.
Creating an intake pipeline
Prior to having a process, design system requests were made from a variety of different people in different roles. When this happened, it would rarely get the proper review, and components were built that were either not reusable, not following our design guidelines, or not providing a good user experience. This caused a lot of re work and wasted time and resources. To solve for this, I created a process for these requests in kanban style:
In order for components to be considered, a series of questions would have to be answered so it can demonstrate business value while maintaining quality control and consistency throughout our design system.
-
What problem is this solving?
-
Is this a common problem?
-
What is the value / need?
-
Are there similar components?
-
Does it meet LegalShield's design values?
-
Does it meet usability and accessibility standards?
These tickets went through a review process. First with the design team to ensure it's meeting our criteria, then with the front end team to further groom and prioritize.
Component update request: Focus state
We identified that our current focus state did not meet the 3:1 contrast ratio criteria. I researched other approaches and found what I believed was the best solution. Below is how I documented the proposed change:
As a team involving our PM, lead developer, and design manager, we reviewed and signed off on this proposed change. It was then updated in our framework for other teams to use.
New component request: Accordion
Myself and another designer on the team realized that we were all using different versions of an accordion. We got together to define what is needed for this to become a reusable component in the that solves the different needs across products.
I then created a component that allows flexibility and responsiveness.
Accordion implementation
After we reviewed as a team and got sign off from all parties necessary, this component was built and added to Storybook.
Building an email template design system
Extending our Mandela design system, I created an email design system consisting of the building blocks of an email. These blocks include:
-
Header
-
Hero
-
Content
-
Numbered Steps
-
Code / Line items
-
Testimonial
-
Footer
-
Download buttons
Below demonstrates how to quickly and efficiently build an email using these blocks and it's variants:
Email design system implementation
The front end team implemented the design system into Storybook and has now been used by the marketing team and product designers to quickly and efficiently create emails and newsletters.
Some examples of emails created with the email design system
Announcing design system updates
Every other week, the front end team holds a meeting that announces any changes and updates to the design system to a variety of teams and executive leadership. I have the opportunity to demo any new or updated components and it's value and answer any questions. This process helps teams stay aligned and informed about the design system.
Reflection
While on this team, I've realized how much I enjoy system thinking and creating tools / processes that allow devs and designers to work more efficiently. It's been challenging and rewarding to be apart of a valuable product that is always evolving and improving. I'm really hoping to continue to grow and learn on an established design system team that provides mentorship and guidance on how to be even more effective in a design system role.