View
Coming Soon
The Lab
Back

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.

Read more
Read less

The brief

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. 

Read more
Read less

Heroing the story

We created an interactive hero moment that illustrates how a person’s decisions within the app can positively influence the world around them.

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.

Read more
Read less

Marketing tokens through identity

Together with 20(SOMETHING), we marketed in-app token discoverability through the lens of identity and personas on the website.

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’.

Read more
Read less

A flexible educational tool

Token.com needed to act as an educational tool for tokenomics. We created a dynamic learning 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 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.

Read more
Read less

Guides

Articles

Glossary

Blog

Adding meaningful motion

We used motion and interactivity to reflect the agency that the Token.com app gives users to make their own impact on the world.

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.

Read more
Read less

Design systems and UI

We worked closely with 20(SOMETHING), building on their brand identity to create a UI design system that could be used within the app.

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.

Read more
Read less

The result

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.

“Made by ON have created a website that unveils the joy of discovery through captivating storytelling, inspiring our audience to make informed investment decisions with ease.”

Expand iconContract icon
Story
Images
Show iconHide icon

Atelier 100

IKEA joined forces with global fashion brand H&M to launch Atelier100: an ‘ideas factory’ for emerging local talent, whose products are sold at the Atelier100 store in Livat Hammersmith, as well as IKEA’s shopping centre in west London. Atelier100 came to ON to create, expand, and maintain their online home. 

From the very beginning, the joint venture was driven by a commitment to foster community and creativity. Atelier100 promotes a network of makers, producing products that are equal parts sustainable and innovative. All products in Atelier100’s concept store have been designed and manufactured within 100km of central London by independent creators making waves in their respective crafts.

The goal of the new website is to champion the creatives involved in Atelier100, as well as creating a flexible platform that can accommodate different stages of the programme cycles, with ON managing the development of the site through its various stages.

Read more
Read less

HAYAH

How do you purchase life insurance in under two minutes?

That was the challenge when we first met David Howard, the Head of Strategy, Digital & Customer Experience at HAYAH, in late 2022.

Spun out of the AXA group by its forward-thinking CEO Mohamed Seghir, the company was rebranded to HAYAH (meaning ‘life’ in Arabic) in 2022. 

Set against the backdrop of life insurance in the United Arab Emirates (UAE) typically being paper-based, with policies written by established corporations, and the usual purchasers being high-earning expats sold through brokers, we realised this was a significant and exciting challenge.

It was not only the challenge to create a digital-first vision for life insurance, but the company's mission to offer savings, medical and life insurance to underrepresented communities within Dubai that resonated strongly with us.

Read more
Read less