MetaMask Learn
An interactive digital experience, MetaMask Learn defines the jargon, the technology, and the possibility of Web3 without its audience needing a degree in order to understand. Through editorial pages, Web3 simulations, and fun illustrations, we break down fundamental concepts into everyday terms and step-by-step lessons.
An interactive digital experience, MetaMask Learn defines the jargon, the technology, and the possibility of Web3 without its audience needing a degree in order to understand. Through editorial pages, Web3 simulations, and fun illustrations, we break down fundamental concepts into everyday terms and step-by-step lessons.
An interactive digital experience, MetaMask Learn defines the jargon, the technology, and the possibility of Web3 without its audience needing a degree in order to understand. Through editorial pages, Web3 simulations, and fun illustrations, we break down fundamental concepts into everyday terms and step-by-step lessons.
MetaMask Learn aims to answer the question "What does Web3 really mean?" once and for all.
TLDR
Lead Designer / Art Director
Website + Campaign
12 Weeks
Campaign Video 1
Expanding existing brand shapes into an illustrated ecosystem.
Expanding existing brand shapes into an illustrated ecosystem.
Expanding existing brand shapes into an illustrated ecosystem.
Inspired by the MetaMask logo, our new system expands upon existing secondary shapes and brings them to the forefront of our web components and illustrations. These shapes help to form our worlds, and are treated as "portals" to all things Web3.
Digital Identity Lesson Illustration
Finance, Decentralized illustration
Editorial-style lessons that explain Web3 basics in everyday lingo.
Editorial-style lessons that explain Web3 basics in everyday lingo.
Editorial-style lessons that explain Web3 basics in everyday lingo.
Beginning with "What is Web3?", each lesson is intended to be completed in sequential order. To compensate for jargon-heavy topics, our lesson pages break up dense copy with varying sizes and alignments. Using this style of hierarchy allows the lessons to read in a more interactive, and engaging way.
Desktop Scroll
Typography
Colors
Simulations that allow users to try these topics risk-free.
Simulations that allow users to try these topics risk-free.
Simulations that allow users to try these topics risk-free.
Each lesson ends with a simulation that expands upon what they just learned. These provide our audience with either a further explanation of the concept, or a safe way to try something, like swapping tokens or voting on a DAO.
SRP Simulation
Desktop Landing
MetaMask Learn Homepage
MetaMask Learn Homepage
Course Overview
Course Overview Page
Course Overview Page
A series of animated shorts directing people to the Learn site.
A series of animated shorts directing people to the Learn site.
A series of animated shorts directing people to the Learn site.
Relatable, colorful, and bursting with energy, each spot resolves with our heroes finding themselves physically in the MetaMask Learn site itself, adding further cohesion between the product and campaign.
Campaign Video 2
