Case Study
Heading
Dec 20, 2023

How we made the Decentraland onboarding experience

Create onboarding experience for new users that will get to know how to navigate and use Decentraland features

Premise

Decentraland is a 3D social platform with its mainly focus on community building through NFTs. Users can buy virtual plots of land in the platform to design and deploy their own content or express themselves through native NFT add-ons like wearables.

Mission

Create onboarding experience for new users that will retain them, as through the experience, they will get to know how to navigate and use Decentraland features. Encourage them to become more curious about actions and activities they can undertake, enhancing their overall experience and reinforcing the feeling that Decentraland is also for them.

Goals for users

  • Teach new users the controls, how to communicate and find new experiences.
  • Give new users a sense of purpose.
  • Help users understand what’s great about Decentraland.

Art

First layouts and gameplay proposal

This project initially had significant dimensions, and it was originally intented to follow those guidelines. However, over time, they changed.

Layouts

The initial scene layouts featured an island, with different heights with varying elevations, where players were required to explore to discover different missions. The room was connected to the main scene either by a bridge or a tunnel.

The aim of the experience was to convey the idea that, from your room, you could access an entire world, minorring the representation in the Decentraland reference trailer.

Onboarding experience first layout

Onboarding experience - room layout 01
Onboarding experience - room layout 02

To enhance visibility of all missions and zones from any position in the scene, a new layout was proposed. This design featured a more circular path, making it easier for inexperienced players to locate objectives and missions.

Onboarding experience second layout

The predominant colors in the scene are orange, aligning with the color of the Decentraland logo to better represent its brand.

Onboarding experience aligned with Decentraland colors

Finally, the scene underwent another new layout—smaller, more linear and clearer for the players. It was considered that some new users might not have much experience in other games, and after testing with a few individuals, it became apparent that completing the entire process could be time-consuming and complicated for some users. Decentraland aimed to make the experience accessible and easy for everyone, leading to the creation of this new layout.

The design retained the same zones and missions, but the islands were arranged linearly and by heights, forming an easy-to-follow path. Upon completing a mission, the bridge connecting to the next island and subsequent mission would be activated.

To maintain coherence and minimize environmental changes, the room and the tunnel were eliminated from the experience.

Onboarding experience - smaller and final layout

Onboarding experience bridge animation

NPCs

Tobor - Robot NPC

This project centered on assisting the user comprehending the fundamental functions essential for an enjoyable experience in Decentraland. The primary emphasis is on mastering different controls such as movement, camera control, emotes and interaction buttons.

It also involves navigating through scenes and succesfully completing missions. To provide intuitive guidance, a travel companion named Tobor was created to accompany the user throughout their journey.

Tobor NPC on the scene
Tobor NPC design

This friendly robot invites us to follow him, guiding us through the island while instructing us the basic controls of our avatar in Decentraland.

Bezier - The fox

Bezier the fox, is a friendly companion that will assist us in familiarizing ourselves with using emotes in Decentraland. Its mission involves performing three different emotes on a platform, and it will guide us step by step as illustrated in the images.

Bezier NPC on the scene 01

Bezier NPC on the scene 03

Bezier NPC on the scene 02

Bezier NPC animation

Mat - First racoon brother

Later, we meet Mat, a friendly raccoon engaged in the business of selling wearables. He requests our assistance in obtaining the materials needed for his products, namely 'Meshes and Materials.'

This mission serves as an introduction to the concept of treasure hunts, one of the most common types of quests in Decentraland.

Mat NPC design
Mat NPC animation

Mat NPC on the scene

Kit - Second racoon brother

Finally, we meet Mat’s brother, Kit. Kit requests our help in restoring the energy of the server to deploy the scene, teaching us how to interact with the environment.

All NPCs have different sttes and react to our actions, enhancing user engagement with Decentraland.

Kit NPC on the scene
Kit NPC posed

Gammification

Quest 0 - Arrival and pilars

Once you pass through the tunnel area, you’ll arrive at the first section of the main island, offering a panoramic view of the entire landscape. This allows you to easily identify each area you’ll explore later.

