An immersive, interactive gaming experience for attendees at the NXNE music festival.

6 min read

UX DESIGN

GAMIFICATION

PROCESS HIGHLIGHTS

Design Challenges and overview responsibilities

Challenge

Design a gamified experience on the NXNE app that will engage festival attendees to visit partnered local vendors around the city of Toronto.

Opportunity

Create an interactive gamified experience for attendees of the NXNE music festival to enhance user engagement and achieve business goals.

Duration

November - December 2023

Client

NXNE (North by North East)

Tools

Figma, Figjam, Trello, Spline

PROCESS HIGHLIGHTS

Our Vision

To enhance the NXNE experience, our vision was to create an interactive, gamified experience that encourages attendees to explore vendor spaces, engage with the NXNE app, and discover new artists and local businesses. Our team invisioned a game in which users will have to collect music samples (bass, vocals, drums, keys, chords) by scanning QR codes from different local vendors to complete a mystery soundtrack. Through immersive challenges, rewards, and real-time app integration, we aim to drive foot traffic, foster community interaction, and elevate the festival atmosphere, all while enriching the enjoyment of music and culture.

PROCESS HIGHLIGHTS

The Design Process

Week 1-2

Discovery

  • Project Introduction

  • Meet the team

  • Understand business goals

  • Conduct competitive analysis

  • Create user persona

1

Week 3-4

Strategy

  • Define core game mechanics that aligned with user goals

  • Draft user flow

  • Develop gamification framework (badges, levels, etc)

2

Week 5-6

Design

  • Design wireframes

  • Incorporate gamification elements to UI

  • Refine visual hierarchy

  • Create reward visualization concepts

3

Week 6-7

Finalization

  • Finalize wireframes and prototyping

  • Prepare presentation to stakeholders

  • Document gamification rationale

4

DISCOVERY

Business Goals

Our team was tasked with developing an innovative gamification strategy for a premier music festival to transform attendee engagement while driving meaningful business outcomes. This multifaceted initiative addressed two primary objectives:


  1. Enhancing the overall festival experience through interactive gameplay elements

  2. Strategically increasing foot traffic to partner vendors throughout the venue.


By creating an engaging gamified layer to the traditional festival experience, we aimed to transform passive attendees into active participants while simultaneously addressing key business metrics that would ensure continued growth and partnership opportunities for our client.


DISCOVERY

Competitive Analysis

To understand the competitive market of Toronto's music festival scene, our team created a competitive analysis to take a closer look at the target audiences, strengths, weaknesses, and if other festivals have a gamified experience. By mapping these competitive insights against our client's unique assets and objectives, we identified precise opportunities to differentiate our solution while addressing proven attendee preferences and behaviours.

NXNE

Toronto Jazz Festival

Luminato

Name:

Overview:

North by Northeast (NXNE) is a music festival that takes place annually in Toronto and offers a wide range of emerging and upcoming artists across various genres.

The Toronto Jazz Festival is an annual music festival held in Toronto, Canada. The festival is dedicated to celebrating jazz music and typically features a diverse lineup of jazz musicians, including both established artists and emerging talents.

Luminato Festival Toronto is a music festival that showcases local artists and talent. The festival includes music, art, installations, films, and more.

Target Audience:

Adults between the ages 19-35

Adults between the ages 26-70

Adults between the ages 20-45

Strengths:

Weaknesses:

Existing Gamification Experience?

Diverse lineup, urban location, cultural significance, unique experience

Community engagement, large target audience, rich lineup, cultural impact

Variety of art forms, cultural diversity, innovation and creativity


Diverse lineup, urban location, cultural significance, unique experience

Diverse lineup, urban location, cultural significance, unique experience

Diverse lineup, urban location, cultural significance, unique experience

DISCOVERY

User Persona

We wanted to create a user persona to embody the ideal NXNE music festival attendee to understand our target users. Our aim is to represent the user's preferences, pain points, and behaviours, allowing for a more focused and effective user experience.

Mia (She/Her)


Connects with people within her networking circle and asks them if they want to check out a live concert or music festival


Connects with her co-workers to check out new locations in the city

Searches for new places to discover through social media platforms like Instagram, TikTok, and Facebook

MOTIVATIONS

BEHAVIOURS

Age: 23

Location: Toronto ON

Occupation: Record Store Sales Associate

ABOUT

BIO

Mia is passionate about music and loves to go to concerts and music festivals during her free time. Kayla loves meeting like-minded individuals, but has difficulty maintaining the connections outside of concerts and festivals. She wants to start checking out new locations in the city with her new friends.

GOALS

Discover new music

Discover new places in Toronto

Meet more music lovers

FRUSTRATIONS

Struggles to maintain friendships

Has a hard time finding cool places to visit in Toronto to maintain friendships

Difficulty convinsing her music-loving friends to hang out outside of a concert or festival

Interested in checking-out new places, especially if it correlates to music or meeting like-minded individuals

Extroverted personality and enjoys meeting & connecting with new people

Enjoys live music

STRATEGY

Ideation

After our discover phase, we believed creating a baseline of the game seemed appropriate and logical. Through this ideation process, we brainstormed and established elements, features, and characteristics of what makes a good game. This phase got a little messy, but it was a crucial step to understanding the core game mechanics to create an engaging experience that aligns with business values.

STRATEGY

User Flow

We created a user flow to map out how our ideal game user would navigate through the interactive game. We wanted to understand every decision point and interaction users would face while playing the game. This step allowed us to understand the user journey and the ideal pages we will need to design in our sketches/lo-fidelity wireframes.

DESIGN

Wireframe Sketches

The sketches below are some of our initial thought processes regarding our goals for the game. The low-fidelity sketch designs provided us with the first glimpse of how our game could potentially work, with all the key functionalities implemented.

DESIGN

High-Fidelity Wireframes

Although we were constantly making changes to the UI, we finally found the perfect balance of functionality, interactive, and aesthetic. We incorporated colours and typography that aligned with NXNE's branding. Our inspiration came from cyberpunk aesthetic, combining dark mode with pink to balance visual hierarchy while being easy on the users eyes.

Melody Quest Prototype

DESIGN

View Prototype

Within 7 weeks, we were able to prototype and deliver a gamified experience for our client. We wanted to focus on creating a smooth and interactive experience for our users. Our UI design was inspired by the "cyberpunk" aesthetic, as it combines bold neon visuals, high-tech feel, and an immersive experience.


Click the button below to interact with our high-fidelity prototype created in Figma.

REFLECTIONS

Post Design Outcome

Takeaways

  • Incentives must be meaningful to users

  • Balance functionality with entertainment

  • Design feedback is crucial

Next Steps

  • Add more wireframes and focus on prototyping

  • Brainstorm incentives to engage users to play

  • Gather further feedback

  • Conduct usability testing

DESIGN

High-Fidelity Wireframes

Although we were constantly making changes to the UI, we finally found the perfect balance of functionality, interactive, and aesthetic. We incorporated colours and typography that aligned with NXNE's branding. Our inspiration came from cyberpunk aesthetic, combining dark mode with pink to balance visual hierarchy while being easy on the users eyes.