h2 { }
Meow Wolf Digital App and HoloPrism

Meow Wolf Digital App and HoloPrism

City

Tags
Design ResearchUX DesignMobile DesignVisual DesignVisual Identity

Design Challenge:

For this project, we were tasked with developing an interactive product that centered around an object or character from Meow Wolf’s Convergence Station in Denver, Colorado. An important requirement within the brief was to create a product that could bridge across physical and digital worlds while driving audience engagement with the brand. The project was an academic project in collaboration with Meow Wolf and MaCher.

Role:

User Research, UX Design, Product Design, UI Visual Design System

Year:

Interaction Design Studio II Spring 2022

Project Team:

Chrissy Stevens, Miranda White, Yena Kim, Masha Volodkina, and Jonathan San Augustin

image

Timeline ⏱️

Week 01
Week 02
Week 03
Week 04
Week 05 - 06
Week 07 - 08
📝
🔎
🧩
♟️
🎨
🚀
Stakeholder Interviews
Field Research
Define Problem Brainstorm
Wireframes Lo Fidelity UI & Product Sketches
Heuristic Evaluation & Reiterate
Hi-Fidelity Designs & Final 3D Render

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 💡

  • Meow Wolf’s niche amongst other immersive experiences is their puzzling storylines.
  • Unlike many other immersive experiences, Meow Wolf super fans will spend up to ten hours in an exhibit (Convergence Station, Omega Mart, House of Eternal Return)
  • Holographic experiences are becoming more popularized today with brands like Adidas, Stella McCartney, and Coachella using the medium to creatively engage their audience

Solution ⚡

A Meow Wolf HoloPrism physical product with an accompanying digital app. 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 and Easter eggs displayed through reflected images, videos, or animations from a mobile screen. Additionally, users will be able to take photos within the app and display them as a hologram to extend their experience at the exhibit.

image

Field Research

Myself and teammate Miranda White headed to Las Vegas to get an idea of the Meow Wolf Experience first hand.

Miranda White and Chrissy Stevens Area 15 Las Vegas
Miranda White and Chrissy Stevens Area 15 Las Vegas

P.O.E.M.S Framework

We used a P.O.E.M.S. (people, objects, environments, messages, and services) research framework to organize what we discovered in the Omega Mart as well as what we researched online about the Convergent Station exhibit.

image

🗣️ People

The people we observed and spoke with were extremely diverse in their background and interests. We met artists, art lovers, outdoor travel enthusiasts, couples on date night, families, and groups celebrating special events.

💬 Messages

Visitors could engage with puzzles and riddles that were intentionally woven throughout the exhibit. Announcements over TV screens, newspaper articles, and signs with double meanings provided clues to multiple storylines unfolding simultaneously.

🪞 Objects

Bloop Cards or Q-Passes allowed visitors to unlock interactive elements while monitors displaying clues and hints to a mysterious storyline attendees were encouraged to interact with. Certain objects had double meanings or served as character artifacts and clues.

🧞‍♀️ Services

Staff members played the roles of actors in the story line, adding to the immersive nature of the experience. Multiple gifts shops and even a Meow Wolf bar were offered as additional services.

🏔️ Environments

Visitors could explore caves, multiple worlds, parallel universes, alternate realities, and psychedelic dreamscapes adding to the surreal atmosphere. The starting point of the experience merged a weird grocery shopping experience with a gift shop.

Interactive augmented reality mirrors to engage visitors with oddly named products and metaphors.
Interactive augmented reality mirrors to engage visitors with oddly named products and metaphors.
Vintage computer interface with a blog from a missing character.
Vintage computer interface with a blog from a missing character.

Online Reviews

Although Meow Wolf was a huge success for its “superfans” there were many others who had become confused or frustrated during their experience at the exhibits.

image
image

Key Research Takeaways

🦸‍♀️
01. Superfans

Superfans remained in Meow Wolf exhibits for up to 9 hours just to figure out the mysterious storylines and puzzling plots

😡
02. Frustrations

Not everyone was enjoying the mysterious storylines and needed more guidance in order to enjoy the experience

📖
03. Storytelling

Storytelling is Meow Wolf’s super power and could be extended into a digital product that assists frustrated users in a fun unique way

04. Holographic Opportunities

Secondary research examples of large brands like Adidas, Star Wars, and Coachella  using holographics to drive innovative experiences

Wireframe Sketches

We started to explore our digital experience by sketching out wireframes. A big focus was on navigation and how we could assist users on their journey through the exhibit.

image
image
image
image

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

Product Sketches

Simultaneously we started sketching out what our holographic prism might look like and how it would connect onto 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.

image
image

Early sketches experimenting with perspective, dimensions, and sustainable materials.

image
image

A keychain proposed as a secondary use case and exploded view of the product.

HoloPrism emotion sketch.
HoloPrism emotion sketch.

HoloPrism Prototype

We also built a prototype to test with images and videos. A huge breakthrough happened while working with our prototype. We still wanted to figure out a way to extend the Meow Wolf brand experience outside of the exhibit. Using our prototype, we tested creating a holographic with one of our own personal photos and squared template on the phone. Surprisingly, it worked! It was through this experimentation we decided to add the in app camera feature where users could create a holographic reflected image through their own personal photos.

