Overview
Level provides innovative benefits software for Notion, Hinge Health, Sofi, Nasdaq, and more.
The existing design system needed a significant overhaul to keep up with the product’s rapid growth. The redesign was driven by a commitment to scalability, flexibility for web and mobile platforms, and a user-first approach to reduce friction in both development workflows and user experiences.
My Role
Lead Product Designer
Team
Design System Engineer, Founding Designer
Timeline
6 months
Documentation
Even with Figma's Dev Mode, some components required extra documentation to clarify things such as interactions and gradients. As designers, we aimed to stay months ahead of development, so we ensured our documentation was explicit and detailed.
Breathing the brand's life into the core user experience
We leveraged funds—a core part of Level’s experience that shows how much a member has to spend—to seamlessly integrate the Level brand into the UI, highlighting key elements of daily interactions.
Designing for responsiveness
Level has a robust, complex system of mobile and desktop screens, posing challenges for responsive design. To give clarity for development, I documented use cases for different screen sizes including collapsed and wrapped states of components.
Results
The redesign was not only a solution to immediate challenges but also a foundation for future growth. By creating a flexible, scalable system and fostering collaboration, the team successfully delivered a robust design ecosystem that empowered both users and developers to deliver features while maintaining the Level brand and quality of components.
1. Accelerated Development: Developers received design system assets on time, expediting feature rollouts.
2. Cross-Platform Consistency: Unified design patterns enhanced user experiences across web and mobile.
3. Improved Team Dynamics: Collaboration with key stakeholders ensured the system evolved to meet the product’s needs.
4. Enhanced Scalability: Created a flexible design system that supported the product’s rapid growth and adaptability.
2. Cross-Platform Consistency: Unified design patterns enhanced user experiences across web and mobile.
3. Improved Team Dynamics: Collaboration with key stakeholders ensured the system evolved to meet the product’s needs.
4. Enhanced Scalability: Created a flexible design system that supported the product’s rapid growth and adaptability.
Challenges
Token implementation was not immediately as accessible due to past code choices, so we were unable to use tokens right away, but the naming framework was used in Figma to set up design and development for future success.