Case Study

NaviCon

A Landmark-Based Navigation App for Pop-Culture Conventions

Project Overview

NaviCon is an indoor navigation app for pop-culture conventions designed to enhance attendees’ wayfinding abilities by prioritizing landmarks at directional changes while en route to their destination.

Duration
10 weeks

Tools
Figma, FigJam

Role
UI/UX Designer, UX Researcher

Project
Individual, Academic

Design Process

I used the double diamond design thinking process to solve this challenge.

Research and Discovery

  • Problem Space

  • Secondary Research

  • User Interviews

Define

  • How might We

  • User Persona

  • User Journey

Ideate

  • Technologies

  • App functionalities

  • Task Flow

  • Sketching and Wireframing

Prototype

  • User testing

  • Visual Identity

  • Hi-Fi Prototype

  • UI Library

Research and Discovery

The Problem

Navigating pop-culture convention centers is a daunting task that impacts visitors' enjoyment and increases stress.

Research and Discovery

Inside North American Pop-Culture Conventions

Who’s going to conventions?

Pop-culture conventions are multi-day events where fans can gather and indulge in their pop culture interests.

Top 5 genres attendees go to conventions for

  1. Sci/Fi Fantasy (64%)

  2. Video Games (58%)

  3. Movies/TV (51%)

  4. Comics/Graphic Novels (41%)

  5. Anime/Manga (39%)

Why not just add signage?

While the addition of signage can enhance navigation,

An app can enhance the wayfinding experience in ways that signage cannot.

Current Solution

What’s going on at conventions?

  • Shopping (Artist Alley and Vendor Hall)

  • Panel and Community Events

  • Celebrity guest Meet and Greets, autographs

Despite more than 60% of convention venue dedicated to shopping for more than 100,000 attendees, large conventions are notorious for its poor circulation and navigation due to

  • High layout complexity

  • Large crowds

  • Lack of Signage

A major part of the convention experience is shopping at booths in Artist Alley and Vendor Hall

How are attendees navigating the venue?

Key Wayfinding Considerations

However, the study emphasized that respondents preferred a wayfinding experience that was

Digital Wayfinding Screens in Shopping Centres

Under similar conditions, a 2020 user experience survey for digital wayfinding screens in malls show that mall goers find the screens to be convenient when browsing shops and efficient in locating destinations.

  1. Effective navigation hinges on the efficiency of the environment's circulation system which large conventions tend to falter

  2. Venue layout is subject to change depending on the number of exhibitors selling at Artist Alley and Vendor Hall.

Research and Discovery

User Research

Common Themes

To narrow down on the most common and actionable theme from the interviews, my affinity mapping process involves uncovering general themes from interviews and then distilling them into more refined and specific ones.

From the theme of navigation, I distilled it into 4 different themes in which I primarily focused on orientation as it had the highest amount of user pain points.

However, the other themes went hand-in-hand with orientation so I still took them into consideration.

Key Insights

To further investigate the problem space, I interviewed 5 convention attendees to understand their experience navigating convention venues and how it affected their convention experience. Using affinity mapping I analyzed their pain points, behaviours, and motivations.

“You have to go through a whole section of Artist Alley before you find an artist’s booth because it’s just so big.”

"I like to go to Artist Alley booths to meet new artists and buy their merchandise”

  1. Attendees struggle to find specific booths, even with the map

  2. Attendees find it inconvenient coordinating between separate documents for the map and directory.

  3. Attendees rely on landmarks to navigate.

  4. The lack of distinguishable landmarks/signage cause orientation issues.

  5. Attendees felt that the map does not accurately reflect their surroundings

  6. Navigation difficulties lead to stress and exhaustion.

“I usually follow the map but I also try to look for landmarks around me to guide me there.”

"Is this side of the booth supposed to be facing this entrance or the other entrance?”

“It’s very cumbersome when the map tells you where the room is, but not what’s happening in the room at the same time.”

“I ended up losing my friends because of the crowded aisles and unclear landmarks.”

Define

How might we…

Help attendees better orient themselves at pop-culture convention centers to get them to their destination efficiently and with less stress?

Define

So, Who’s in the Crosshairs?

After gathering key insights from user interviews I created a persona to guide my design decisions in order to meet the needs of my target user.

Key details about Maya

  • She follows the map while looking for surrounding landmarks (situational awareness)

  • She is flexible and likes to explore the convention, but doesn’t like to waste too much time

  • She is directionally challenged but also situationally aware

User Persona - Maya Brown
User Journey Map 
Ideate

What technologies make this possible?

Using prior knowledge of GPS and navigation apps like Google Maps, Waze, and Transit, I wanted to explore similar technologies that would be compatible indoors.

AR Navigation?

Visual Positioning System (VPS) analyzes the user’s surroundings through the camera to determine their location

  • Uses AI models to recognize the environment and distinguish landmarks to guide the user in real-time

Opportunity

  • Directions and landmarks can be directly overlaid on the camera since the system would match user’s actual point of view

