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.

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.

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.

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.

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.

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

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