Studio X: VR/AR Hub

Brand Identity | Creative Coaching

Studio X brand identity visual samples
Overview
Studio X is the University of Rochester's hub for Virtual Reality and Augmented Reality (VR/AR). I dreamed up their brand identity to encourage access to VR/AR education.

Impact
I increased engagement at VR/AR workshops by unifying Studio X's visual identity across marketing and social media.
I empowered the marketing team to streamline workflow and build design skills via one-on-one coaching sessions.
Role
Brand Identity Designer, Creative Coach

Timeline
9 months, August 2023 - April 2024

Tools
Figma, Adobe Illustrator
Pink to purple gradient divider bar
1. Research
Looking Back
Past designs by the Studio X team lacked consistency in values, wordmarks, colors, typography, and graphic elements.
Collection of past designs by the Studio X marketing team
Clarifying Values
7 Studio X teammates gathered to discuss and sort a deck of value cards, identifying 6 core values.
6 index cards, each with displaying a marker-written value: Welcoming, Futuristic, Playful, Imaginative, Experimental, Progressive

6 Core Values: Welcoming, Futuristic, Playful, Imaginative, Experimental, and Progressive.

Collecting Inspiration
Our team collaborated to create a mood board. Common trends included spatial geometry, vibrant colors, and inclusivity.
The team's visual mood board
Orange to pink gradient divider bar
2. Strategy
Dream Big!
The new brand identity for Studio X encourages access to VR/AR teaching and research.
Diagram explaining this project's why, how, and what. Why: Encourage access to VR/AR teaching and research. How: Inclusive and imaginative visual elements. What: Brand identity for Studio X
Blue to green gradient divider bar
3. Design & Iterate
Wordmark
My task was to enhance Studio X's existing wordmark.
Optimize Legibility
The original wordmark was difficult to read at small scales. I solved this by increasing stroke and defining size guidelines.
Studio X wordmark gif showing the old thin white text outline and the new thicket white text outline
Studio X wordmark clear space diagram. The clear space measurement is equal to the width of the X
Which Version Do I Use?
I resolved confusion by establishing version guidelines.
Wordmark guides for versions with and without subtext
Wordmark guides for versions that are outlined versus filled
Wordmark guides for versions that are 2 colors versus 1 color
Wordmark guides for versions that are best for dark backgrounds and light backgrounds
Brandmark
For special cases when the full wordmark doesn't fit, I simplified the wordmark into an eye-catching brandmark.
Favicon made from the wordmark's X, extruded with color gradients
Color
 I brought the palette to life by adjusting contrast plus adding green and orange transition colors.​​​​​​​​​​​​​​
Old and new color palettes
Depth with Gradients
I designed three gradient paths as a system for creating graphic elements with spatial depth.
The 3 gradient paths. Pink, Orange, Yellow. Blue, Green, Yellow. Blue, Purple, Pink.
Gradient don'ts. Avoid harsh gradients, instead use smooth gradients. Avoid muddy gradients, instead create vibrant gradients.
Typography
I chose Magallanes as our header for its playful curves and Proxima Nova as our body for its sleek legibility.​​​​​​​
Visual hierarchy of the header as magallanes bold, subheader as magallanes bold, and body as proxima nova regular
Experimental Effects
Extending and scaling characters allows for endless engaging headers
Typography effect reading "Beat Saber Battle 2024, Kick Off On November 11". Extended 0 filled with pink to orange gradient.
Text effect example reading "XR Research Expo" with the spaces inside the "R" and "O" extended and filled with green to blue gradients.
Modular X
I subdivided the wordmark’s “X” into a geometric modular system so anyone can easily design unified graphic elements.
Visual graphic of the X and the 3 modular parallelograms resulting from breaking it into modular parts.
Left image: colorful gradients building an X using the modular parts. Right image: Colorful gradient pattern made by stacking the smallest parallelogram modular part.
The Grid
I introduced a spatial grid texture by repeating the "X" and distorting its perspective.
3 examples of the grid, each with a different perspective distort and colored gradient.
Purple to blue gradient divider bar
4. Result
3... 2... 1... Action!
The brand identity is live across Studio X's signage, social media, website, and VR/AR user interfaces.
Studio X style guide slides laid out
College boy with tan skin, brown hair, and navy t-shirt uses an oculus VR headset in front of Studio X's glass windows and blue walls.
Instagram mockup showcasing the favicon profile picture, story icon covers, and a feed of graphics and photos of visitors using headsets.
Three Studio X name tag lanyards exemplifying the brand's typography, gradients, wordmark, and grid pattern.
Black bucket hat with Studio X brand mark centered.
XR Research Expo poster mockup in front of Studio X's glass entrance

Also check out . . .

Why Liking Queer Social Media Posts Matters
Psychology Research | UX Design
The Wild Center: Volunteer Program
UX Research | UX Design | Production
Danish Museum of Technology
Brand Identity
↑Back to Top