Industry

Web 3.0 Crypto wallet

Client

MetaMask

My role

Sr Product Designer

Create a design system that is simple, scalable, and understandable by designers and developers

I recognized the need for a functional design system specifically for confirmation screens to ensure consistency, visual quality, and efficient execution. By formalizing components and interaction patterns, we streamlined collaboration with engineering and significantly improved the overall polish and perceived security of the product.

This foundational work not only elevated the current experience but also positioned us to better handle future complexity and scale within confirmations ensuring we could adapt quickly as the ecosystem evolved.

Impact

  • Consistent secure UX across wallet

  • Less time spent on coding new components

  • Edge cases were handles with great speed & efficiency

  • Less back and forth during cross team collaboration

  • Unblocked review screens for new features with ready templates

  • Coded design is a lot more consistent

Main Project Image
Main Project Image
Main Project Image

Keeping it simple yet scalable

Although I was the sole designer on the project, I designed the confirmation system with future scalability in mind, knowing it would eventually be used by other designers across the company. The system needed to support multiple features while maintaining a secure, consistent user experience for reviewing and approving actions. To achieve this, I followed atomic design principles, built nested components, and leveraged component properties to simplify variants and reduce duplication. The result is a living design system that adapts to evolving product needs while remaining flexible, maintainable, and easy to extend.

Large Project Gallery Image #3
Large Project Gallery Image #3
Large Project Gallery Image #3
Large Project Gallery Image #4
Large Project Gallery Image #4
Large Project Gallery Image #4
  • The image featured in the carousel #1
  • The image featured in the carousel #2
  • The image featured in the carousel #3
  • The image featured in the carousel #4
  • The image featured in the carousel #1
  • The image featured in the carousel #2
  • The image featured in the carousel #3
  • The image featured in the carousel #4
  • The image featured in the carousel #1
  • The image featured in the carousel #2
  • The image featured in the carousel #3
  • The image featured in the carousel #4