Phantom

Opening up web3 to the masses

Cryptocurrency might be on the verge of entering the mainstream, but for many it’s still a highly abstract representation of money, whose underlying mechanisms are hard to capture. On the one hand, crypto companies have relied on skeuomorphic design principles to combat this level of abstraction — replicating physical-world items or concepts to help new users grasp the format — while crypto natives have developed completely new languages around which to build their communities.

Phantom is at the forefront of the industry’s drive to bring web3 to the masses and to bridge this gap between seasoned users and those who are new to the ecosystem. Earlier in 2023, Phantom transformed its existing non-custodial single-chain wallet on Solana into a multi-chain wallet that can be used easily and securely across different blockchains, helping it scale to a new generation. Now, with over three million monthly active users, Phantom asked us to rethink its brand, bringing it in line with the company’s global presence and defining a friendlier, more accessible approach to the world of crypto — one that’s designed for all, rather than the few.

“The technology is getting there, bringing us to a unique crossroads where we have the opportunity to actually onboard a new generation of people to web3.”

Creating an accessible crypto experience

Key for us was the simplification of the user experience and finding ways to ‘simply’ define web3 to onboard a mainstream audience as intuitively as possible. By solving crucial UX issues and unique crypto challenges when it came to building and developing the website, more people can now freely and confidently participate in this new horizontal digital economy. Creative strategy, brand narrative, identity, and development were all inherent to the process.

Guiding our design process was a desire to visualise and verbalise web3 as an exciting space, while encouraging a sense of transparency and confidence in the product. From the refined logo to the colour palette and the storytelling, the whole Phantom experience is intended to reinforce these values, and at the same time blending ease with playfulness, exploration with movement.

The first task was to rework Phantom’s beloved logo. We started by redefining what a ‘phantom’ could be and signify as a character. For both the Phantom team and community, it was vital to retain a friendly, recognisable mascot, so we added an extra layer of personality and movement, which in turn opened up the possibility of more playful animations and generative concepts. 

Above all, we wanted the dynamism of the new phantom to spill over from the character into the logotype and all elements of the website. Design principles, like motion and interactions, were also based on the logo animation, meaning the playful and bouncy nature of the mascot was reflected in the hover states and surprising scroll interactions. We decided to use spring animations instead of easing animations because they allowed us to make this bounciness more natural and realistic. We experimented with various stiffness and damping values to achieve the ideal bouncy effect.

Lastly, we commissioned a series of digital artworks to complement the new brand, using Phantom’s broad reach to celebrate artists working in the web3 space and helping to bring the identity to life. Martin Nicolausson, Digo Digital and Anton Hjertstedt each contributed their own interpretation of the phantom, ranging from the more classic ‘ghostly’ figure to conceptual notions of capturing an aura. As additional assets, this ‘mash-up’ reflects Phantom’s adaptability and role in hosting a huge variety of artworks in the web3 community. The approach can also be extended, with more artists commissioned in future and the identity changing form, just like a phantom.

“For our first-ever rebrand, we went with the renowned design studio Bakken & Bæck. They worked with us throughout the entire process to get our new look just right. And they nailed it.”

Tech Stacks

• Sanity (CMS)
• Next.js, Typescript, Emotion, Jotai (frontend)
• Framer Motion, Lottie (animations)
• Phantom motion designer: Piotr Wojtczak

Credits

• Martin Nicolausson, Digo Digital, Anton Hjertstedt (artist collaborations)
• Gianluca Alla (logo animations)
• F37 Foundry (typography)