TOPIA - 2024

builder mode

An image of the builder mode configuration in a world.

01

overview

Company

Topia

Contribution

As lead on this project, I created a project plan and led all initiatives from discovery to handoff. This involved close collaboration with key stakeholders, product managers, and developers to successfully achieve the desired outcome.

Duration

8 weeks

Try it

Context

Topia is an application that allows users to engage in real-time experiences through spatial communication within personalized virtual worlds. On the Topia platform, users can construct their worlds using "Assets" – PNG images that can be uploaded to the platform or acquired from the marketplace. Once users have their assets, they can create their world by placing these assets on a canvas. Users have various actions at their disposal to modify an asset, including moving, duplicating, flipping horizontally, and scaling.

Purpose of the redesign

1. Frequent User Feedback: Consistent feedback from users highlighted areas that needed improvement.
2. Identified User Difficulties: User feedback indicated specific difficulties and dissatisfaction with the current world building feature
3. Technological Advancements: Recent technological advancements to the renderer provided new opportunities to enhance the feature's functionality and performance..

Goal

Redesign the World Builder tool to address user concerns, enhance usability, and boost engagement by transforming world-building into an enjoyable and creative activity, ultimately increasing the number of cool worlds available to explore in Topia.

02

discovery

Methods used

Audit of existing feature
Personas
User surveys
User Interviews
tech sync
competitive analysis
Focus Groups
Customer service data

Research questions

1. Identify user needs and pain points
2. Identify industry standards for similar tools
3. Foster stakeholder alignment
4. Gather insights to drive design decisions in the following phases of the project

A collection of screenshots of the survey results.

User survey

Scheduling interviews was challenging due to time constraints and admin issues. However, surveys allowed us to quickly reach a large audience and gather valuable feedback efficiently.

A screenshot of the interview questions and 3 participants.

User interviews

Our team members, as power users, provided insights into pain points and unmet needs of the tool. Understanding their experiences helped identify key areas for improvement.

A collection of screenshots of research done on other editing tools.

Industry research

Researching common actions in industry-standard design tools ensured our tool was intuitive for users, minimizing the learning curve by adhering to familiar patterns and practices.

A screenshot of the focus group as well as a summary of the focus group insights.

Focus groups

Our product team holds monthly focus groups. We dedicated this month's session to discussing the current tool, providing a platform for open, honest feedback, and gaining a deep understanding of user needs and frustrations.

03

definition

Insight synthesis

After gathering numerous insights, I employed a synthesis method to identify prevalent themes and problem patterns. This guided prioritization of design efforts and issue resolution towards project goals. Upon thorough review and synthesis, two primary challenges emerged for the current feature.

Theme 01

The current process of editing and building a world is time-consuming and challenging to navigate.

Theme 02

Many users find the layering feature difficult to understand.

Theme 03

Internal inspection and user reports indicate that there is insufficient help content for this feature.

Plan

Given the scope of these challenges, the target completion date, and the available resources, it became clear that addressing all the issues to a high standard in this effort was unrealistic. Therefore, I decided to prioritize and tackle Theme 01 and Theme 03 first.

Theme 01 was chosen because it will significantly improve the world-building process and have the greatest impact. Addressing the layering issues at a later date will further enhance the user experience.

Theme 03 was selected as it offers a high-value opportunity to develop a process for improving help content and overall support for all feature releases and updates without requiring engineering resources.

Next steps

After defining the project's scope, I analyzed the insights gathered on world-building to pinpoint the areas that needed improvement. I listed each problem area and summarized the key issues within each, creating a comprehensive list of requirements to guide the design decisions in the solution phase.

A gif showcasing the existing method of having to edit one asset at a time.

Problem 1: Single-Asset Editing

Editing is limited to one asset at a time, which makes bulk edits tedious and time-consuming. For instance, moving multiple assets requires moving each one individually. This process becomes particularly frustrating and inefficient when dealing with hundreds of assets.

A gif showcasing how functionality is hidden behind a full screen page.

Problem 2: Hidden Functionality

Many frequently used actions and pages, such as the placed assets list, are hidden behind multiple clicks. Users find this cumbersome and would greatly appreciate quicker access to these essential features, which would streamline their workflow and improve efficiency.

A gif showcasing screen obstruction.

Problem 3: Screen Obstruction

Many actions related to editing an asset obscure the main screen, making it difficult to see edits in real-time. Users are forced to repeatedly close and reopen the screen to check updates, which is frustrating and hampers the efficiency of making precise edits.

Problem 4: Lack of Common Industry Standard Tools

