SPECTRA STUDIO

Reimagining Projection Mapping

Team

Director of technology, new media artists

Toolkit

Figma
TouchDesigner

Context

PrimeFrame, a combination of hardware and software for large dynamic visual environments, was built to support Spectra Studio's clients' diverse range of needs, ranging from 15 channel domes to 10 ft video walls.

My role

I was tasked to redesign PrimeFrame in its entirety.

My impact

01

Simplified and connected PrimeFrame's information architecture

I simplified the PrimeFrame's information architecture while connecting the plug-ins to one another.

02

Established and built a design system from the ground-up

I built a scalable and reusable design system on Figma to establish brand and system cohesiveness.

Understanding the PrimeFrame system

In order to onboard myself into the projection mapping space, I conducted audits of the software, built site maps, and interacted with the system in real-time. I also met with my team to determine the priority level of redesigning each page.

Prototypes for visual & team understanding

I also created prototypes so that the entire team was on the same page. By showing a step by step flow as well as having the team interact with my designs, we were able to ideate quicker and identify any technical constraints.

Mid-fidelity prototype

Establishing a design system

I created Spectra's first-ever design system within Figma. I included colors, typography, logos, buttons, icons, and additional components to establish system cohesiveness, to create scalable designs, and to improve the user experience.

Typography

The redesigned experience

Status

"Status" allows users to view the status and health of their system. Cards were incorporated to maximize screen space.

Simulation

"Simulation" allows users to walkthrough a 3D simulation of their project. I added sort buttons and drop down menus to reduce perceived latency.

Calibration

"Calibration" allows users to adjust projection warping, blending, and masking. I maximized real estate and established cohesiveness.

Logs

"Logs" allow users to view logs from the system. I simplified the information that is shown on screen by incorporating sort and filters.

Learnings

01

Adapt to technical constraints

I learned TouchDesigner, the software PrimeFrame is built on, to understand how my designs would be built – this ultimately cut down implementation time.

02

Think systematically to design more efficiently

I learned to create site maps to identify similar patterns, relationships, and interactions that could be reused across the system.

Wanna take a look at my other projects?