A spacial multiplayer operating system for creative work
Recently, I had the incredible opportunity to conceive and design a collaborative, infinite canvas-based operating system. This project took advantage of my strengths as a deep systems thinker, and gave me the chance to craft everything from the product architecture to the micro interactions and visual design aesthetic. I was very fortunate to be able to lead the product from its earliest conceptual phase, navigating ambiguity and distilling its core concepts to guide the team with clarity and vision.
The building blocks of Studio
The studio system architecture is made up of a few powerful building blocks each with their own views. All of the artifacts below can be displayed as icon, inline, or fullscreen view. Additionally, container based artifacts like folders and collections, can be display in canvas, grid or list view.
• Folder - a container used to manually group and organize content.
• Collection - a container used to automatically group or organize content based on a set of rules.
• Element - a piece of content. Elements can be displayed in icon, inline, and fullscreen view.
• Instance - a reference to an element, folder, or collection.
• Flow - a directional presentation block that can contain elements or instances.
• Input - a block used to import or display external content within Studio.
• Output - a block used to export content from studio to the web or other services.
Light and dark mode
The Studio design system utilizes Figma's new variable funtionality in order to create components in both light and dark mode. All variables are tokenized with semantic names that reference a set of primitive values.
In addition to light and dark mode, Studio has been designed to utilize a number of custom themes that help make each studio space feel unique. Themes can be neutral or full of character giving creatives the ability to choose how their work feels on the canvas.