The lack of industry-standard tools typically found in editing software and apps poses challenges in creating visually appealing worlds. This limitation reduces usability and efficiency, constraining users' ability to achieve desired outcomes and detracting from the overall editing experience.

Problem 5: Editing Interruptions

Upon selecting an asset, the page closes to facilitate placement of the asset. However, if the user wishes to continue browsing assets, the table does not retain the user's last position leading to a repetitive experience.

Problem 6: Insufficient Help Content

Users find world-building challenging due to a lack of adequate training and help content. Many feel they have not received enough guidance and struggle to learn independently, highlighting a need for more comprehensive support and resources.

04

solution

A gif showcasing builder mode.

Builder Mode Initiated

Context

Introducing Builder Mode—a revolutionary feature update that transforms the world-editing experience. With Builder Mode, users can edit worlds infinitely faster than before, making the process smoother, more efficient, and incredibly enjoyable. This feature is designed to enhance usability and streamline workflows, ensuring that world editing becomes a fun and engaging activity.

Initial Problems

In the past, Topia lacked a specific mode for world building, leading to limited actions and no dedicated space for editing. Initial design attempts faced challenges due to the screen space occupied by video frames, especially considering that many of our users utilize Chromebooks.

After some back-and-forth, I realized it was unwise to try to cater to every use case on Topia simultaneously. Some users want to build worlds, others want to play games, and some want to socialize. The challenge arose from attempting to make everything accessible all the time. A shift in mentality led to the concept of ‘Modes’. This approach allows us to design the best experience for each mode by prioritizing the relevant parts of the app.

For instance, when a user intentionally turns on Builder Mode, we can assume their main priority is to edit and build worlds. Therefore, we prioritize this experience, reducing the UI elements associated with socialization and freeing up space to deliver a clear and user-friendly builder experience. To retain some aspect of socialization, we decided that entering Builder Mode would automatically switch users to audio-only mode. This disables video connections but still allows audio chat, eliminating the need to render UI for video frames.

A gif showing multi-asset editing.

Multi-asset editing

Select and edit multiple assets simultaneously.

A gif showcasing incognito mode.

Incognito editing

Edit privately with Incognito Mode, disconnecting from other users in the world.

A gif showing asset selection from the place assets drawer.

Easy asset selection

Directly select any asset from the list of placed assets in the drawer.

A gif showing the select drawer.

The Select Drawer

Access all actions conveniently without blocking your canvas.

A gif showing the builder mode layout with annotations referring to the accompanying text.
The Blueprints
1

Activate Builder Mode

Activate Builder Mode by clicking the builder toolbar icon.

2

Builder Toolbar

Access essential tools that appear when Builder Mode is enabled.

3

The Select Drawer

Opens when assets are selected, enabling actions on your selections.

The Toolbar

We knew we wanted to add new actions and we knew that these actions necessitated multi-asset functionality - in short, we needed a centralized place for these actions to reside—that's where the Builder Toolbar comes in.

Additonally, we enhanced efficiency by integrating keyboard shortcuts and hotkeys for all actions, ensuring a faster editing experience.

Select
Pan
Erase
Undo/Redo
Grid
Zoom-to-fit
Zoom In/Out
Incognito Mode
An image of the builder mode toolbar.
The Select Drawer

When you have an active selection, the Select Drawer appears, giving you easy access to various actions. The select drawer utilizes a tab mechanism to give you the options you need.

An image of the select drawer with the 'Design' tab selected.
Actions
Perform various actions on your selection, such as duplicating, erasing, aligning, distributing, or flipping it horizontally or vertically.
Transform
Modify the size, position, or orientation of your selection.
Asset Details
Easily identify the asset you're editing and quickly view its configurations without needing to navigate to the configuration tab.
Tab 1: Design
Customize your selection with new actions in the Design tab. Note that some behaviors are restricted when multiple assets are selected, as certain actions are not feasible due to technical limitations and resource constraints.
Tab 2: Configuration
If you have one asset selected, you can access the configuration tab and add a configuraiton to your asset. You can apply media to it, add an event to it, adjust the layering etc.
The problem
Before this redesign, all of these actions lived in a page that covered the screen (see problem 3 above for visuals). For some of these actions, this problem was merely just a sense of losing connection to the canvas and being brought away from the experience but for some other actions like layering, it is important to see the adjustments you are making as you make them to see if they look good. When this configuration setting was on a page - users would have to go in, tweak the layering, close the page and check to see if their update worked before repating the process until they got it right.

