With LendingClub's expanding product offerings and evolving brand identity, the old design system was fragmentary and outdated. There was a growing need for a comprehensive design system with reusable components and detailed documentation to match up the diverse product features and tight production timeline. Among the growing design team internally, it felt difficult to keep each other's designs consistent, therefore harder to keep track of the quality.
Year
2023
Role
UX & UI Designer
Company
LendingClub
Timeline
6-8 months
Team
4 Product Designers
1 Researcher
1 Product Manager
2 Marketing Managers
2 UI Developers
Challenge
The existing cross-sell offers were misaligned with our updated design aesthetic, offering poor user experience, and failing to encompass our broadened suite of products, which now included both loans and deposits accounts. On the other hand, there was slow down in the user conversion through the particular cross-sell funnel.
How might we create a design system that is simple, scalable, conveys the new brand identity, and helps designers and developers work better together?
Objectives
• Establish consistent visual elements and enhance user experience across all digital platforms
• Improve brand perception and user engagement through consistent design language. • Speed up our design and dev process, with ready-made component library
• Promote accessibility in the new design system
screenshots from the old design system PDF file that was heavily developer centric with very limited diversity
Brand Identity Exploration
The company was undergoing an identity change at the moment, given the shifting product priorities and the need for a more distinctive brand and tone. Therefore, before diving into the design system work, there were a few things in the current brand guidelines that we were hoping to refresh.
I conducted and proposing a new branding exploration involved several strategic steps aimed at enhancing the brand's visual identity and aligning it more closely with the values and expectations of our target audience in the fintech sector.
Understanding the psychological impact of color on consumer perception was a key part of the process. The shift from red to more commonly used fintech colors like blue and green was based on their association with trustworthiness, dependability, refreshment, calmness, and reliability—qualities essential for a fintech brand.
A thorough exploration of alternative font families was conducted, with a focus on finding options that offered greater customization to better suit diverse branding needs. This search prioritized font families that could provide a wide range of weights, styles, and features to enhance brand flexibility and expressiveness. We decided on Mulish at the end.
I also developed a competitive benchmark by comparing the branding elements of these institutions. This step helped in identifying common themes, trends, and best practices within the industry, as well as any gaps or unique opportunities for differentiation.
Research
How does one go about creating a Design System for a complex and growing mobile and web application at a large fintech company ? I didn’t know the answer so I started this project with some research. I read Medium articles on atomic design principles, studied the guidelines laid out by companies like Google, Github, Shopify and Atlassian, and spoke to designers and developers on the team to understand their challenges and needs.
Component Inventory
I conducted an inventory and categorization of all existing design assets currently in the design files, legacy websites, mobile apps, and internal tooling.
buttons
input fields
Deliverables
Figma component library file
Examples of the foundational elements documents
Documentation
Consolidated and integrated design system components in a developer-friendly documentation system.
Results
Overall, the team is spending less time on designing and coding new components. Handoff is a lot more efficient and less back and forth during QA. The coded design is a lot more consistent. We were in the process of gradually updating all the designs to the new design system, starting with newer features and products, then redesigns of the exisiting products, eventually the legacy products.
Conclusion
This project taught me several things. It gave me the opportunity to study some of the best design systems currently in use, hone my Figma skills, and collaborate and learn from my development team. In the beginning, there was resistance to creating a design system. As a designer, it began to pay off for me immediately by allowing me to create mockups in a fraction of the time.
The design system was still in progress, and constantly being iterated on and contributed to as we test out the components live in real product design and development, and work together to govern and update the design system as needed. The work was far from being done. It only started a conversation. We would need more collaboration with the development team to standardize the process for creating new patterns. If I had more time, I would also love to leverage the new design system as a way to grow awareness of the systematic approach design team takes in front of other stakeholders.
Previously crafting the future of banking and leading design ops at LendingClub, I'm currently open to new opportunities.
