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:

Image alt tag

Meow Wolf Audience

  • Artists and art lovers

  • Outdoor enthusiasts

  • Travelers

  • Music enthusiasts

  • EDC fashion

  • Families

  • Groups celebrating special events

  • Date night for couples

Image alt tag

Interactive Objects

  • Bloop Card / Q-Pass

  • Monitors

  • Mirrors

  • Objects with double meanings

  • Character artifacts and clues

  • Slides

  • Sound booths

  • Newspaper posts

Image alt tag

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

Image alt tag

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

Meow Wolf

Early wireframe sketches on navigation and guiding the user through the HoloPrism experience.

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.

Meow Wolf

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
Meow Wolf

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

Meow Wolf

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.

Meow Wolf
Prototyping
Meow Wolf

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.

Meow Wolf

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.

Meow Wolf

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.

Meow Wolf

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.

Meow Wolf

On-boarding flow

Freedom & Control

Next, we added a skip button in our onboarding flow to give users freedom and control.

Meow Wolf

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.

Meow Wolf

Style guide that reflects Meow Wolf’s Convergence Station’s Brand

UI Iteration
Meow Wolf

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:

  1. Help button

  2. Camera

  3. Worlds of the Convergence.

Meow Wolf

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”.

Meow Wolf

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.

Meow Wolf

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.

Meow Wolf

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.