That is a Figma prototype.
That is a screen with each type of transaction you can have.
That is the design system I created.
April, 2022
Snaps
Client
Consensys
My role
Product designer
My mission
- Create a reusable design for dApps (UX/UI)
- Create the website
Project
The goal is that the user can connect via MetaMask to protocols other than Ethereum.
Team
1 Product Owner, 1 Architect, 2 Fullstack Developers, 1 QA and 1 Product Designer.
Link
Challenges met and solutions found
- Display on a single screen the address, the tokens including a selected one and its transactions while respecting the MetaMask style.
- I divided the screen into three parts, the sidebar with the address and the list of tokens, the top part for the total and the equivalent in dollars and the bottom part with the list of transactions.
- Create a template that could accommodate the styles of the different protocols while respecting the style of MetaMask.
- I took a lot of inspiration from the MetaMask style and created Figma files for the style that fits the different protocols, only a few colours change, it takes little time to do and the user has the impression to be in a dedicated application. For example the primary buttons become yellow for Bitcoin, Blue for StarkNet... The font does not change, which allows to keep a certain consistency when opening several dApps of several protocols at the same time.
- Understand how a dApp works for this snap.
- I created several wireframe flows and iterated with other designers and my PO to get it right.