Lantern Finance
I designed a comprehensive design system for Lantern Finance in Figma and implemented it in Storybook and Chromatic for visual testing. This ensured consistency across the product, streamlined design & development, and reduced implementation time by 150%, contributing to securing $100K in seed funding.
Meet the Team
Design LEAD & UX
me
PRoduct
Jung Kim
Development
Amjad I
Context
Project Timeline: May 2023 - Ongoing
Role: Lead UX/UI Designer at Lantern Finance (Techstars Accelerator Program)
Design System Strategy
- Started small- using a few components from the first product designed (dashboard), a 3 colors and one font style.
- The library grew through iterative design of dashboard and other products we designed.
- Organized the library using Atomic Design methodology
Design System Development Approach
- Created a system where designers, product managers and developers colloborated using Figma, storybook and chromatic.
- Created a system that allowed developers outside the UX contribute to the components library without compromising on the quality of components created.
- Clear documentation to help new team members get up to speed.
The design system evolved by starting small with just the components we needed initially and we added to the library over time.
Planning
Methodology
Atomic Design
I applied Atomic Design by breaking down the dashboard and platform UI into reusable components, starting with fundamental elements like buttons and inputs (atoms), combining them into functional groups like forms and navigation menus (molecules), and scaling up to complex structures like headers and feature sections (organisms). This approach ensured consistency, scalability, and efficient collaboration across the design and development process.
