Because Design system, V1

Back to home

Project overview

When I joined Because.eco, we faced significant challenges as a pre-seed stage startup without an established design system.
This created inconsistencies in our UI and slowed our execution speed. While the company had some Figma components, these were reverse-engineered from development rather than built with a systematic design approach. Recognizing this opportunity, I initiated a collaboration with another product designer and a front-end developer to establish structure and accelerate our design process.
We developed a V1 design system that aim at standardized our UI elements, established consistent patterns, and created a shared visual language across our product.
This foundation dramatically improved our workflow efficiency and ensured a cohesive user experience throughout the platform. By implementing proper documentation and component libraries, we reduced design decision fatigue and enabled faster iterations. The system ultimately provided the scalability necessary for our growing product while maintaining design integrity during this crucial funding stage.
  • Client
    Because
  • Date
    February 2024 - ongoing
  • Role
    Collaborator

Challenges

  1. Tight Timeline for MVP Delivery 
    Facing delivery pressures, I secured a dedicated two-week sprint from leadership to build our design system. We created a V1  Figma component library based on Radix UI library that immediately reduced redundant work and significantly accelerated our development velocity when we returned to feature development.
  2. Strategic Implementation & Legacy Integration
    During our transition to the new design system, we managed a challenging period where legacy code coexisted with our V1 Figma library. We implemented a strategic approach: designing new features exclusively with the new components while prioritizing updates to high-traffic areas of our hub based on user data. This parallel effort of forward-looking development and targeted legacy refactoring ensured consistent progress despite resource constraints.
  3. Establishing Collaborative Design-Development Workflows
    As we cultivated a design system culture throughout the company, we transformed our working methods. Previously, developers would either follow design specifications or improvise based on project urgency, leading to inconsistencies. We introduced a formal QA process for every new feature, taught developers how to effectively navigate Figma design specs, and helped designers understand technical challenges and constraints. This balanced approach allowed us to maintain pragmatic development timelines while still delivering good user experiences through improved cross-functional collaboration.

Project Impacts & Key Takeaway

Building a design system requires organizational commitment and stakeholder belief in its return on investment. At Because, while startups often view design systems as "nice-to-have," our organization recognized their value after customers specifically commented on aesthetic improvements and enhanced UX.
The development team embraced this more structured approach to building features, appreciating the shift from relying on legacy components to following precise design specifications. A crucial takeaway was recognizing that while creating components might be simpler for designers than for front-end developers, maintaining strong alignment through gradual improvements and regular retrospectives kept morale high and expectations in check.

Next Project

Sustainx

View project