Finding the drop off point

After reviewing the analytics, it became clear that step 2 was the biggest drop-off point. After running some tests here, I uncovered the following problems:

• Some of the fields were causing friction
• A lot of users do not understand what Topia is. Asking them to start with a form and no context made it hard to get buy-in
• Some of these users were probably just clicking through to this step to see what it entailed

Why were duplicate worlds being created?

Walking through the free flow myself, I noticed that the number of pagination dots did not match the number of steps. On step 2, the button was labelled “Next”, but that step was actually the last one before completion. Clicking “Next” completed the flow, meaning you could not go back.

This is bad UX for a few reasons:

• There was no confirmation screen before the flow completed
• A button labelled “Next” does not clearly signal the end of a flow
• The world URL you entered was locked in and could not be changed

After clicking “Next”, the confirmation screen loaded with a full page reload, which made it clear that something had happened. Pages do not reload when you are simply moving between steps. You then land on the following screen:

There are a couple of issues with this:

• The title is misleading. It gives the sense that your world was created.
• We do not show the URL anywhere. This is particularly troublesome for free worlds, which receive a randomly generated string appended to what the user entered, and that final URL is never shown to them.

The only way out or back was the “Back to Dashboard” button, and this is where it became clear what was happening. Users were arriving at this screen, feeling confused by the lack of confirmation, and then clicking “Back to Dashboard” because it sat where a back button usually sits. Once back in the dashboard, there was no indicator that the world had been created, no confirmation email was sent, and so the user would assume a bug and start the process again.

Unified the free and paid flows

To resolve the divergence between the free and paid flows, I unified them into a single path. Free and paid now walk the same four steps; the paid plan simply carries a conditional capacity section the free one does not need.

Form fields down from 7 to 3

Reduced the number of fields from 7 to 3 to cut the time needed to create a world.

The world URL field was also redesigned to be more intuitive. Before, users would enter a URL like https://topia.io/worldname. The rebuilt field shows the topia.io/ prefix inline, so users only need to enter the slug after the slash. It also detects malformed URLs and warns the user before they can submit.

Template step before the form, leading with something exciting

The hypothesis was that showing users some compelling templates before asking them to fill in the boring details would pique their interest and give a better sense of what’s possible in Topia.

Improving clarity and user confidence

A summary card on the right of the final step lays out the URL, plan, and template the user is about to commit to. Nothing is locked in until they explicitly click “Create world”.

The post-creation screen now states plainly that the world has been created. The full URL is shown and copyable, and a confirmation email goes out automatically, so the user knows the world exists and has an easy way back into it.

I also replaced the pagination dots with a named step indicator, so people can see at a glance where they are, where they have been, and what is left.

Move between proximity and a structured classroom without leaving the session

Topia already had Build Mode, where teachers leave the world view to edit the space. I extended that pattern into a full system of modes, keeping the world the same while changing how you use it.

• Explore Mode: the existing proximity-based world, unchanged.
• Build Mode: world editing for teachers preparing the space.
• Gallery Mode: a structured classroom view that replaces the world for everyone in the room when activated, with all students visible at once.

When a teacher activates Gallery Mode, the world transitions out of Explore for every user in the room at the same time, with avatars stepping out of the spatial world and into the classroom layout.

The first time a user activates Gallery Mode, they see a modal explaining what’s about to happen, with a checkbox to skip the message in future. This gives new users the context they need to understand the transition before it happens.

After that, activating Gallery Mode triggers a five-second countdown that’s visible to everyone in the world, not just the teacher who triggered it. If the switch was accidental, the teacher can cancel during the countdown. Otherwise, everyone gets the same warning at the same time, which prevents the transition from feeling jarring for the rest of the room.

A two-tier model that worked within the engineering constraints

The 12-publisher-per-stage cap and the 3-stage-per-client subscription limit shaped the model directly. In a class of 40 students spread across multiple stages, if a student on a fourth stage unmuted and spoke, some classmates would hear them and others wouldn’t. For teaching, that’s broken.

The two-tier model resolves it by giving the room a single Presenter stage that every client is guaranteed to be subscribed to:

• Presenters sit on a dedicated stage at the top, up to 12 at a time. They can speak and be heard by everyone in the room.
• Audience is every other student, visible in a grid below the Presenters, with no ability to unmute themselves. They can raise their hand to speak, and the teacher can promote them onto the Presenter stage.

Anyone who speaks is heard by every student, teachers can see every student on command, and students can’t unmute and speak over the teacher.

The tiers were originally called Presenter and Participant, but testing surfaced a clear problem with that split. Participant implied that these users could participate, when in fact they couldn’t do the one thing they’d assume participation meant, which was speak. New users would join, land in the Participant tier, find no way to unmute themselves, and assume something was broken.

I made three changes to close the gap:

• Renamed Participant to Audience. The new label described the role accurately: these users were in the room, seeing and hearing everything, but not part of the active speaking group. It set the correct expectation from the first look at the screen.
• Added status badges and helper text to each tier. The badges made the two roles visually distinct, and the helper text beside each section header explained what that tier could do (“Presenters can unmute and speak; they’re visible and audible to everyone in the session” / “Audience members cannot unmute.”). Users no longer had to infer their role from what wasn’t working.
• Rewrote the disabled-microphone tooltip. The v1 version simply said the mic was disabled while in the Participant tier, which named the state but didn’t tell the user how to change it. The new version explains that only Presenters can speak and that a raised hand is how you get promoted. It turned a dead-end message into a next-step instruction.

Two views inside Gallery Mode: gallery and presenter

Gallery Mode had to work for two different moments in a lesson. When a teacher is checking on the class or leading a discussion, they need to see every student at once. When they’re focused on a single speaker, whether that’s them presenting or a student answering a question, that person needs to be the visual centre of the room.

I designed two views that share the same two-tier structure but weight the layout differently.

• Gallery view is the default. Presenters sit in a row at the top, Audience fills the grid below, and every student is roughly the same size on screen. This is the view teachers use when the priority is visibility.

• Presenter view enlarges whoever is currently speaking, whether that’s a Presenter delivering a lesson or a user who’s been promoted to answer. The rest of the room is still visible but stacked around the featured speaker as smaller cells.

Teachers switch between the two views with a toggle in the toolbar. The switch is instant and only visible to the person who triggers it, so a teacher can move between checking the room and focusing on a speaker without disrupting anyone else.

A raise-hand-and-promote flow

For students in the Audience to participate, they raise their hand. The teacher sees the request and can promote them up to the Presenter stage, which keeps the model structured by default while still giving students a clear path to participate.

Initially, teachers could promote a student from their video tile or from the raised-hand queue. We tested it and found that opening the queue every time a hand went up was tedious, so I designed a raise-hand accordion that sits above the toolbar whenever hands are raised.

It shows up to 3 rows at a time, each with inline promote and lower buttons. If more than 3 students have their hands up, a fourth row reads “X more hands raised” with a button that opens the full queue.

Alongside the accordion, I added drag-and-drop between the Audience grid and the Presenter stage. Teachers also needed a way to reorganise the room more broadly: demoting a Presenter back to Audience, moving a student up without waiting for a raised hand, or shuffling who’s on stage mid-lesson.

Teachers needed more control over student behaviour

In live sessions, Topia’s emote system was sometimes disrupting structured teaching. I added an ‘Allow Emotes’ toggle in Gallery Mode, with clear visual indicators of the current state.

Designing inside the infrastructure constraints

The stage limits ruled out a flat everyone-sees-everyone gallery before I’d drawn anything. The two-tier model came from walking through audio routing with engineering at different class sizes. It wasn’t the design I’d have reached for, but it fit live teaching better than a flat gallery would have.

Building a grid that held up across screen sizes and pixel densities

Most students use Topia on Chromebooks, so the grid had to hold up across very different screens. The shipped grid sizes its cells by class size and viewport, with the active speaker featured. The hardest part was classes of 12 to 20, where neither a tight grid nor a generous one feels right.

Getting the mental model across

Gallery Mode inverts a convention: people expect a video call where anyone can speak, but here most users can’t unmute. A tooltip on the disabled mic wasn’t enough, and “Why can’t I speak?” kept coming up in interviews. The fix was layered: the role rename, section labels, clearer tooltip copy and a structure legible at a glance. I now build that scaffolding in from the start.