CREATING LENDIFY’S DESIGN SYSTEM
OVERVIEW
Lendify is a Community Development Financial Institution (CDFI) that provides affordable, credit-building loans to working families in America. Lendify, not having their own brick & mortar stores, relied heavily on partnerships to distribute and sell their products. This meant that whatever we designed needed to be flexible and co-brand with hundreds of different partners. As the business grew, we needed to create a white label design system and style guide that was flexible and scalable.
PROBLEM
As the business and design team grew, our products were becoming inconsistent and full of non-reusable components. This created a jarring user experience, slowed down design iterations and engineering implementation.
OUTCOME
An accessible, efficient, and inclusive design system full of reusable components paired with documentation for guidance. Our products now had a consistent look and feel to allow for a growing omnichannel experience for in the future.
ROLE
Product Designer (in collaboration with Tara Chandi and Beau Kelsey)
DESIGN PROCESS
01. DEFINE
Before jumping straight into designs, we needed to understand:
What is a design system?
Who are we designing for?
Since the design system would be used directly by our team, Designers would the primary user, along with Engineers (who would use the system to build a component library)
Why is this important for the business?
A design system is important for so many reasons including, but not limited to:
Scalability
Allows us to easily take on future partnerships and launch new products
Uniting teams
The design system acted as a bridge to a unified experience that all teams had access to. It eliminated time spent “discussing design elements”, and allowed teams across the company to make consistent design decisions without the supervision of designers.
Consistency
It would allow our design team to grow while maintaining consistency. Consistency builds loyalty and trust in our products
Quick prototyping and faster iterations
Designers could quickly prototype and iterate an idea within minutes. It helped support a fail-fast culture and a lean methodology.
Decrease in Engineering resources
Engineers could reuse built components instead of building designs from scratch.
Better Usability
The design of our products is a language that we use to communicate with our customers. Like any language, it’s strength lies in how well people understand the language. Inconsistencies and constant changes to a language can be disconcerting. Our design system is built holistically in an effort to create one consistent language.
Accessibility
Creating a design system gives us an opportunity to lay the foundational rules that allow our product to be accessible to our unique customers who have limited data access, older phones, less economic freedom, and lower education levels.
02. RESEARCH
Since design systems have been around for a while, we decided to look at other companies for inspiration and guidance. We wanted to make sure our design system was robust but also accessible.
03. IDEATE & CREATE
Due to time constraints, we knew dividing and conquering would be the most efficient way to create the system. Work was separated by component and interaction types (eg. one designer worked on all input fields while another worked on the color palette). However, before we divided the work we knew we needed to establish our guiding principles and heuristics to create alignment.
Creating Guiding Principles
We first looked at examples from other companies to help inspire and guide our thinking. Some examples from our exploration included:
Team Brainstorm
We decided to list out all the feelings we would want a customer to feel at every point of the product. Afterward, we distilled them down to the most valuable and important feelings and used them to inform our principles.
Lendify Guiding Principles
Lendify should always offer a CLEAR recommended path on what the user should do next rather than offering too much flexibility.
Lendify would rather be the fun supportive mentor than your white-collar bank.
Lendify would rather give you more steps with more direction than leaving you without confidence.
Lendify is geared towards the most simplistic user rather than the trendy techy.
Lendify would rather reuse a component than introduce a new concept.
Lendify would rather be a little inconsistent and give the user the best solution within the current context than hold fast to current concepts.
Lendify would rather give feedback than be a quiet bystander.
Lendify never surprises you.
DESIGN SYSTEM OUTCOME
Since Lendify is a financial company whose principles relyie heavily on transparency and honesty, we wanted the designs to reflect that. Being a white-label brand, we chose to remain minimal in appearance to limit the number of changes we would need to make from partner to partner.
Style Guide
Along with the component library, we created a style guide to accompany the library. This was not only useful for new designers and engineers but also helped document our logic and reasoning (eg. when to use a dropdown vs radio button, or how the tone of voice should be).
Example of the style guide:
05. ENGINEERING HANDOFF
Zeplin was our handoff system of choice! Engineering used Zeplin to grab all front end components and built the library in Storybook.
RETROSPECTIVE & NEXT STEPS
The design system was built quickly and minimally. As time went on, we added new components and guidelines to accompany the growth of our products. The next stage would be to take the current system and add more components to add flexibility and better accessbility.
Being a white label company, Lendify later decided to move away from a minimal brand approach and rebrand as Aura. This means a new and improved design system will be created to help take our simple white-label design into a fully branded library.
You can preview the additions to the new Aura branded design system in my Aura Rebrand project.