Early wireframe sketches on navigation and guiding the user through the HoloPrism experience.
Designing a 3D mobile experience for
Meow Wolf super fans.
IxD | Spring 2022
4 UX Designers
Figma, Notion, Google Workspace
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.
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
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.
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.
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.
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.
To kick off our research efforts, we explored the industry and the latest immersive experiences to understand the landscape.
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 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
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
Groups celebrating special events
Date night for couples
Bloop Card / Q-Pass
Objects with double meanings
Character artifacts and clues
Puzzles and riddles
Multiple storylines and hidden connections
Disruptive announcements in Omega Mart
Whiteboards with written messages
Signs with double meanings and metaphors
Immersive Environments & Services
Cafe and Bar
Remained in Meow Wolf exhibits for up to 9 hours just to figure out the mysterious storylines and puzzling plots
Not everyone was enjoying the mysterious storylines and needed more guidance to enjoy the experience
Is Meow Wolf's superpower and could be extended into a digital product that assists frustrated users in a fun, unique way
We came across brands like Adidas, Star Wars, and Coachella that are using holographic to drive storytelling and innovative experiences
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.
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.
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
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.
We started building our mobile app with mid-fidelity wireframes centered around user onboarding, map navigation, and placement of the HoloPrism on the screen.
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.
We tested our mid-fidelity prototype using a heuristic evaluation method and an open feedback model from our users.
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.
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.
Freedom & Control
Next, we added a skip button in our onboarding flow to give users freedom and control.
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.
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.
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:
Worlds of the Convergence.
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.
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 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!
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.