MetaMask began as a browser extension and mobile wallet designed primarily for accessing web3 and completing transactions. As users accumulated more assets across accounts, networks, and applications, understanding everything they owned required moving between disconnected views and external products. Portfolio created a dedicated place to bring that activity together, giving users a clearer picture of their holdings and more direct ways to manage and act on them. For MetaMask, it also created an opportunity to evolve beyond a transactional wallet into a broader platform users could return to for managing their crypto.

Color and typography formed the visual foundation of Portfolio. Primitive values were mapped to semantic tokens based on purpose and context, allowing the system to maintain hierarchy, accessibility, and brand expression across themes and surfaces. This structure also gave design and engineering a shared language, making global changes easier to manage as the product evolved.

Common UI elements like buttons, inputs, navigation, list items, and cards were built as reusable components, with variants and states that could adapt to different contexts. This allowed updates to be made once and reflected across the product, esssentially helping teams work faster and maintain consistency.

Since Portfolio could be used throughout the day and across different environments, we supported both light and dark themes rather than designing for a single viewing condition. Theming was built into the foundation using shared color rules, allowing the UI to adapt while being mindful of preserving the same hierarchy, readability, accessibility, and visual consistency across both light and dark mode.

The framework gave us a shared way to evaluate where new capabilities belonged before they entered the UI. Instead of letting the navigation mirror individual teams or product launches, each capability could be placed according to the user need it served. This created a more predictable information architecture for users while giving teams a common structure for evolving Portfolio as the ecosystem became more complex.

Buy, Swap, Bridge, Stake, and Send were built by different teams, but needed to work together as one Portfolio experience. Alongside designing end-to-end experience for Buy & Sell, I created the structure these features could plug into and worked with their designers to bring each workflow into the platform. Although they served different user needs, each followed a similar interaction pattern: selecting an asset, entering an amount, reviewing details, and confirming an action. These shared patterns gave us a foundation for creating a more connected experience across independently built products.

A key part of managing a portfolio is understanding the activity behind it. Transactions became a strong example of how we brought that visibility into one cohesive experience. I designed the transaction experience around a consistent information architecture, bringing activity across Buy, Sell, Swap, Bridge, Send, Receive, and other interactions into one place. Details adapted to each transaction, including assets, values, accounts, applications, and other relevant information, while the underlying structure remained consistent. Working with each product team ensured every transaction type surfaced the right information within that structure, making activity easier for users to scan, filter, and understand across Portfolio.

From supporting a single account and a handful of networks to multiple accounts and an expanding network ecosystem, the experience needed to adapt with it. I designed account and network controls that let users decide what they wanted to view and manage, rather than forcing everything into a fixed portfolio. This flexibility kept Portfolio approachable for newer users while giving more advanced users the control needed to manage extensive activity across accounts and networks, reinforcing the autonomy at the core of MetaMask’s self-custodial experience.

Managing a portfolio also meant helping users understand what they could do next. Discovery brought tokens, NFTs, DeFi, dapps, and other opportunities into the same experience, turning Portfolio from a place to monitor assets into a starting point for exploring and using them.