Migrating the configuration settings to a drawer from a page did not require a change to any of the functionality of these settings but it did pose a challenge around redesigning components so that they would fit in a drawer. The most challenging part was that most of these pages contained tables - considering this drawer is 350px in width, tables are not very user friendly. To solve this, I designed a new type of card that would contain the information displayed in a table.
An image of the select drawer with the 'Configuration' tab selected.An image of the media page in the configuration tab.An image of the links page in the configuration tab.
Challenges
Migrating the configuration settings to a drawer from a page did not require a change to any of the functionality of these settings but it did pose a challenge around redesigning components so that they would fit in a drawer. The most challenging part was that most of these pages contained tables - considering this drawer is 350px in width, tables are not very user friendly. To solve this, I designed a new type of card that would contain the information displayed in a table.
An image of a card variant containing an image.An image of a card variant without an image but containing a toggle.
Variants
The card component needed multiple variants, driven by the varying types of information displayed across different tables. Some tables included images, while others didn’t, and some featured toggles or other unique elements.
Structuring the card
I needed a way to display table data in a card format. The card was split into three sections: Section 1 for the name, description, and image; Section 2 for the main data in two-column rows; and Section 3 for table actions.

05

Launch Plan

What is it?

As a startup, we previously lacked formal procedures or documentation for launching new features beyond a standard QA process. Given the significance of this feature, I recognized the need for a structured launch plan. Although initially unsure of what this would entail, I began exploring and developing a comprehensive plan.

Goal of the launch plan

1. Generate excitement and anticipation for the new feature.
2. Keep our users well-informed about the updates, ensuring they are aware of changes before encountering them.
3. Provide resources and support to help users understand and seamlessly adopt the new changes, avoiding a steep learning curve.
4. Implement a plan to gather user feedback after the feature has been in use for a while to refine and improve the experience.

Try it

The Launch Plan

I decided to create a ‘Launch Plan’ checklist applicable to all future feature releases and updates. While not every feature will require the full checklist, it serves as a useful guide to determine necessary launch steps during development.

QA

1. QA Plan: Develop a detailed QA plan covering all testing aspects.
2. QA Execution: Complete QA to ensure the feature is ready for release.

Documentation

1. Documentation: Update all relevant help articles and guides to include information about the new feature.

User Support

1. Hubspot Help Desk: Update all Hubspot related content.
2. Training for Support Team: Conduct training sessions for support staff on the new feature.

Marketing

1. Release Notes: Prepare detailed release notes highlighting new features, changes, and bug fixes.
2. Marketing Content: Collaborate with the art team to update marketing materials.
3. Blog Article: Write and publish a blog post detailing the new feature.

Announcements

1. Communication to Enterprise: Announce the update to all enterprise customers via via call or email.
2. Customer Knowledge Transfer: Determine if dedicated training sessions are needed or if a mass email with a walkthrough video will suffice.

Feedback and Monitoring

1. Feedback Collection: Create and distribute surveys to gather user feedback on the new feature.

06

Learnings

Overview

This project was one of the most challenging I've taken on, but with big challenges come even bigger opportunities for growth. Working on a small team meant I had to wear multiple hats to see it through to completion. As a result, I faced obstacles that not only pushed me to refine my design skills but also helped me grow as a collaborative team member. Below are some of the key lessons I learned from this experience, and how they have shaped my approach to future projects.

Try it

Prioritisation of projects

This feature update primarily affects a specific user persona who doesn't use the feature much during the summer. We strategically decided to focus on updates benefiting the more active summer users first. The key takeaway here is to be mindful of timelines and user impact, proactively recommending development schedules based on business goals and other initiatives.

Creating an epic

This project significantly improved my process for creating epics in Jira. By breaking down the work into smaller, more manageable tickets, I made the workload more accessible for our engineering team. This approach streamlined development and ensured clearer progress tracking.

Need for iteration

In hindsight, I regret some of the styling choices I made for this feature. While initially satisfied, seeing it live revealed areas for improvement. This taught me the importance of continuous iteration, even when a solution seems complete. Iterative design ensures that the final product meets high standards and user expectations.

Pick Your Battles

Due to resource and time constraints, it was crucial to identify essential elements for the developed feature. Making strategic trade-offs ensured successful collaboration, balancing the delivery of a high-quality feature while maintaining the tech team's morale throughout the process.

Launch plan

Developing the launch plan for this feature underscored the importance of best practices for feature launches. This experience highlighted the need for a detailed and organized plan before release, considering user perspectives like: "As a user, I don't know how to do x with this feature - where can I find out how to do it?" This user-centric approach is crucial for a successful launch.

Communication Early and Often

While I generally uphold strong communication practices, large projects reveal the critical need for regular and early check-ins between product and tech teams. This ensures we are all aligned, using our time wisely, and avoiding any sprint planning surprises.

Next Project