Early wireframe sketches on navigation and guiding the user through the HoloPrism experience.
Jon San Agustin
Product Designer
Meow Wolf
Designing a 3D mobile experience for
Meow Wolf super fans.
My Role
UX Designer
Timeline
IxD | Spring 2022
Team Members
4 UX Designers
Tools
Figma, Notion, Google Workspace
Overview
Our client Meow Wolf tasked our team with developing an interactive product centered around an object or character from Meow Wolf’s Convergence Station in Denver, Colorado. An important requirement for this project was to create a product that could bridge across physical and digital worlds while driving audience engagement with the Meow Wolf brand.
Goals
Integrate the digital & physical world
Add value to products purchased in store
Extend the storyline as a memento that ties visitors back to exhibits
Drive traffic to the company website and exhibit all MeowWolf exhibits
Driving sales for the stores and developing a brand notoriety
The Problem
Although Meow Wolf exhibits are intentionally designed to keep users confused and entangled in mysterious storylines, some found the experience extremely frustrating. Unfortunately, these users went to review sites like Yelp, TripAdvisor, and Reddit to voice their frustrations.
Insights
We discovered that Meow Wolf's differentiator is their ability to offer immersive experiences, puzzling storylines, and extensive plots using a multi-universe. Holographic experiences are becoming more popular today, with brands like Adidas, Stella McCartney, and Coachella utilizing the medium to engage their audience creatively.
Our Solution
A physical product with a digital app component. The physical product is a mobile phone accessory that displays videos and images in a three-dimensional space. The digital app helps users to follow the complex storyline with hints displayed through reflected images, videos, or animations.
My Contribution
As the Lead UX Designer and Researcher on the team, I advocated for conducting user interviews and created wireframes, mid-fidelity mockups, and interactive prototypes for user feedback & testing.
Initial Research
To kick off our research efforts, we explored the industry and the latest immersive experiences to understand the landscape.
Emerging Trends
AR/VR
One of the most important trends is that AR/VR companies are working hard to democratize access to new technologies. Developers are trying to create experiences that anyone can access, even with older computers and mobile phones.
At the same time, device manufacturers are trying to make their products easier and less expensive.
Augmented Shopping
Augmented Shopping Will Become the Norm for Social Media Networks
Social shopping plus augmented reality makes one of the best combinations. And according to Grand View Research, a market research company, it is one of the fastest-growing markets. One of their reports estimates that augmented shopping will experience a CAGR of 47.1% from 2020 to 2027
Field Research
Our field research began with two team members hitting the road and taking a quick trip to Las Vegas, NV. They wanted to visit Meow Wolf to understand the brand and user perspective behind the experience.
What we discovered:
Meow Wolf Audience
Artists and art lovers
Outdoor enthusiasts
Travelers
Music enthusiasts
EDC fashion
Families
Groups celebrating special events
Date night for couples
Interactive Objects
Bloop Card / Q-Pass
Monitors
Mirrors
Objects with double meanings
Character artifacts and clues
Slides
Sound booths
Newspaper posts
Immersive Experiences
Puzzles and riddles
Multiple storylines and hidden connections
Disruptive announcements in Omega Mart
Hidden doors
Newspaper articles
Whiteboards with written messages
Signs with double meanings and metaphors
Immersive Environments & Services
Multiple Worlds
Dreamscapes
Caves
OMEGA Mart
Psychedelic
Giftshops
Cafe and Bar
Research Insights
Superfans
Remained in Meow Wolf exhibits for up to 9 hours just to figure out the mysterious storylines and puzzling plots
Guidance
Not everyone was enjoying the mysterious storylines and needed more guidance to enjoy the experience
Storytelling
Is Meow Wolf's superpower and could be extended into a digital product that assists frustrated users in a fun, unique way
Holographics
We came across brands like Adidas, Star Wars, and Coachella that are using holographic to drive storytelling and innovative experiences
Wireframe Sketches
I began the design process with low-fidelity sketches and wireframes to accelerate decision-making through visualization without losing time. My sketches were based on the initial user interviews, competitive analysis, and field research at Meow Wolf. We primarily focused on navigation and how we could assist users on their journey throughout the exhibit.
Early sketches experimenting with perspective, dimensions, and sustainable materials.
Product Sketches
Simultaneously we started sketching out what our holographic prism might look like and how it would connect to the mobile phone. It was important for us to think about what materials we could use in order to uphold MaCher’s values on sustainability.
User Journey
We used a storyboard to help us walk through the user journey and experience of someone who could use our app and HoloPrism to navigate the exhibit, better understand the storyline, and share their experience with friends.
Flow Chart
We used a flow chart to help us understand the complexity of different micro-interactions and the functionality of specific features we wanted to implement into our app.
Our flowchart included the following:
Exploring Convergence Station with a map that's connected to a live geolocator
Turning images or videos into 3D holograms
Taking a picture within the app
lastly, turning those personal images into a 3D hologram
Customer Journey
We created a customer journey map to understand better how customers find and interact with the Meow Wolf exhibit and discover opportunities for improvement. The map revealed many user problems and opportunities during the participation stage. Therefore, we paid particular attention to this stage during the design process.
Prototyping
Mid-Fidelity Prototype
We started building our mobile app with mid-fidelity wireframes centered around user onboarding, map navigation, and placement of the HoloPrism on the screen.
Holoprism Prototype
During the 3D modeling process, we realized our HoloPrism needed something to help it stay in place on the mobile phone screen. We continued experimenting with different bases, such as stand and suction cups. We also cut out a top for the prism. We wondered if a top covering to the prism might help to block light from interfering with the hologram. The top would also give us more space to design Meow Wolf branding elements without distracting or taking away from the reflected hologram in the center.
Here are a few takeaways we brought into our final design.
A simple, easy way for users to carry the HoloPrism around → keychain attachment
Use a prism-like shape for the stand to maintain cohesiveness for the overall shape.
Enlarge the prism shape
Add Meow Wolf and Convergence Station brand elements into the design.
Usability Testing
We tested our mid-fidelity prototype using a heuristic evaluation method and an open feedback model from our users.
Evolution of Map
Map Navigation
Our old map was linear, so we re-designed the map to be more exploratory and reflect what you would experience at the convergent station.
Error message when out of range
Error Message
We designed an error screen to inform users of potential issues when rendering a 3D hologram, and this is due to any internet issues a user may encounter.
On-boarding flow
Freedom & Control
Next, we added a skip button in our onboarding flow to give users freedom and control.
Prism moved to access UI
Holoprism Placement
Lastly, we moved the hologram up toward the top of the screen so that the user could select additional videos and control it while viewing a 3D hologram.
Style Guide
We created a style guide for brand identity and consistency, including typography, colors, and UI elements. A lot of the design elements were inspired and borrowed from the Convergence Station Quantum Transportation website.
Style guide that reflects Meow Wolf’s Convergence Station’s Brand
UI Iteration
On-boarding
As soon as the user opens the app, they are greeted by Superconductor General Oleander. A short tutorial explains the three main features of the app:
Help button
Camera
Worlds of the Convergence.
Map Navigation
A map of the Convergence provides an overview of the four alien worlds that the user can interact with. It is also the Home page of the app. Potentially the map could enable a live GPS feature to unlock “holographic memories”.
Stored Memories & Hints
Once the user opens one of the worlds, they get a page containing a short description of the world as well as a collection of holographic experiences. These serve as an extension to the Convergence Station experience and provide hints for people who are stuck.
Hologram
Once users discover a memory, they can watch a projection on their Holographic Prism device. This interaction starts with a calibration process to ensure that the prism is in the right position. Then, a new unlocked memory starts playing.
Holo Filter
Holo camera? You heard us right! With this camera, you can create your own convergence memories and share them with friends! After you take a picture, you can do a few things: share it right away with friends on your favorite social media, view all photos, or you can turn it into a hologram! Just click on a filter icon and view your photo in three-dimensional space!
Next Steps
Multiple language options and integrations. From the early stages of our research, we noticed that Meow Wolf has a diverse fan base, including people from other countries. Developing multiple language options will improve the experience of people who don’t speak English and bring even more customers in.
Social network. When we developed our camera filter feature, our main intention was for people to share pictures with their friends. A social network can make it easy for Meow Wolf fans to share their experiences and get answers to any questions they might have.
Convergence station photo filters. Ideally, we want to launch new filters regularly to keep users engaged. In addition to the previous point, this feature will help develop brand notoriety.
Air Tag to improve navigation. Many guests mentioned that it was easy to get lost in the exhibition. Our team wants to make this experience as enjoyable as possible, so we could offer Air Tags to those who need them.