Before I write about the experience of designing the user interface for Flipside I need to acknowledge our whole team because feedback, opinions, and ideas come from everyone. My job is collect them all and distill them into a UI that we can all feel proud of. Let’s get into it.

The Information Architecture

The UI for Flipside started with the application’s information architecture. We locked down what features were included in our initial release of Flipside. We represented the information architecture as UI flows. I adapted the process from Ryan Singer’s “A shorthand for designing UI flows.”

Understanding the Flipside User Flow

Organizing the Menu

The information architecture was organized into three menus. Our primary or main menu, a secondary menu, and finally the quick menu.

The Main Menu

This menu focuses on the core modes of the application which are recording, character selection, set selection, set building, and collaboration.

Secondary Menus

Secondary menus are related to the main menu and they lead the creator to the apps core features.

Quick Menu

The elements of the app that need to be at the fingertips of the creator at all times make up the quick menu. Right now, this includes our puppet tool and handheld camera.

Our criteria for the UI

Before any prototyping work was started we developed a set of objectives that the UI needed to meet.

1: The UI must facilitate professional workflow.

Creators have different processes and workflows and our UI needs to accommodate multiple approaches to solving the same problem.

2: Reduce physical strain and fatigue.

Having a UI that floats and can be positioned anywhere allows creators to place the UI where it is most comfortable.

3: Grids are your friend.

The web has brought us grids, pagination, tabs, and other structural UI innovations. We looked to the these conventions and brought them to core of UI.

4: Hands not lasers

Virtual reality is a physical computing medium. We understand that hand presence will only improve and we choose to power our UI in a way that fits with the future of the medium.

5: One-handed use and Accessibility

Based on work we had done with the Canadian Museum of Human Rights we become more aware of accessibility and UI in virtual reality. These learnings were considered as we developed our UI for Flipside.

Getting away from Paper and into VR

Unity is a great game engine and most developers I know use it to prototype ideas all the time. Sometimes Unity is overkill. At times, you want to quickly create 3D concepts in VR to test ideas without writing code. As soon as Tilt Brush was released, I used it to create VR interfaces and concepts. When designing in VR you free up a significant amount of cognitive load by not having to visualize 3D concepts, like UI, in your head. Tilt brush worked great but it had too many features that were designed for making playful paintings and I wanted something more simple, faster, and devoted to the task of designing prototypes. Oculus Medium and Masterpiece VR allows me to sculpt and draw as well. The toolsets are more professional but I still felt that I didn’t need all the artist features to do the job I wanted to do. Don’t get me wrong, I love these apps, but when “when all you have is a hammer, everything looks like a nail.”

Enter Sketchbox

Before I talk about Sketchbox, which was the tool we used to prototype our UI, I need to disclose that both Flipside and Sketchbox are Boost VC companies. We didn’t know that before we selected Sketchbox as our prototyping tool of choice. We choose the software because it did what we needed it to do, at least mostly. Now that I’ve disclosed this, let’s move on.

I actually discovered Sketchbox by searching Steam for every “Software” and “VR” title. Over the course of a few hours and a lot app testing I decided to give Sketchbox a try. By the way, I recommend everyone doing this. There are some really cool apps out there that are not getting the attention they deserve. I immediately gravitated to the approach behind Sketchbox. The app provided me with simple 2D primitives, grids, and simple tools that quickly had me creating UI prototypes. I was using a very early version of Sketchbox and they worked with me to implement new features and improvements to support my design process. Today’s version of the app is much more feature complete and it’s will be a big player in the prototyping space.

Using Sketchbox to prototype our UI

Roleplaying and early testing

Another nice thing about Sketchbox was the ability to roleplay inside the app. We imagined what the experience would be like before writing any code by getting into a sketch and roleplaying with the interface. This is another advantage of designing in VR vs in a 3D modelling tool or using pen and paper.

From Prototype to fully realized design.

After spending many hours creating interface designs, sharing them with our development and art team and role playing within the application the art and development team took over and implemented the palette interface that we have adopted.

Final palette design

This was the first time we used a professional VR application as part of our workflow and we continue to use Sketchbox as we continue to iterate on our UI and user flow. We are working towards a February Early Access release and we continue to work with our Alpha testers to make improvements. We are excited to see what our creator do with Flipside. Sign up for early access and show us what you can make!