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 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. We showed how the app gives you the agency to choose tokens that fit your interests by replicating a moment of user browsing, activated by scrolling downwards. We then communicated how these decisions impact the exterior world by expanding the mobile screen to show an illustrated scene filled with references to the token that has been bought.

The app itself 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. A fundamental challenge for us was how we reflected this functionality on the website in a simplistic, powerful way that would speak to newcomers to crypto.

Together with 20(SOMETHING), we decided that the website shouldn’t simply focus on the functionality, but rather draw attention to what this actually means for the audience. And it’s all about identity.

Bertrand Aznar created beautiful character illustrations with specific affectations to represent their interests. We took these designs and supported them with design and copy elements 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’.

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 was therefore how we organised the content within the learning 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.

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.

Token.com’s brand identity was created by 20(SOMETHING), 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.