DESIGN SYSTEM • COMPONENTIZATION • B2C

A design system for a product being built without a designer

A design system for a product being built without a designer

A design system for a product being built without a designer

Redesign, component behaviors, and 100+ specified screens, built on the library the developers already used
a notebook on the floor

context

The client was developing a large-scale B2C SaaS product directly with developers but without a designer on the team.

The client created wireframes to illustrate their vision, but developers struggled to understand and navigate the submitted documents, maintain visual consistency, and identify usability issues and inconsistencies. The need for a designer came from both sides: the client couldn't get his vision across, and the developers couldn't build from what they were give

problems

  • Overly complex copy

  • Poor information hierarchy

  • Inconsistent visual design

  • Overcomplicated implementation solutions

  • Information overload

  • No clear feature prioritization

  • Usability and accessibility gaps

  • Missing component variations and states

process

  • Redesign of the client's initial wireframes, discussing necessary changes

  • Design system built on the library the developers were already using

  • Component creation with defined behaviors and proper handoff

Redesign from client's wireframes

redesign figma
redesign figma

Design discussions

UX design audit
UX design audit

Design system, components and behaviors

components and design system

Responsive designs

responsive screens_calendar
responsive screens_dashboard

Dashboard

dashboard SaaS
dashboard_table_SaaS

outcomes

  • Development time saved, with the design system removing repeated decisions from the build

  • Consistency held across client and admin versions as the product grew

  • Later features easier to plan, with components and behaviors already defined

  • 100+ screens covering states, responsiveness, and varied functionality, specified for handoff

  • A design system built on the library the developers already used, so adoption cost them nothing

Contact

Let’s talk projects, collaborations, or anything I can help with

Contact

Let’s talk projects, collaborations, or anything I can help with

Contact

Let’s talk projects, collaborations, or anything I can help with

•

UX/UI & PRODUCT DESIGNER

•

UX/UI & PRODUCT DESIGNER

Create a free website with Framer, the website builder loved by startups, designers and agencies.