Token.com

Token.com are revolutionising crypto investment. They’re humanising the mysterious world of non-fungible tokens with their simple, exciting, and educational trading platform, making it easier for crypto-novices to invest in the projects that suit their interests, and make a positive impact with their money.

The global token economy is predicted to hit $17bn by 2030. And yet, most people have very little understanding of what tokens are, let alone the wider field Web3 tokenomics and blockchain currency trading. The truth is getting into crypto is difficult. It’s a world filled with inaccessible language and complicated exchange platforms that leave you with the feeling that crypto is for crypto experts alone.

Token.com’s mission is to change this landscape with a platform that makes investing in the things you care about simple. Their app is centred around education, simplicity, and ease of discovery. With snackable content, immersive guides, and a live feed, they mix elements of social media and educational tools to help users carve out their niche and foster community and accountability around their investing.

Token.com came to us to build a website that conveys their mission of investing with intent through powerful storytelling.

The primary objective for the website is to encourage people to download the Token.com app. As designers, UX writers, and developers we were faced with the challenge of creating an experience that offered the right amount of content a user would need to get started on the app.

To achieve this, the website first needed to show users how Token.com is different from other trading platforms, by unpacking their mission with immersive, visual storytelling.

The website also needed to serve as an educational tool, to help people understand what tokens are, and how the app helps them to start investing.

Encompassing all of this, we needed to develop the brand identity of Token.com, by taking the brand language created by 20(SOMETHING), and bringing it to life with a UI design system that could form a foundation for the app experience.

token.com wanted to express their mission ‘invest with intent’ through immersive storytelling. We created a hero moment that takes users on a journey.

token.com allows users to invest in tokens in a range of different industries, from environmental initiatives to cutting-edge technology ventures. In essence, investing with intent means having the power to choose how your money shapes the world around you.

We created an interactive hero moment that walks the user through this philosophy with immersive storytelling. Landing on the website, you are presented with a 3D image of a phone displaying token cards within the app. As you scroll downwards, the cards scroll, replicating a user browsing to find a token that interests them. A celebration moment appears, leaping outside of the phone screen as a token connected to social impact has been bought. The phone screen then expands into a beautifully illustrated world filled with references to social initiatives, such as re-greening cities and modes of transport powered by electricity.

The result is to show how a user’s decisions with their investment within the app can positively influence the exterior world.

The token.com app helps users discover tokens that speak to their identity. We celebrated this diversity of choice through the diversity of audiences.

The app allows users to discover tokens with themed collections that can be filtered by tags relating to different areas of interest. Users can then build up a portfolio of tokens which align to their own identity. As a fundamental part of the app, this needed to be reflected throughout the website.

As you scroll down from the hero moment, you are presented with beautiful character illustrations created by Bertrand Aznar, with affectations to represent their interests. We supported these with design elements and copy that connect individualism with in-app functionality. Token cards and tags corresponding to each character’s quirks are overlaid in 3D, and the supporting copy is centred around the message of ‘your interests, your tokens’.

token.com needed to act as an educational tool for tokenomics. We created a dynamic learn hub that flexes for different levels of expertise.

The inherent nature of tokens and block-chain currency make it easier for the general public to invest in them. Fractional ownership allows for smaller investment, lowering the barrier to entry, whilst their 24/7 accessibility means that anyone can invest in token projects, wherever they are.

However, as a new technology, knowledge of how the blockchain works, and how tokens are traded remains limited amongst the public. As part of their mission to make tokens more accessible, token.com recognised that their website needed to serve as an educational tool. However, as a platform that seeks to bring together token beginners and those already trading, the website needed to support newcomers without alienating audiences with more experience.

A key challenge for token.com was therefore how we organised the content within the learn hub to cater for different audiences. We created an experience where users can choose their pathway into learning about tokens, selecting beginner, intermediate, or advanced. The articles and guides are then carefully curated to suit the user’s experience, allowing them to start at a chosen difficulty, or to move through the content organically as they level up their knowledge.

We used motion and interactivity to immerse users in the Token.com story.

A key part of the brief from Token.com was that the website should be a departure from traditional crypto trading platforms. Their vision for the future of how tokens are traded is exciting and dynamic; the website needed to reflect this. We therefore focused heavily on motion, to not only bring moments of joy to visuals, but also to give them another dimension of meaning. Beginning with the hero moment which tells elements of the token story as the user scrolls, to 3d coins which rotate at the flick of a cursor, motion on the website is dictated by user interaction. It creates a sense of agency, showing the user that Token.com is not only a world they can be a part of, but also one that they can change with their actions.

We therefore focused heavily on motion, to not only bring moments of joy to visuals, but also to give them another dimension of meaning. Beginning with the hero moment which tells elements of the token story as the user scrolls, to 3d coins which rotate at the flick of a cursor, motion on the website is dictated by user interaction. It creates a sense of agency, showing the user that Token.com is not only a world they can be a part of, but also one that they can change with their actions.

We developed the brand identity, creating a UI design system that formed the foundation for the app.

Token.com’s brand identity was created by 20Something, using a pastel colour palette and iconography inspired by retrofuturism to match the comic book- style illustrations from Bertrand Aznar. We brought this to life on the website with a system of gradients that added depth and texture, allowing us to stack visual elements without losing the pop of the colour palette.

We also created a catalogue of UI designs that would form the foundations for many of the visual elements within the app. In particular, we focused on iterating the visual layout of token cards with the team at Token.com. These cards are intended to give users a snapshot of the most important information from the projects they represent. We created colour-coded tags that investors can use to filter and search projects by interests within the app and on the website token index, as well as a stock ticker-styled status indicator which shows how the token is doing on the market.

Crypto and blockchain technology is changing the way people invest. What drew us to Token.com is their understanding of the power that community and education have in helping people use this technology to invest in what matters to them. We’re proud to have created a website that acts as a sounding board for this message, supporting people — whatever their investment experience — to get started with Tokens.