Disadvantages

  • Too many visual cues in the venue for AI to analyze and learn (crowd, cosplayers, exhibitor booths)

  • Not suitable for dynamic layouts (different booths every year)

  • Need to train AI model for accuracy and efficiency of use

GPS but Indoors?

Indoor Positioning System (IPS)

Combines Bluetooth Low Energy (BLE) Technology + Wi-Fi

  • BLE beacons installed around the building sending one-way Bluetooth signals for phones to receive

  • Needs a dedicated app to accurately triangulate the user’s position

    • By the user’s phone receiving Bluetooth signals from the BLE beacons

Opportunity

  • Tailor an app to pop-culture conventions

  • Follows similar mental models as popular navigation apps

Disadvantages

  • Requires good Wi-Fi

  • Need to install many beacons at the venue

  • High venue ceilings

  • High signal interference

Landmark-Based Navigation

A 2023 report on wayfinding in overcrowded markets revealed that people navigate better when they can identify shops and vendors at directional changes.

Since convention attendees struggled with orientation, even while following the map due to the lack of distinguishable landmarks in the venue.

I saw this as an opportunity to build upon attendees’ behaviour of relying on landmarks

Integrating a Bluetooth Indoor Positioning System aligned best with attendees’ needs and behaviours as it would allow them to

  • Efficiently follow the map while looking for surrounding landmarks

  • Be alert navigating through crowded aisles (avoid getting lost, prevent falls/injuries)

Opportunity

Booths can be emphasized on the map as landmarks at directional changes to help users better orient themselves while navigating to their destination.

Final Verdict

Assumptions

  • Convention venues would install Bluetooth beacons to enable this technology

  • Venues provide good Wi-Fi connection

Empowering users with direct control over wayfinding, rather than relying on app’s interpretations.

Ideate

Developing the app functionalities

To address the challenges attendees like Maya experience when navigating to a booth using Bluetooth IPS technology, I explored different app functionalities as user stories, categorized into epics.

Epics

The main epic I chose to move forward with was:

Getting directions

It closely relates to

  1. Getting directions

  2. Defining user’s orientation within the venue

  3. Accessing the convention map

  4. Refining convention directory search

  5. Personalizing convention schedule

  6. Event Notification

  7. Booth Categorization

IDeate

Task Flow

Once I had an idea of the app’s functionalities to develop, I created a task flow diagram to visualize the user’s journey when getting directions to a specific exhibitor’s booth.

IDeate

Sketching and Wireframing

Based on my users’ needs and their primary task flow, I created lo-fi and mid-fi wireframes of the following screens:

  • Map Screen

  • Search Screen

  • Exhibitor Profile Screen

  • Route Navigation Screen

  • Route Details Screen

  • Search Results Screen

    When user inputs an exhibitor in the search bar

  • Route Map Screen

    Includes exhibitor profile card design after user selects their preferred exhibitor

  • Route Navigation Screen

    When user is navigating to their destination, every directional change associated with a nearby landmark booth

  • Route Details Screen

    List of route details or steps specifying where to turn to get to their destination.

Prototype

Mid-fidelity Wireframes

After sketching out my ideas, I used Fanexpo Canada’s 2023 floor plan to create the mid-fidelity wireframes

Prototpye

User Testing

The first mid-fidelity wireframes now needs to be tested with users and further iterated upon.

I conducted 2 rounds of user testing each with 5 participants. After every round, I implemented changes to improve the app’s usability, resulting in 3 iterations of mid-fidelity wireframes.

Goal: Ensure that users understand what the icons at each directional change means

Round 1

  1. Users could not tell where exactly they were on the route

  2. Confused by what the pin icons at each directional change represent

  3. The discrepancy between tapping for the next step and the swiping suggestion of pagination dots confused users.

  4. No backtracking to previous step

  5. Users found the navigation steps copy unclear and long

Round 2

    1. Version 2 now has a user position marker so that users know where they are on the route.

    2. Changed the pin icons at to a flag to signify something to look out for.

    3. Moved pagination dots inside a progress bar to clearly convey how far user is on the route.

    4. Arrow buttons to clearly prompt the user to next directions.

  • Confused by what the flag icons at each directional change represent

  • Users found the navigation steps copy to be confusing and inconsistent

  • It took users a bit longer to notice the position indicator after the system decision

    1. Version 3 now has better information hierarchy - user can tell what booth is associated with the flag icon).

    2. User position marker is labeled with modal to clearly show their location.

Protoype

Improving Landmark Iconography

Clearly, previous iterations of landmark iconography did not meet the user’s needs of improving their orientation. This is where I took a step back to rethink my strategy

Previous iteration

Users thought they were:

  • destinations of some kind

  • places to stop rather than something to look out for while moving forward

Solution

Landmark iconography can be based on the booth’s main category/genre

When certain booths are tagged with genre/category icons rather than flags, users have a better idea of what booth they are approaching and is less likely to think of that booth as a stop.

Narrowing my Scope

