.svg)
I worked on the entire M1 Finance platform wherever support was needed. For 2 months, I joined the Design System team to help grow their book of work.
About: M1 Finance is a Series E startup building consumer-facing online brokerage and wealth management app.
I partnered with designers, engineers, and product to build scalable and accessible components and their specs for web and mobile clients.
Together, we pushed 10+ full components and their documentation in the past month and a half.
I advocated for accessibility by defining keyboard interactions, breakpoints, contrast in light and dark mode, and guidance on consistent, readable text.
Our team promoted a continuous feedback loop to validate components and ensure robust documentation.
Many small visual changes makes a difference!
| Change | Why | Version |
|---|---|---|
| Standardize all type to 16 pt (originally 12 pt for “mobile” and 14 pt for “web”) | 16 pt is ADA compliant and Liquid’s default type; it better supports responsive design | v2 |
| Define breaking points | Define when a “web” Banner becomes a “mobile” Banner on smaller screens using our new responsive grid | v2 |
| Increase icon size from 20 px to 24 px | Align with 16 pt text height | v2 |
| Left align mobile Link | Visual alignment | v2 |
| Contextual icons | Provide more context to support the type of banner (alert, warning, informational, success) | v2 |
| Add Close property | Allow users the option to close a Banner | v2 |
