Lendio Design System

Lendio / 2020
UX Designers, Software Engineers
Co-led creation and implementation of Lendio's Design System
The Team
My Role

Lendio needed a cohesive design experience. When a user entered the website, applied for a loan, and accessed their portal, the design was incredibly inconsistent for each experience. We strove to provide consistency and to help the designers become more efficient.

Why do we need a design system?

The benefits of a design system really come alive when components are coded and can be repurposed across the site— saving precious development time and company $$ for maintenance. Consistent, high quality UI contributes to trust, ease of use, and brand perception.

My colleague, Ben Crabtreeand I were tasked with the opportunity to create one for Lendio and to help enforce the guidelines.

We looked at other companies across the industry and used Design Systems for Figmaas a great resource. We also read a few different articles on how to build design systems.
Research
One of our very first steps was to conduct an audit of existing assets and supporting documentation and determine to centralize, archive, or deprecate assets. This audit helped us answer the following questions:
  • What asset types exist?
  • Where does it exist?
  • How is it used?
  • When was it last updated?
  • Can it be repurposed?
  • Where do we centralize assets?
Audit

To find the answers to these questions, we conducted interviews with our users: the Lendio UX Designers.

Takeaways
There were three existing "design systems" at Lendio: Internal, External, and Sunrise (our secondary company) It was the wild wild west. Components were scarce and if there were any, they couldn't be applied to each facet of Lendio. Everyone wanted to merge into just one system to rule them all.
Roadmap
We did our best to create a roadmap with objectives, tasks, and deadlines to help us stay on track.
Deliberating on the strategy
Guess what? The roadmap had to be adjusted.

With much deliberation with our UX Director and various stakeholders, we determined e that the best way to move forward was to create the Lendio Design System for external facing designs only. The technical restraints were strong.

This meant that the Lendio.com website, the borrower application, and the merchant portal would be the three lanes to utilize this MVP of the Lendio Design System.

Now was the time to start thinking about how we could build one piece at a time. We categorized the pieces into the global fundamentals and components.

The global fundamentals encompassed the grid, spacing, breakpoints, typography, elevations, border radius, color palette and logos.

The components ranged from buttons to dropdowns to modals and so forth. For the sake of MVP version, we chose only a handful of necessary components to focus on so that the lendio.com website, borrower application, and merchant portal could function properly.
Defining taxonomy and patterns
Below is an example of how we decided to define the taxonomy and patterns. This helped us organize our thoughts as we built out the components using variables in Figma.
Build, iterate, build
We asked our designers to help participate in building out the Design System. Sharing the work also helps others buy into and feel invested in the design system.

This was messy, chaotic, and yet creative at the same time. Here is where we landed for Global Fundamentals and buttons.
Takeaways
Don't be afraid to ask for help. Creating a design system can be a daunting task and luckily, we had many team members who were willing to contribute and lighten the load for us.
Governance
We proposed a plan of involving each design stakeholder when a component needed to be changed. Those individuals will meet together, and the proposer would need to come to the table with a strong use case of creating a new component. Then their team would be responsible for creating this component in code.
Training
We built a training program where our designers participated in recreating their respective products in the new design system. This was great practice for them because they got to use the new components.

New hires are also walked through the design system as part of their onboarding.
It's a partnership
A design system is only as strong as the code behind it. We may have planned, organized, and designed a system but the reality is it would never last without a proper codebase to support it.

Throughout this whole effort, we constantly checked in with leadership, engineering, marketing, and stakeholders to update them on our progress.

Our biggest champion, Bill, is an engineer and he became the point person for implementing the design system into Bootstrap 5. We worked closely together to collaborate.

It never ends
The maintenance of the design system never ends. With this project, we were able to lay down the foundations of a new design system and have process in order to continually maintain it.
Powered by Webflow
Linkedin