Project overview:
Microsoft created an immersive experience called The Kaleidoscope for DJ Martin Garrix’s LIFE = CRAZY book launch event in Amsterdam. In it, fans’ selfies were analyzed, classified, and tagged using AI technology. Cognitive Services compared the selfie with images in the photo archive and pulled up a variety of Garrix’s photos for the experience.
Plain Concepts was hired by the Microsoft Music team to design and develop the kiosk experience from the initial ideation stage to the final interface execution.
My role:
As UX lead at Plain Concepts, I was involved in the ideation process, wireframe design, creative direction, and managing relationships between the artist’s branding team, stakeholders, and other parties involved.
The final kaleidoscope experience
A user takes a selfie with a computer.
Microsoft AI analyzes the photo, tags it, and looks for the same tags from Martin Garrix’s photo archive.
Eight photos with common tags are sent to the Kaleidoscope tunnel while the user walks through.
At the tunnel exit, the user can look at the common tags and explore the photo archive.
Stakeholders
Microsoft Music — The Music team focuses on outreach in the entertainment industry. They are part of the Marketing team and look for opportunities to advertise Microsoft technology by partnering with different artists to enhance Microsoft visibility as a brand. They served as owner and funded the project.
Microsoft AI — They provided technical support and recommendations based on their thorough understanding of the latest AI technology.
Martin Garrix’s branding team — The artist’s team oversaw project proposals and provided feedback when appropriate. As the gatekeepers of the artist’s brand, they ensured the experience aligned with his vision.
Partners
Plain Concepts — A development company hired to help with the ideation process, design, and front and backend development of the final digital experience. I was the UX lead and oversaw the project from the ideation stage to final execution and testing.
Physical installation agency — Microsoft hired a third-party agency to help with the physical installations, as well as collaborate in the ideation process and provide insights on the physical constraints.
DISCOVERY
During the discovery phase, we conducted research and organized stakeholder and partner meetings to understand the premise of the project and get a full picture of the end-users’ and stakeholders’ needs.
A few key questions I started with:
· Who is Martin Garrix?
· What is in the LIFE = CRAZY book?
· What should we expect at the book launch?
· Who are the end-users in this project?
Who is Martin Garrix?
Martin Garrix is a DJ and music producer from the Netherlands. He released his first hit, Animals, in 2013 when he was 17 years old. He produces electronic music with a focus on dance. He was ranked Number 1 on DJ Mag’s Top 100 DJs list for three consecutive years, from 2016–2018. Between 2013 and 2018, Martin received 48 DJ and music award nominations, with 18 wins.
What is in the LIFE = CRAZY book?
It’s a 300-photo collection of Garrix’s up-close and personal moments with friends, family, other artists, and team members. The book allows fans a closer look at the life of the artist.
What to expect in the book launch?
The LIFE = CRAZY the book launch took place at X Bank in Amsterdam. It featured a live Q&A with Martin Garrix and his photographer, Louis van Baar, who shot all the photos for the book.
Who are the end-users in this project?
The target audience is Martin Garrix’s fans who are interested in getting a glimpse of Martin’s life. Primary user personas are:
Die-hard fan
Maria Lopez
Age: 20
Spending power: $$$$
· Student from Spain
· A fan since she was 15, when he released his first hit
· From a well-off family; she doesn’t have to worry about money and can afford traveling a few times a year for entertainment
· Has been to 12+ Martin Garrix concerts around Europe and other locations
Music lover
Jessica Lerby
Age: 18
Spending power: $$
· Student from Amsterdam
· Loves music in general
· A fan since 2015, when Martin won a few music awards
· From a working-class family, she saves up her own money to attend music events
· Has been to two Martin Garrix concerts in Amsterdam
Dance floor master
Justin Arsman
Age: 29
Spending power: $$$
· Marketing manager from Amsterdam
· Frequent bar hopper who owns the dance floor
· Likes Martin Garrix‘s music but just enjoys dancing in general
· Not an official fan but would go to music events to socialize and dance
· Has been to one Martin Garrix concert in Amsterdam
DEFINE THE PROBLEM
Use Microsoft AI technologies to create an immersive experience for the Martin Garrix LIFE = CRAZY book launch event at Amsterdam in October 2018.
The objective was to design and develop a fun experience for Martin Garrix’s fans (end-users), helping them feel closer to their idol by engaging in the different experiences supported by AI technologies.
IDEATE
During the ideation process, we conducted brainstorm sessions with internal and external teams to come up with ideas to further explore.
I led the internal brainstorming efforts with the Plain Concepts UX designers, engineers, and the project manager. Then the tech lead and I collaborated with the third-party agency to narrowed the ideas down to a few possible directions.
At this stage, we were sharing whiteboard drawings and sketches to keep the ideas fluid so we could keep building onto them with the greater teams.
Idea 1: Knowledge graph
Use connected knowledge to bring data together across both music and photo content, finding the connections that may not be immediately obvious.
Idea 2: Martin Garrix bot
Use Martin’s voice with a live size robot to guide the user through information booths.
Idea 3: Humming melodies
Users hum melodies or read lyrics that can then be mixed with a particular track in an AI recording booth.
After discussions and brainstorm sessions with the partner teams, we opted for the knowledge graph paired with a life-size kaleidoscope. A few factors that influenced our decision:
· We had access to the artist’s unpublished photo archive
· We could use AI to tag and analyze photos and showcase Microsoft technologies
· An exclusive fan experience allowed fans to explore the photo archive
· Time and technological constraints
· Physical location and venue constraints
· Installation and equipment availability
Refining the ideas
Once we confirmed the physical installation and AI technologies, I worked closely with our internal teams and collaborated with stakeholders and partners to create a few different proposals.
User flow 1
A. Introduction
The user walks up to a Microsoft Surface Hub and watches an introductory animation with thousands of images that weren’t included in the book.
B. Select images
Images from the archive float across the screen and the user selects the two they’re most drawn to.
C. The connection between two Images
The user sees their selected images and the connections the Vision API has found between them. The AI sources related images for the next round, allowing the user to go deeper into those themes.
D. Visualization of selected images
After the user finishes four rounds, they’re shown all the images they selected, along with a visualization of how their images are connected. They can send eight images to the physical kaleidoscope installation.
User flow 2
A. Introduction
The user walks up to a Microsoft Surface Hub and watches an introductory animation with thousands of images that weren’t included in the book.
B. Select location
A 3D globe will appear, highlighting places where Martin Garrix went. The user selects a location.
C. Finding images based on the user picture
The user takes a picture. The vision API identifies elements in this picture such as sentiment, number of people, or objects. The AI shows related images based on what was detected in the picture.
D. Visualization of selected images
After the user finishes, they see all the images found by the AI and how the images are connected. They can send eight images to the physical kaleidoscope installation.
The physical installation agency refined the experience to accommodate crowd control and estimate a timed user flow.
Physical experience visualized by team Plain Concepts.
Users line up at the entrance and take a photo at the photo booth. The vision API tags different elements found in the user’s photo. Then the AI looks for matching tags in Martin Garrix’s photo archive and sends the selected photos to the Kaleidoscope.
We considered several options for the setup at the entrance. For instance, we originally included props at a photo booth so the AI could pick up different graphic elements, but there was concern regarding the physical space. In the end, we decided to keep it simple and set up a Microsoft Surface Studio device at the entrance.
After the user exits the Kaleidoscope, computer stations allow them to further explore Martin’s photos and find out what they have in common.
PROTOTYPE
As we received consensus across teams on the overall physical experience, we started the prototyping process by designing out the wireframe.
The visual design was produced by the Plain Concepts team. I was responsible for ensuring we had all the assets and branding guidelines from the artist’s team, and communicating expectations across both internal and external teams. During the design process, I had daily meetings with the designer to oversee the design and provide UX/creative direction.
Fans enjoy themselves in the Kaleidoscope tunnel.
After exiting the Kaleidoscope, fans get to explore the AI and Martin's photo archive.
Users see a Microsoft Surface Studio with their entry photo. Users can use that computer to start exploring.
We wanted the user to have enough time to play with the connection diagram. To avoid a backup, we provided three computer stations at the exit.
RESULTS
I was proud to help make the Kaleidoscope possible. Although there were challenges during the project, we had a strong, resilient team and were able to work through them.
Those challenges included:
· Working with different teams across different time zones
· Limited availability from the artist’s team in the early planning process
· Changing scope mid-process
· Photo archive was smaller than initially planned
users at event
YouTube Views
out of 600+ MS videos
“ It was so nice to get to see unseen photos of my favorite artist. “