wave platform
ART DIRECTOR / UI DESIGN
CASE STUDY
What it Was
After years of creating each virtual performance as one off unique experiments, in regard to art and interaction design, after partnering with Meta, we finally got down to the business of creating Wave as a platform, with a set of consistent reoccurring interactions, persistent customizable avatars for users and all of the expected shell interface with settings, options, navigation and the like. The following will be primarily a reflection on the process of design for that framework.
​
Methodology for Making Ui Decisions
In the case of the Wave platform the product was to be delivered via the Meta Quest 3 and the next generation Meta Quest VR headset. The format capabilities and restrictions become the first step in defining what the user interface can be.
​
-
The visual format is similar to a 16:9 but includes peripheral vision and extends up and down with head movement.
-
Head movement should not be a necessary component of basic user interface interaction. Current VR headsets are relatively fatiguing. Weight is carried by the head, and controllers are held individually.
-
Visual clarity is highest at the centers of the headset lenses. This should be taken into account for the least eye strain on the user.
-
The input device is a hand held controller used to point toward interactions. The virtual distance of the interface has to be conceived of in 3D space. The distance and the size of something like a button or slider in 3D space is a major consideration in regard to scale, position and detail of elements.
​
A user should feel competent and feel confident that the technology works. All the more so with a comparatively new paradigm like VR.
If they have to search with their pointer, or ever accidentally hit the wrong button, this frames the entire experience negatively. If they can use their natural movements and intuition when engaging with the interface, the rest of the product benefits from this positive interaction.
Visual Language
INITIAL COLOR CONSIDERATIONS
There are infinite colors of course, but when color needs to convey specific information, there are few. The faster you need those colors to read, the more difference there needs to be between each color. The more difference needed between each color, the smaller the palette. I generally start with the idea that there are about eight colors that the average person can quickly distinguish for the sake of conveying information.
​​
BRAND IDENTITY
Wave's marketing material and public facing identity had up to this point had mostly been relying on a blue with pink accents, palette often with a light cosmic theme, using subtle stars, constellations and nebulae as dressing . So in the very first concept I took that wave identity to create a mockup of the settings screen . It would eventually be filled with a longer list of settings , but we started with the first options that would be implemented. The background was conceived to be a slowly rotating cluster of stars and subtle clouds that would keep the background feeling alive while not competing with the functional aspects of the Ui.
​
SHAPE CONSIDERATIONS
Through research and testing, it was discovered that people generally felt less comfortable in VR with sharp corners, so rounding corners was the impulse. Primary buttons which float freely in the center canvas would be pill shaped, with tabs would be rounded rectangles to differentiate. A set of consistent radii were determined as part of the initial rule set.
​
TYPOGRAPHY
Within the budget of the Wave platform, we were limited to one embedded font. The Wave logo is based on a modified version of Futura, and Futura having a broad base of weights, and being a timeless, geometric sans-serif font, it works at many different scales, it was a natural choice to serve as that single embedded font.
​
ICONOGRAPHY
As the primary audience for Wave was described as 'general entertainment' more than 'gamer' - and the product was meant to draw that audience toward purchasing the next generation of Meta headsets in that context i wanted to keep the iconography very familiar and particularly low cognitive load. The weight and shape language of Futura served as a guide for the visual language of the icons.
​
Here are those initial concepts:
​​​​
NEXT STEPS:
The reaction from Meta and Wave stakeholders was very positive about the concept, but there was, I believe, a bit of fatigue from the blue and pink color scheme that we had been using for several years at that point. So in my next iteration, i leaned into the colors of the Quest hardware as an inspiration while keeping the tonal feeling dark with glowing light functional elements. To keep loading time quick and performance fast, and lean into the clean look of the hardware, I also dropped the animated 'cosmic' dressing in the background while keeping a bit of the blue tone to keep it from feeling too stark. ​
​
This was well received and became the visual scheme going forward:
​
​
​
Employing and Expanding the Visual Paradigm in More Complex Scenarios
With the overall aesthetic, typography and initial design language established and approved in the simple scenario of the minimal Settings screen, the functional design for avatar customization was taking shape for the avatar customization interface. The avatar designs themselves were still in process, so we had to work ahead on the Ui framework. ​
​
As this this would be a significantly more complex interface than the basic Settings screen, it was a great place to test the visual design rules and see where they will need to be expanded and refined.
​
AVATAR CUSTOMIZATION INTERFACE
After discussion with the CCO and designers, the decision was made to go with a tile interface for avatar customization. It was a familiar enough interface to VR users in general and provides for large thumbnail images of avatar options. The functional needs changed as the avatar customization technical systems were developed, but from my perspective that was a good opportunity to test the the visual design rules as the systems and details of the system changed.
​
Here are some iterations on that interface:
​
There were many changes tested, based on a rarity system, the visualization changing back and forth from live 3d avatars vs prerendered avatars, the in game currency system, the relationships of earning and unlocking customization mechanisms and so on. The visual criteria held up through those changes and were fleshed out as necessary. While the technical and design spec firmed up, more tile based screens became part of the design.
​
For the sake of unifying the tile designs to include other item unlocks, i developed a consistent tile format that could cover all of the developing tile based screens that were meant to future proof continuing expansion .
​
UNIVERSAL TILE FORMAT GUIDE
​​
POP-UP FORMATS, ACTIVE AND PASSIVE
There were a variety of pop-ups formats designed Some that functioned as alerts with a timed presence and others that demanded input.
The button formats established in the early concepts here combined with the framing elements developed in the tile formats to fill out the full range of needs.
​
Result
By establishing the design language early and planning for flexibility, we were able to deploy the Ui in a polished state even as the design changed under it. The visual language satisfied all customers, and served all implementations with consistency, low load times, and with low cognitive load while garnering satisfaction and polish in terms of UX and a degree of polish that exceeded expectations .