Upon beginning the descent, you’ll meet a robot NPC who will explain the primary quest for the area. The goal is to assist each NPC in activating all the towers, and once accomplished, the portal will be activated.

The tower near the robot NPC will already be activated, serving as a tutorial for players to familiarize themselves with complating quests. This initial quest represents the tutorial for movement and exploration.

After interacting with the NPC, he will provide you the first page of the tutorial section of the Book, visually summarizing what you’ve learned in the room and the tunnel.

Quest 1 - Emotes

For the quest one, your initial task is to locate the NPC positioned along the main road before reaching the central area. Upon reaching the NPC, take a moment, as it will initiate interaction with you.

This quest focuses on leveraging Decentraland’s social capabilities. Once you approach the NPC, it will greet you and express their hesitation to attend a party due to a lack of dancing skills.

To fulfill the quest, your objective is to teach the NPC some dance steps using the Decentraland emote system.

  • After successfully executing each correct emote, the avatar cheers and a board behind the NPC gets filled.

Tasks board layout

Subsequently, the pillar activates and you receive a new page in the Book within the apartment tutorial section. This page explains the insights gained from the social and emote interactions.

The unlocked page specifically focuses on socials, which includes text chat functionality.

Quest 2 - Treasure hunt

Quest 2 involves a task of collecting two items to create a wearable. Begin by heading to the NPC located next to the tower, making it easily accessible. Once there, engage in a conversation with the NPC, explaining the situation.

After the dialogue, your next objective is to search for the objects required.The items to be collected represent the technical limitations of Decentraland when creating and publishing a wearable. Once you’ve gathered the necessary items, return to the NPC. Upon completion, the NPC will begin crafting the wearable, which will be handed to you the next time you’re in the central square.

Subsequently, the pillar activates, granting you a new page on the Book within the apartment tutorial section. This page provides insights into werables, detailing the process of crafting and publishing.

Quest3 - Puzzle

In quest 3, you’ll engage with the Constructor NPC, who will direct you to restore the connection in the central area of the onboarding. To achieve this, you’ll need to solve a small puzzle located in the  cable area behind the NPC.

This puzzle could involve manipulating rotating boxes to complete a connection, with the boxes positioned on an electric box on the floor or a column.

Once you’ve successfully solved the puzzle, head to the central area and click on the building. The construction will occur in three phases, requiring three clicks. During this process, a robot NPC will emerge from your backpack and perform a construction animation reminiscent of Civ6.

Upon completing this task, the pillar activates, granting you a new page in the Book within the apartment tutorial section. This page elaborates on what you’ve learned about lands, owners and the significance of Decentraland within the community.

Quest4 - End of the onboarding

Once the pillars are active, the portal will illuminate, signaling the party beginning.  Within this festive atmosphere, you have the opportunity to engage with NPCs to review the concepts learned during the onboarding process. Interact with them to reinforce your understanding, and bid them farewell before crossing the portal and transitioning to Decentraland.

End of the Onboarding experience

Conclusion

The most challenging aspect of this project revolved around meticulously managing the user experience (UX) from inception to completion, ensuring that users receive continuous feedback to prevent any sense of confusion. Right from the moment of entering the scene, we proactively guide users on how to position their hands for optimal mouse and keyboard interaction.

Tobor is introduced early in the journey, guiding users to the initial point on the island.

To further enhance user orientation, the spawn point provides a clear view of the entire path leading to the portal area, minimizing the risk of users becoming desoriented. This comprehensive approach involved several animations and extensive testing to ensure a seamless and natural feel.

The outcome is a delightful and straightforward experience that effectively introduces users to the fundamental concepts of navigating in Decentraland.

Decentraland
Isabel Cutanda
Animation Lead and Environment Artist

Passionate about 3D work since childhood, rigging as my main passion

Lianir
Coder
Tutorial
How to import Decentraland SkyboxEditor into Unity
Tutorial
Doing a MANA transaction in a Decentraland scene
Tutorial
Canvas (2D UI) Manager in Decentraland