“Way to make a complicated technology product easy to understand, fun to use and instantly recognizable through exceptional UX/UI.” —Boo Wong
Overview: Amsterdam-based digital design firm Antinomy Studio and software company Consensys joined forces to craft an engaging online experience showcasing Consensys’s MetaMask Portfolio, a user-friendly platform that lets clients effortlessly monitor, purchase, exchange, bridge and stake digital assets within a single, intuitive interface. The site conveys the service’s key features through an illustration by artist Dave Arcade that became the visual focal point for MetaMask Portfolio’s promotional campaign as well. The team at Antinomy also refined the site’s UI and UX design, seamlessly integrating the illustration into an interactive piece that breathes life into static visuals.
As Consensys wrote the MetaMask site in React, Antinomy utilized CSS, HTML and JavaScript to adapt to the existing codebase. WebGL and three.js were used to animate Arcade’s illustration.
To improve loading times, Antinomy created a tiled version of the main illustration and created the icons in Rive to animate them without loading images or video content.
From design and development to launch, MetaMask Portfolio’s site took about 24 days, equivalent to a full month of work.
Comments by Baptiste Briel:
Did you meet with any extraordinary obstacles during the MetaMask Portfolio site’s development? “To bring the static illustration by David Arcade to life, we opted to create an infinite version. By involving our technical team and developers in the initial client discussions, we provided guidance to the illustrator on creating an infinite-tiled version. This gives visitors the sensation of an endless isometric illustration and an ongoing connection to the MetaMask platform.”
What do you think are the project’s core features? “The main focus of the site, which revolves around the infinite illustration, is to provide users with guidance on how to navigate the platform. We implemented a drag feature that lets users navigate the illustration and designed the UI to be minimalistic. This approach gives visitors the freedom to move around while offering a more traditional interface with animated icons that highlight clickable areas of the illustration.”
Was the topic or subject of the MetaMask Portfolio site a new one for you? “At Antinomy Studio, we have produced numerous projects within the Web3 space for leading brands and companies that are pushing the boundaries of what Web3 can do. As cryptocurrency enthusiasts, we were already very familiar with MetaMask and its products.”
