← Work

Ravel

Designing for 2D and 3D at once

ClientThe New Base
RoleProduct Design
Year2021–2022
StackProduct Design · VR · Web3
01 · It starts with a sitemap

Before a single screen, the whole platform gets mapped: what exists, what it connects to, and what a person is trying to do when they reach it. In a spatial product the sitemap does double duty — it describes both the navigation and the architecture of the space itself.

Ravel — It starts with a sitemap
02 · Wireframing in greyscale

Everything gets built in greyscale first. Strip the colour and the brand out and the structure has nowhere to hide — if a flow only works once it is styled, it does not work.

Ravel — Wireframing in greyscale
03 · Preliminary designs for testing

The first designed pass exists to be tested, not admired. Room panels, organisation switching, and space browsing were built out far enough to put in front of people and watch them fail.

Ravel — Preliminary designs for testing
Ravel — Preliminary designs for testing
04 · Basic flow testing

Testing the core loop: get in, find your people, bring something with you, present it. Each step was run until the friction moved somewhere new.

Ravel — Basic flow testing
Ravel — Basic flow testing
05 · How does this translate to 3D

A menu on a screen is a menu. A menu in a room is furniture. Object manipulation, transform handles, and the radial controller menu all had to be readable at arm’s length, in headset, without a cursor to hover.

Ravel — How does this translate to 3D
Ravel — How does this translate to 3D
Ravel — How does this translate to 3D
Ravel — How does this translate to 3D
06 · Visualising the functionality tree

The whole functionality tree lived in Miro and FigJam as a development handbook — one shared surface the design and engineering sides could both point at. Most miscommunication on a spatial product comes from two people describing the same interaction in different vocabularies. A diagram everyone can edit removes the argument.

Ravel — Visualising the functionality tree
Ravel — Visualising the functionality tree