Vland Product

Context
Vland is a product providing remote meeting service in virtual space.

Vland is a virtual live platform that provides virtual space as a service to pan-industry scenarios, in which users can have personal identities, socialize in space, and contact through real-time video, just like in the real world.

The Problem
It’s difficult for users to create and modify the their own virtual space in Vland without professional training.

Now the space service is created by professional designers and the marketing team in our company because the space design process is too complicated for users without professional training.

To increase clients of our product, letting users design the space and modify the service by themselves is an urgent need.

There are 2 causes for this problem:
‍1. Users aren’t familiar with design tools:
Most Users don’t have professional design experience and aren’t familiar with designing tools.
‍2. Rules for the virtual space are complicated due to technical restrictions:
To make the virtual space more like the real world, the developing team set up complex rules of tile maps, which contain 9 different layers. These technical restrictions make map building more complicated for users.

Design Goal
Enable non-professional users to create advanced Vland space with the least amount of friction.

Easy To Use - The product's visual design and functionality largely meet user expectations, users can complete tasks with no guidance or minimal prompting.

‍Wow - On the basis of usability, the product has a positive performance that exceeds expectations; X% increase in user satisfaction and X increase in active users.

Design Process
Cross-functional cooperation

To design and develop quickly and efficiently, we came up with a 2-week sprint for the design and development team, in which design is one week ahead of development. In the first week, we present the design concept and features for the next week to the development team. Meanwhile, they would run a testing demo for last week’s feature and do technical research on next week’s feature. In our second week, we would adjust the design according to feedback from the development team and get the design documentation ready for their next sprint.

Soluation
‍A Easy-to-start map editing tool - Vland Builder

Vland Builder is a tool that enables users to create their own virtual space for online events. It allows users to customize every element of the virtual space, including the floor, wall, furniture, photos, text, interactive objects, and special effects. Once the map is created, users can publish it to Vland to hold their own online events.

User Research
Who are our target users?

In order to deeply understand users’ needs, I conducted a series of interviews with existing users, the business development team, and collaborative designers. According to our product goals and current marketing practice, we can divide target users into three groups: Collaborative Designer, B2B customer, and B2C customer.

User Research
How do users design Vland maps?

To deeply know the workflow when users design a Vland map, I conducted a design test with two types of users, professional users, and non-professional ones.
‍
‍Testing goal: To understand the user’s mental and behavioral models, so that the builder can meet the user's expectations as much as possible.
‍Testing process: Let users build a scene through normal space design tools, and observe their design process.
‍Results: Professional users have a plan before they build the scene while non-professional users focus more in details, they place items randomly.

Insights
Professional Users VS Non-professional Users

1. Our users have a mix of skill sets, we must make the editor easy to use for non-professional users without frustrating advanced users.

2. Instead of having the plan to do the map design, non-professional users add assets randomly, we must introduce the concept of designing a Map in Vland and lead them to finish designing in a high-efficiency work flow.

Layout Design
Design the main layout: set the framework according to user habits.

The main goal of designing the layout for Vland Builder is to create an intuitive workflow for users and make it easy for them to understand the process of designing a Vland Map. The layout should be similar to commonly used design tools such as Office suites and Canva. Through user research, they were discovered as the most popular tools among non-professional users. After considering product features and user habits, three layouts were designed. Ultimately, layout 1 was chosen because it has a simple operation and a lower learning cost for users.

Challenge
The toughest challenge: how to make complex layers unnoticeable to users?

Vland is a virtual space built on a tile map using the game engine. To enhance realism, we added the effect of occlusion. For instance, the attendee is hidden behind the tree, drinks are placed on a table that sits on the floor, and the wall partially obscures the attendee while partially blocking their path. The development team implemented 9 separate layers to achieve this effect, but it can be challenging for users to distinguish between these layers and place assets in the correct one.

User’s exceptions VS Technical constraints

User’s exceptions:
‍Simply set assets forward and backward.
‍
‍Technique restrictions:
‍1. Each layer has it’s order on the technical side, it cannot be moved up/down easily.
2. We already have more than 1000 templates and user-self-made maps serving in the market, If we change the layer settings, we have to transfer previous assets to new layers. This transformation has a large potential to interrupt the previous service.

Solution A
Think from design, and explore a better interaction based on the current layer settings.

1st Iteration

Separate assets and images in different layer groups, in which users can drag them up and down in that group.

User Feedbacks:
1. It is hard for users to understand the separation between assets, they might wonder why they can’t drag the asset to another group.
2. It seems hard to differentiate assets when there are more than 3 assets in one tile.
3. The drag-and-drop feature doesn't work well in a Web Application. It’s a technical problem.

2st Iteration

Improvements：
1. Add a thumbnail to each of the assets to help the user differentiate layers.
2. Replace the drag feature with a menu, which has a higher succeed rate in Web Application.

User Feedbacks：
1. Users are still confused about the separated layers.
2. Users need 3 clicks to change assets order.

Solution B
Change layer settings from the technical perspective, finally back to the “move up and move down”.

After communicating every detail with the development team, we came up with 3 new layer settings. We tested each layer setting with 4 map cases:
1. Objects + Objects in one tile
2. Objects + Floor in one tile
3. Objects + Wall in one tile
4. Complicated scene with multiple assets
Finally, we choose the first one since it requires the least changes from the development team meanwhile can achieve a relatively good effect for users.

Layer Change Testing

New Layer Settings

Final Solution
The difference between old and new layer settings

1. Making data classification clearer, making asset order adjusting easier.

In old layer settings, photos are able to store in every layer; the user can adjust asset orders by manually selecting a layer. While in the new layer settings, layers were separated into layers in front of the avatar and layers behind the avatar; each asset has a default layer arranged by the asset properties; the user can change asset order in the same layer; when they set it as “Appear in front of attendees”, the asset will be moved to the layer in front of avatars.

2. Simplify interactions from 4 steps to 3 steps.

Before

After