After consulting with peers and mentors on the issue, I found that I was too focused on creating a universal icon to represent all landmarks.

Landmarks vary greatly at conventions making it difficult to generalize them depending the user’s location:

  • Exhibitor booths can be vary in size, colour, genre

  • Large displays or installations can differ

  • Lots of different event rooms, exit/entrances, washrooms etc.

Paintbrush icon = Artist booth
Controller icon = Gaming booth

Prototype

Visual Identity

After iterating and resolving the app’s most important feature. I moved on to creating the visual identity of the app.

Based on user interviews, convention attendees were stressed and exhausted while navigating to specific booths, despite having fun at the convention.

So, I wanted to explore key adjectives and a moodboard that reflects the playful and exciting nature of conventions while also reducing attendees’ stress while navigating

More

Playful, Reliable, Calming

“We know it can be stressful finding your way around the convention, we’re here to help”

Extracted colours

Brand Colours

Playful
Casual
Modern
Simple
Reliable
Encouraging

The brand colours I went for convey more reliability and playfulness rather than calm in order to attract the user’s eye before they open the app.

Map Colours

High clarity of map UI elements is important to for attendees to know what to focus on when navigating a hectic environment.

  • Using vibrant brand colours and accents sparingly across the map helps draw the user’s attention to the right part of their route.

How I decided on “Navicon”

I wanted to create a simple and easy to understand wordmark that succinctly conveys navigation and conventions.

Final Wordmark

I further refined the curve and the “C” to better connect it with the “i”.

Than

Serious
Professional
Traditional
Convoluted
Fickle
Frustrating

The vibrancy of the purple adds to the playful tone of the pink, yet the it still conveys a sense of stability due to the darkness of the colour.

App Colours

I selected slightly desaturated primary and secondary colors for the app's UI elements to minimize distractions for the user navigating in a hectic environment.

I created the wordmark in Figma experimenting with different type and font sizes that would seamless connect the “i” to the “C”.

I opted for a straightforward approach with the wordmark composition for the app icon, ensuring ease of understanding for users

Prototype

Hi-Fi Prototype

After deciding the colours, I injected them into the final high fidelity prototype.

prototype

UI Library

In a situation where I would be working in a team to design NaviCon, I would create a UI Library to clearly lay out the app’s design system.

Here’s a snippet of some of the most important components of the app.

DEliver

Product Marketing Site

To promote Navicon, I created a marketing website formatted for desktop and mobile viewports.

Final thoughts

Design Impact

Working on this capstone project as a junior designer, I delved deep into the design process, facing numerous challenges and learning to embrace uncertainty along the way. Despite the ups and downs, the journey was still worth all the effort to create NaviCon.

NaviCon provides a way for users to more efficiently locate their favourite booths at the convention, by tailoring the navigation to the user’s own wayfinding abilities.

The interactive map combined with the convention directory streamlines the process of searching for booths, whereas other convention apps merely show the convention map and directory separately.

Final thoughts

Key Project Learnings

From user testing, I learned about how important it was to choose the right iconography to properly convey what you want the user to understand or do with it. I had to iterate once more to finally get to a point where users better understood the landmark and what it meant while navigating.

Final thoughts

Next Steps

Even during the creation of NaviCon, I had also considered other features that would address convention attendees’ moderate pain points.

  • Search filters

    • Expanding upon NaviCon’s booth/event searching process, users can view the convention’s offerings related to their favourite genre by filtering their results.

  • Profile pages

    • Profile pages to better showcase exhibitors, events, and guests at the convention.

  • Route options

    • Provide routes that allow users to avoid congested areas or simply follow the fastest route

  • Location sharing system

    • Streamline the process of sharing user’s location with their friends so that they can easily reconvene if they get lost.

  • Navigation reward system

    • To further engage users to make the most out of their convention experience, the app can reward users with prizes provided by the convention when they successfully navigate to their destination

Final Thoughts

Tarot Cards of Tech

What could cause people to lose trust in your product?

Similar to how GPS technology can be buggy, indoor positioning systems (IPS) can malfunction as well.

In order to tackle this potential issue, the app should notify the user of IPS error and ask them to input their current location.

  • As long as the user can input their current location, the app will give them a route to get to their destination.

If the user does NOT know their current location

  • The app should provide a way to triangulate the user’s position by asking them to input 3 nearby landmarks to get a better estimation of their start location.

Convention Wi-Fi security

  • The convention venue must provide encrypted Wi-Fi to ensure security of user’s data

  • The app should also be transparent in the kind of data being collected

    • None of the collected data is personally identifiable and only relates to improving navigation.

How will you recognize larger patterns in feedback so that action can be taken?

The app can provide a way for users to voluntarily leave reviews to improve the app experience. Since most users tend to leave reviews for negative experiences, conventions can use this information to improve the app based on how catastrophic and prevalent the issue is.

Additionally, the app can keep track of users who have and haven’t been able to arrive at their destination in order to improve the app’s navigation.

Next

Salert