How we designed a lovable metaverse experience for Decentraland
We recently wrote about building the ArcTouch office in the metaverse and the key questions we asked (and answered) before starting. However, we barely scratched the surface of how we designed a lovable metaverse experience.
In this post, we share some expert tips for designing a metaverse user experience, along with a step-by-step guide for how we designed our office in Decentraland.
Tips for designing a metaverse experience
Here are eight tips we recommend based on our experience designing the ArcTouch office in the metaverse. It starts by thinking of the metaverse experience like an ordinary user.
Tip 1: Dive into the metaverse
My avatar, hanging out by a pool in Decentraland. Given his attire, he’s probably not jumping in. ?
To better understand Decentraland, I created a custom avatar and started exploring games, art exhibits, and various types of buildings.
My goal was to understand basic aspects of the experience, such as how an avatar moves, how the camera works, the types of interactions an avatar can have, and the type of items you can engage with.
There’s a lot of Decentraland UX/UI design documentation to help you understand what is possible in this virtual environment.
I worked with one of our developers to create concepts before we started actually building the experience. Understanding the constraints allowed me to think more clearly about how I could design the lovable experience we wanted. Although Decentraland is not exactly a game, it has a lot of game design at the core. So I reviewed articles about video games and the metaverse. In particular, I found this video from Meta helpful because it shows how they solved some design problems with AltspaceVR.
After all the exploration, our team had a clear goal of the type of experience we wanted to design — including replicating some of the most iconic elements of our physical office space: the slide, the kitchen made from an old shipping container, and the reception desk by the front door.
Tip 2: Tell a story
Designing a metaverse experience is like creating a script of what happens when the user enters the scene. Ask yourself:
- What is the story we want to tell the user in this scene?
- What steps will guide the user through the story?
Tip 3: Welcome the user
Create an inviting environment that welcomes users even before they immerse themselves in the full experience. For example, when users first enter our virtual office, a pop-up welcomes them and displays some instructions. Ask yourself:
- What will users first see when they enter the scene?
- How can we make them feel welcome and encourage them to explore?
In ArcTouch’s virtual office, a welcome message encourages the user to explore.
Tip 4: Keep it simple
Create an easy-to-understand UI that focuses on doing just a few things really well. In the early days of ArcTouch, we captured this philosophy as: “Build an app experience like a steak knife, not a Swiss Army knife.” The more you try to do in your scene, the more confusing the experience. Like most things, best to keep it simple. You can always add more.
Tip 5: Keep it consistent
Create and use consistent design patterns for objects that have the same behavior. For example, if two objects offer the same point-and-click interaction, both of the objects should have the same animation, selected state, and feedback color after selected. That way, after the user interacts with the first object they’ll know what to expect from other objects.
Ask yourself:
- What interactions does the scene have?
- How do interactive objects stand out from other objects in the scene?
Tip 6: Provide guidance
In the metaverse, there are many ways to catch a user’s attention or guide them to try certain activities, including animations, glowing outlines, floating arrows, text messages, light beams, and sounds. These design tools provide visual cues to the user and help them understand the essential objects in the scene.
This video shows how when a user hovers a mouse over the tablet, a “Tap me” message appears:
Tip 7: Avoid over-explaining
Although guidance is good, there’s no need to over-explain things. Visitors to the metaverse don’t typically read a lot of text. You should minimize written explanations and emphasize visual cues. For example, if the user sees a moving platform, they will likely jump on it intuitively. Sometimes just having a sign with an easily-understood icon, like a play/pause button on a video player, is enough to help the user know what to expect.
This video shows how the platform to the second floor moves automatically up and down, and requires no explanation of what would happen if the user jumps onto it:
Tip 8: Be aware of the users’ movement constraints
Part of understanding the user experience in Decentraland or any metaverse platform is understanding the limitations of movement. Make sure that the actions you want users to take are easy given those movement constraints. For example, avoid making the user jump across a large gap in the floor. And be aware of the third-person camera view as the user interacts with objects — don’t put those objects too far above the ground. When the experience is built, test it thoroughly before making it available publicly. You may find you need to make adjustments to ensure the experience is enjoyable for everyone.
Step-by-step instructions: How to design for the metaverse
After defining your ideal user experience, it’s time to actually design the environment and build the assets. I used Blender to create the 3D assets for our ArcTouch office in Decentraland. There are other 3D design tools you could use per the Decentraland technical requirements.
Here are the key steps I followed to build the 3D model:
Step 1: Create a blueprint
Create a simple blueprint sketch to position the assets in the space available. This allows everyone on the project to see where objects should be on the scene. This blueprint will be especially helpful for developers and QA testers.
Here’s our blueprint:
A blueprint design of the ArcTouch office in the metaverse.
Step 2: Size your unit to fit your parcel
You need to size your building to fit onto the parcel you are renting or purchasing. Make sure you are using the same numeric system for the scale. In Decentraland, everything is sized based on the metric system. So, when we designed our virtual office, we changed the unit on our 3D software to meters so we could scale the assets correctly based on the size of the parcel we were renting.
Step 3: Import a 3D character to the scene
Place a common-sized character in your building to help validate your building’s size and proportions of different features, compared with actual user avatars. You can use example character assets for Decentraland.
Step 4: Block out the scene
Next, it’s time to start blocking out the 3D scene. Create basic forms where the objects will be — and keep them simple (cubes, cylinders, and rectangles). This helps you visualize the idea you had in the blueprint. Try different compositions, and explore using different assets while keeping the experience in mind. After you decide where everything goes, you can refine them.
Step 5: Identify any limitations
There are many limitations to consider when designing in any 3D world. For example, inside our 16×16 Decentraland parcel, we were limited to a maximum of 10,000 triangles, 20 materials, and 10 image textures. Use the status information in your 3D design tool to keep an eye on those limitations. This is explained in Decentraland’s scene limitations documentation.
Step 6: Use colliders to limit movement
A collider is a mesh that goes around 3D objects in the metaverse to make them “solid.” It enables the collision between the player and the 3D object. For example, if there is a table in the scene, without a collider, the player would pass directly through it, like a ghost.
Make sure the collider has a simple shape and the mesh envelops the objects correctly. This precision prevents the players from floating on air or being unable to reach specific spaces. Colliders also influence how the camera is displayed when the user is near it. Avoid having small spaces surrounded by colliders, which prevents users from seeing a confusing angle.
The purple squares are the invisible collider barriers around the chair that prevent the user from walking through the object.
Step 7: Optimize the materials
Materials are the properties of the 3D objects. They make the objects reflective, transparent, and add color to their surface. Remember from Step 5 that you may have a limit on the amount of materials you can have in your environment. You can optimize the amount of materials in your scene by reusing the same materials across objects. Create one single material and add flat colors to different objects with an image texture. Assign the image texture to the material, and position the UVs of the objects with the colors you want.
The deck of cards on the table has different colors because each card UV is mapped to a different color in the texture image on the left. This allows you to have one material with many different colors.
Decentraland provides a tutorial and a texture with some default colors that link to materials.
Decentraland’s Dynamic Skybox allows the user to change the lighting system across a scene — which impacts how light reflects off of objects. Be careful not to use materials that are too dark, because when Dynamic Skybox is set to nighttime, they might disappear in a dark scene.
Final thoughts from our metaverse design project
It can be overwhelming to think about creating a whole space from scratch, especially if it is the first time you are working on a metaverse design project like this. Working in this new environment taught me to focus on what is really important for the user experience. What I loved most is that all the knowledge we gained will help us build 3D experiences in other metaverses.
Need help designing an experience in the metaverse?
ArcTouch has been creating lovable apps and digital products for a wide variety of platforms since the dawn of the App Store. Want to build something awesome together? Contact us to get started.