tl;dr

I’m delighted to join Electric as a designer!

I help founders hire great designers, build solid design foundations for their products, and scale their teams.

Prior to Electric, I was a design lead at Facebook, Unity and Deliveroo, where I shipped numerous products in VR, consumer, and creative tools. I also bring my experience as the co-founder of Enigma, an analytics platform for public and financial data.

Why do Web3 founders need design in the first place?

With Web3, no one “owns” the front-end anymore. Teams can build on top of protocols without asking for permission. This opens the door to a free market of user experience execution. Whoever designs the best front-end — one that is trustworthy, simple, and performant — is best positioned to win.

1. Gain user trust — Trust is not just about protocol security and bug bounties. It’s also about making your product “feel” trustworthy. In other words, does your product convey accuracy, honesty, professionalism, and empathy?

2. Simplify the product — Regardless of your stack, technical idiosyncrasies need to be hidden to gain mainstream appeal. Good designers will challenge you to simplify where you thought control and customization were necessary. Great designers will do so without alienating your power users.

3. Speed up execution — The benefit of speed is well understood by Web2 incumbents. Speed does not only apply to the product, but also to how quickly designs come together. Structuring your team with the right designer profiles and investing in tooling will enable faster iteration and execution.

Case Study: Tokemak

Recently, I collaborated with Tokemak, just as their liquidity bandwidth protocol reached $1B TVL. They were thinking about adapting their dApp UI for new use cases. Over a one month sprint, we explored how design updates could improve trust, usability, and scale.

Visuals for Trust

Tokemak’s brand was already strong, but wasn’t shining through the product’s UI.

First, we applied very strict layout so the UI feels structured, almost machine-like. We reduced the use of gradients, shadows, blurs and color variations, and added large color blocks, as you would encounter in terminal user interfaces. We used monospace fonts and simplified icons to their most simple expression.

Abstracting Away the Complexity

Tokemak can be overwhelming at first glance. We explored what a dashboard would look like for new users as they get more familiar with the protocol.

Instead of concentrating user flows in a single view, we relegated them in their own section, surfacing only high-level status and recommended next steps in the dashboard. When users land on the product for the fist time, they are presented with an explanation of Tokemak’s functionalities. As they deposit, stake, and vote in the protocol, they are shown helpers to ensure they complete their tasks and get the most out of their positions.

By only displaying need-to-know information, labeling navigation and actions in plain language, and using colors to highlight action items, we can reduce the learning curve and onboard more users.

Design System Foundations

For the design and product team to move quickly, a solid set of components is crucial.

We overhauled their design system in Figma, nearly halving the number of colors, typography styles, and component variations. We also pushed for using components that can adapt from desktop to mobile with minimal customization. With less options to choose from, designers spend more time designing features, and engineers don’t have to maintain extensive style libraries.

Great Design Can be the Edge to Win

I’m excited to help founders get there. Follow me @raphelectric for design resources and rants 🫡.