2023
Matcha
I redesigned Matcha’s homepage around the ways people begin a visit. I led the page structure and content hierarchy, giving new and returning users direct paths to search for a token, browse the market, connect a wallet, and start trading.
- Role
- I led the page structure, content hierarchy, and paths into discovery and trading.
- Outcome
- New and returning users have direct routes into the part of Matcha they need.
- Product
- Matcha - DEX Aggregator by 0x
- Industry
- DeFi / Web3 / Fintech
- Year
- 2023
- Link
- matcha.xyz
Helping people find their next token
- Some people arrive knowing exactly what to trade. Others just want to look around.
- I redesigned the homepage to give both a place to start.
Two ways in
- Kept search direct for people with a token in mind.
- Gave market browsing room for people who hadn't decided yet.
Discovery before a decision
- Connected market browsing to token pages, where people can take a closer look.
- Research comes before the commitment to connect a wallet and trade.
Finding the next step
- Kept search, research, and trading easy to find from anywhere on the page.
One page, both themes
- The homepage is built from Matcha’s design system, so light and dark are the same components on different tokens.
Tokens before components
- Gray, purple, and green primitives map to semantic tokens, each with a light and a dark value.
Type and spacing
- Gilroy sets the headlines and Inter everything else.
- Spacing steps up from a 4px unit, from 4px gaps to 32px container padding.
Every state, specified
- Primary, secondary, tertiary, and link buttons each cover default, hover, pressed, focused, and disabled.
- State changes fade in over 150 to 200ms, so the timing is part of the spec too.