image
image
Images of prototype experimenting with stand shapes to hold the HoloPrism in place.
Images of prototype experimenting with stand shapes to hold the HoloPrism in place.

Storyboard and User Journey

We used a storyboard to help us walk through the user journey and experience of someone who might be able to use our app and HoloPrism to navigate the exhibit, better understand the storyline, and share their experience with friends.

Storyboard sketches by team member Yena Kim.
Storyboard sketches by team member Yena Kim.
User Journey Map
User Journey Map

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.

  • Exploring Convergence Station with a map that’s connected to a live geolocator
  • Listen to characters from specific worlds share clues and hints to navigate the exhibit
  • Taking a picture within the app
  • Turning images or videos into 3D holograms
Flow Chart
Flow Chart

Low Fidelity Wireframes

We started building the mobile app with low fidelity wireframes that centered around user onboarding, navigating the map, and placing the HoloPrism on the screen correctly.

Team collaboration of early low fidelity wireframes building user flows for onboarding, navigating the exhibit through a digital map, and viewing personal images using the HoloPrism.
Team collaboration of early low fidelity wireframes building user flows for onboarding, navigating the exhibit through a digital map, and viewing personal images using the HoloPrism.

User Testing Insights

We tested our low-fidelity wireframes with fellow classmates through a heuristic evaluation and open feedback model.

01. Map Navigation

While watching and listening to users explore the map we were reminded of the nature of Meow Wolf experiences. Initially we had our map in a linear structure however users reminded us that the Meow Wolf exhibit is non-linear. You might find yourself in a different world through a secret door and it was important to reflect that in the navigation tool we were creating.

Changes made on the main map after user testing. Map design by Masha Voldkina.
Changes made on the main map after user testing. Map design by Masha Voldkina.

02. Error Message

Another point user’s brought up was the possibility that they could lose service or wifi inside the exhibit. We realized we needed to come up with some sort of error page for when things went wrong. We wanted to have fun with error page and keep the Meow Wolf tone in our messaging.

Implementing a stylized error message if service is lost while using app.
Implementing a stylized error message if service is lost while using app.

03. HoloPrism Placement

Lastly, during testing multiple users asked if the placement of the HoloPrism had to be at the center of the screen. Additionally they wanted more cues to help them navigate their way home.

Adjusting the HoloPrism placement to the top of the screen to shuffle through character library.
Adjusting the HoloPrism placement to the top of the screen to shuffle through character library.

Style Guide

As we were making changes to the UI, I created a style guide to help maintain the Meow Wolf brand identity and consistency throughout the design. The style guide was inspired by the Convergence Station Quantum Transportation website.

UI style guide for mobile app
UI style guide for mobile app

Product Design Materials

For the product materials of the HoloPrism we proposed using polylactic acid and polypropylene. Polylactic acid is a plastic made from starch such as corn and rice. We proposed biodegradable and recyclable materials in order to keep our product as environmentally sustainable as possible.

Exploded view of HoloPrism 3D render.
Exploded view of HoloPrism 3D render.

Final Digital Product Experience

Our team collaborated through multiple iterations to achieve our final interface design and digital product.

Onboarding

As soon as the user opens the app, they are greeted by Superconductor General Oleander. A short tutorial explains the 3 main features of the app: help button, camera, and the Convergence Station worlds.

image

Map

A map of the Convergence Station provides an overview of the 4 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 special holographic memories through the HoloPrism to help guide the user.

image

Stored Memories and Hints

Once the user opens one of the worlds they can see a short description of the world along with a collection of characters that share their “memories”. We placed a memory reliability scale to add an element of gamification to the experience.

Unlocking a character’s memory to watch a video animation projected as a hologram by placing the HoloPrism on the screen. The interaction begins with a calibration process to ensure the prism is positioned correctly for optimal viewing.

image

HoloPrism Filter

Once users unlock a character’s memory they can watch it projected as a hologram by placing their HoloPrism on the screen. The interaction begins with a calibration process to ensure the prism is positioned correctly for optimal viewing.

image

Reflection

Multiple Language Options and Integrations

From the early stages of our research we noticed Meow Wolf’s audience was extremely diverse and included people from all around the world. Developing a way to include multiple different language options could improve the experience and help to remove the language barrier for many non native speakers who want to engage with Meow Wolf’s fascinating storylines.

Social Network

Our main intention for developing a camera filter was for users to share their Meow Wolf photos and videos with friends. We thought about what customized Meow Wolf filters might look like inside the app as well as a blogging space for users to share their experiences and connect with other Meow Wolf superfans.

HoloPrism Production Realities

Although the Meow Wolf branding stands out well on the HoloPrism we received feedback that the lettering could be extremely hard to execute and go through production on a large scale. Additional prototyping and user testing on the HoloPrism would be necessary to make the production feasible.

Personal Growth

Looking back this is probably my favorite project to date that I have worked on. I learned just how much I enjoy working with art exhibits and storytelling. It was an honor to work with Meow Wolf and forced me to really think outside of the box when searching for solutions. Initially “marrying the physical and digital worlds” was a confusing part of the design brief. After some practice I really came to enjoy the process of envisioning an experience across multiple mediums. I built new skills through exploring the brand in multiple contexts and mediums. The project taught me new ways of thinking and opened my eyes to a career path in the immersive art experience space. Thanks for everything Meow Wolf & MaCher!