Mission Lane
Design System
MY ROLE
Design System Designer
DURATION
10 months
COLLABORATORS
2 Engineers
6 Product Designers
Head of Design
TOOLS
Figma, Storybook, Asana
Project Overview
Mission Lane is a fin-tech company dedicated to helping people gain access to fair and transparent credit. Their suite of financial tools helps create paths to lead customers to better financial health.
Who is Mission Lane?
Responsive Marketing Website: missionlane.com
Mission Lane has ambitious expansion plans to grow its product suite. 6 product designers diverted their attention from their product verticals to create the initial design system draft. The necessity for a dedicated design system resource became evident.
Problem
I was hired to take over the work on the Figma UI library. I was responsible for optimizing the components, authoring design guidelines, creating a process for requests and contributions, and ensuring the Figma UI library and component repo were in sync.
My Role
Mobile App: Earn
Mobile App: Mission Money
Mobile App: Mission Lane Credit Card
Goals
With no pre-existing insights, I harnessed the power of user feedback, analytics, and surveys. I identified opportunities and prioritized work accordingly.
1. ) Optimize for a Better workflow
Optimize components for easy configuration, encompassing all variations, ensuring responsive scalability for different screen sizes, and upholding WCAG color contrast standards.
The text field component was reduced from 151 variants to 40 variants
A reorganization of the content structure
Easy-to-use variant controls
2.) Clear & inclusive guidelines for all
Provide user-friendly guidelines guidelines that detail best practices for how product teams should use components and visual styles.
Each component page details the usage, placement, variations, states, anatomy, interaction behavior, do’s & don’ts, & product images.
Established a consistent set of usage guidelines
Button placement do’s & don’ts
Button variations for both light and dark backgrounds
3.) Request & contribution process
Build a process that identifies component requirements, and enables designers and developers to submit form requests. Prioritize requests with engineering, conduct thorough testing, and seamlessly integrate into the design system.
4.) Align and Educate Teams
Facilitate meetings with the design team, and cross-functional teams to review upcoming component needs, and share system updates and roadmap discussions. Use the #design-system Slack channel as a public hub for resource-sharing, announcements, and inquiries.
Suisse Int’l is a versatile font that is used across our applications for body copy as well as strong headlines.
Sampling of color palettes for Mission Lane products
Component states and interactions
Reflection
In wrapping up this journey through the evolution of our design system, it's clear that fostering collaboration and alignment across teams can yield remarkable results. From spearheading the development and integration of new UI components to streamlining typography and documentation, each step has been a stride toward a more cohesive and efficient design ecosystem.
As we move forward, our dedication to mentoring and personalized guidance stands as a testament to our commitment to growth, ready to shape the future of our product suite.
15+
Developed 15+ UI components and patterns
50+
Facilitated 50+ designer contributions
Overall
Increased accessibility and usage of design system documentation
Vicki Lin
Product Designer
Mission Lane
...Whitney is an amazing design systems designer. She is extremely meticulous in her work, ensuring that every component of the design system is well thought out, and thoroughly documented. She's also a Figma master! Super on top of the latest Figma tricks and tips and is always willing to collaborate and share her learnings with others.
Kendall Wahnschaffe
Software Engineer
Mission Lane
...Whitney's attention to detail allows her to iterate and improve upon existing designs and solutions, no matter how polished they may already appear. She has the ability to communicate effectively with both product and development, resulting in faster time to market and an overall better product. On top of all that, she does everything professionally and with such class.