MetaMask Web Experience
MetaMask Web Experience
MetaMask Web Experience
Overivew
I came onto MetaMask after the rebrand handoff from Wolff Olins — the homepage was already designed and approved, the brand guidelines were set, and my job was to take what the agency handed off and make it actually work as a website. That meant learning the brand fast: what could flex for web, what couldn’t, and where the guidelines simply hadn’t accounted for how a real, multi-page, multi-stakeholder site gets built and maintained.
There wasn’t an existing web design system to work from, so I built one — introducing the team to Figma components, translating the agency’s static brand assets into something scalable, and doing it with accessibility and our actual user base in mind, not just the polished homepage mock. From there, the work fanned out across the site: buy/reward/stake/earn, downloads, GEO and Learn content, and eventually the developer side of things — each with its own stakeholders, its own constraints, and its own reason the system needed to hold up.
I came onto MetaMask after the rebrand handoff from Wolff Olins — the homepage was already designed and approved, the brand guidelines were set, and my job was to take what the agency handed off and make it actually work as a website. That meant learning the brand fast: what could flex for web, what couldn’t, and where the guidelines simply hadn’t accounted for how a real, multi-page, multi-stakeholder site gets built and maintained.
There wasn’t an existing web design system to work from, so I built one — introducing the team to Figma components, translating the agency’s static brand assets into something scalable, and doing it with accessibility and our actual user base in mind, not just the polished homepage mock. From there, the work fanned out across the site: buy/reward/stake/earn, downloads, GEO and Learn content, and eventually the developer side of things — each with its own stakeholders, its own constraints, and its own reason the system needed to hold up.
skills
Web Design
Design Systems
Accessibility
A/B Testing
Localization
Art Direction
tools
Figma
Spline 3D
Claude
Nano Banana
GPT Image
Contentful
Building the System
Building the System
Building the System
Context + Approach
After inheriting the approved homepage and brand guidelines from Wolff Olins, I worked with the product team to translate their visual direction into a system that could actually support marketing — building a library of reusable product touts, setting up scalable Figma components, and partnering with web development to make sure everything held up in code. Because pages needed to localize into other regions, the system had to be built for translation from day one. I also paired with content owners to A/B test layouts against specific keywords and page goals.
After inheriting the approved homepage and brand guidelines from Wolff Olins, I worked with the product team to translate their visual direction into a system that could actually support marketing — building a library of reusable product touts, setting up scalable Figma components, and partnering with web development to make sure everything held up in code. Because pages needed to localize into other regions, the system had to be built for translation from day one. I also paired with content owners to A/B test layouts against specific keywords and page goals.
Team
Creative Director: Craig Wong
Product & Engineering Manager: Nazan Kurt
Web Developer: Kevin Chassagne
Internationalization Manager: Laurel Klafehn
Design Lead: Tsvetan Mitev
Motion Designer: Hugo Banda
GEO & Learn Pages
GEO & Learn Pages
GEO & Learn Pages
Context + Approach
Partnering with the content director and writers, I designed the landing pages and post templates for MetaMask’s GEO and Learn content — balancing what search needed with what an actual person landing on the page needed to see. GEO pages had to perform for discoverability while still feeling credible to a human reader; Learn pages had to take genuinely dense material and make it approachable without flattening it. I ran multiple layout variations through A/B testing to land on what worked for each. For Learn specifically, I also developed a visual system for featured post images using generative AI tools, including Nano Banana and GPT Image, building it into a repeatable process so future illustrations wouldn’t need to start from scratch.
Partnering with the content director and writers, I designed the landing pages and post templates for MetaMask’s GEO and Learn content — balancing what search needed with what an actual person landing on the page needed to see. GEO pages had to perform for discoverability while still feeling credible to a human reader; Learn pages had to take genuinely dense material and make it approachable without flattening it. I ran multiple layout variations through A/B testing to land on what worked for each. For Learn specifically, I also developed a visual system for featured post images using generative AI tools, including Nano Banana and GPT Image, building it into a repeatable process so future illustrations wouldn’t need to start from scratch.
Team
Creative Director: Craig Wong
Content Director: Gabriela Helfet
Product & Engineering Manager: Nazan Kurt
Web Developer: Kevin Chassagne
Internationalization Manager: Laurel Klafehn
Developer Hub
Developer Hub
Developer Hub
Context + Approach
The developer-facing pages called for a different approach entirely — less brand storytelling, more solving for crypto-native users trying to get code working quickly. I designed a terminal-style interface to host code snippets in a way that felt native to that audience: easily scannable, with a copy-code feature so people didn’t need to manually highlight and copy. I worked closely with our developer to make sure the design held up against our actual codebase and translated cleanly to frontend, rather than designing something that looked right but couldn’t ship as-is.
The developer-facing pages called for a different approach entirely — less brand storytelling, more solving for crypto-native users trying to get code working quickly. I designed a terminal-style interface to host code snippets in a way that felt native to that audience: easily scannable, with a copy-code feature so people didn’t need to manually highlight and copy. I worked closely with our developer to make sure the design held up against our actual codebase and translated cleanly to frontend, rather than designing something that looked right but couldn’t ship as-is.
Team
Creative Director: Craig Wong
Product & Engineering Manager: Nazan Kurt
Web Developer: Kevin Chassagne
