Designing a Connected Interactive Map Gallery Experience

Overview

The Interactive Map Gallery is a featured, high-traffic experience at major Esri annual conferences, enabling attendees to discover, explore, and celebrate innovative GIS mapping work submitted by the global Esri community.

The experience exists across multiple physical and digital touchpoints—large-format touchscreen kiosks on the exhibit floor, a mobile companion app for on-the-go engagement, and a desktop web gallery available before and after the conference.

As the world's largest GIS software company, Esri's Interactive Map Gallery is a highly visible expression of the brand at its flagship conferences. The kiosk experience needed to meet the same standard as the products and maps it was showcasing.

Project at a Glance

Design Solutions

1. Attracting Attention Across the Venue Floor

To solve the issue of attendees walking past interactive kiosks, the attract experience was redesigned with high-visibility typography, bold contrast, and ambient motion prompts that signal interactivity from 15+ feet away.

2. Supporting Intuitive Exploration & Discovery

The kiosk interface was reorganized around clear content hierarchy. Attendees can seamlessly switch between curated category filters, search for specific map titles, or dive into the Map Tour experience without losing context.

3. Connecting Physical & Digital Attendee Journeys

To ensure engagement didn't end at the kiosk, physical meterboards and onscreen QR codes were redesigned into a unified handoff system. Attendees can instantly scan a QR code on the kiosk or signage to continue reading map details, voting for awards, and sharing feedback on mobile.

Physical Meterboard

Mobile Companion

Reflection

Designing for live event environments required balancing physical visibility, attendee movement, accessibility, touch ergonomics, and digital interactions. It challenged me to consider how people discover and engage with an experience before they ever interact with a screen.

This project reinforced the importance of systems thinking and designing across touchpoints. Some of the most valuable UX improvements came from understanding how attendees moved between physical signage, kiosks, and their personal devices.

Behind the Design

Explore the research, cross-platform challenges, and design decisions that shaped the final experience.

Understanding the Experience Ecosystem

Rather than approaching this project as an isolated touchscreen kiosk interface, I mapped the entire connected attendee ecosystem to ensure every touchpoint supported the journey:

• Physical Signage & Meterboards: High-visibility venue signage capturing floor traffic, providing clear orientation, and featuring prominent QR code entry points.
• Physical Kiosk Installation: Large-format 4K touchscreen kiosks optimized for quick standing interactions, visual discovery, and Map Tour exploration.
• Mobile Experience: Personal on-the-go companion experience allowing attendees to vote for community awards, save favorite maps, read detailed descriptions, and post comments during sessions.
• Desktop Web Gallery: Post-event archive and pre-event submission portal supporting deep research and sharing across remote GIS teams.

Research & Discovery

To uncover the root causes of attendee hesitation and drop-off, I led a multi-faceted research phase during live Esri event installations:

• Onsite Observation: Tracked floor movement patterns, distance viewing angles, approach trajectories, and dwell times at active kiosk stations.
• Contextual Inquiry: Conducted light touch-point interviews with attendees immediately after they interacted with or walked past the kiosk setup.
• Attendee Conversations: Gathered qualitative feedback on what maps attendees were seeking and why they struggled to find specific submissions.
• Analytics Review: Analyzed event interaction logs, search queries, QR scan conversion rates, and session durations across touchpoints.
• Accessibility Observations: Evaluated physical reach zones on vertical touchscreen monitors, font readability from standing distances, tap target sizes, and color contrast under bright hall lighting.
• Stakeholder Feedback: Collaborated with event operations staff, GIS curators, and technical teams to identify operational constraints and content publishing workflows.

Key Findings

1. Interactivity was ambiguous — the call to action didn't read as one

Contextual interviews conducted immediately after attendees walked past the kiosk consistently surfaced the same assumption: without a clear prompt or cue, the screen read as ambient conference signage rather than something to touch.

2. Hidden navigation meant most attendees never found the full experience

Onsite observation showed a pattern: attendees engaged with whatever loaded first, and some continued searching for additional maps — but entirely missed the global map view sitting just beyond the default screen. Over 42% never discovered it.

3. The map view itself felt underwhelming once attendees got there

Even attendees who made it to the global map view weren't sure what to do next. Without clear direction or guided entry points, the static map felt like a step down from the interactivity the kiosk had promised — leaving attendees to wonder what they were actually supposed to explore.

4. Mobile transition friction broke the journey attendees were trying to continue

Analytics review of QR scan conversion showed a steep drop-off between kiosk interaction and mobile continuation. Attendees enjoyed exploring maps in person, but the next step wasn't clear — many didn't realize sign-in was required before they could comment or vote, so the journey stalled right at the handoff.

Behind the Final Designs

The final screens only show part of the process. Across the kiosk and mobile experience, the work included mapping new interactions, documenting usability improvements, and validating functionality before the experience went live onsite.

Mapping the new Map Tour experience

I mapped and annotated the interaction flow for the new Map Tour experience, working through how attendees would enter, explore, and navigate the experience before moving into the final interface.

Auditing the mobile experience

For mobile, I documented usability issues directly on the existing experience to give stakeholders and engineers clear areas of focus for improvement. The redlines helped turn broader usability concerns into specific, actionable updates.

QA before the onsite launch

Before the kiosk went live onsite, I conducted UX QA across the experience to make sure interactions worked as intended and documented issues that still needed attention.

Before & After Improvements

The side-by-side comparisons below demonstrate key design iterations driven by observational research and stakeholder input, focusing on clarity, hierarchy, and physical-to-digital continuity.

Improvement 1: Attract Screen

The attract experience was redesigned to clarify the kiosk's interactive purpose, draw attention from attendees walking through the physical venue, introduce a prominent "Touch to start" action, and use visual emphasis to make the entry point easier to notice.

Before (Old Kiosk Design)

After (Final Approved Kiosk Design)

1 2 3

1

Increased visibility from a distance: An animated background and high-impact visual treatment help the kiosk stand out within busy conference halls.

2

Clearer purpose: The prominent "Find & Explore Maps" headline immediately communicates what attendees can do at the kiosk.

3

Clear interaction prompt: The prominent "Touch to start" action makes it clear that the display is interactive and invites attendees to begin exploring.

Improvement 2: Gallery Navigation

The redesign established the Map Tour as the primary entry point into the experience. The main call-to-action invited attendees to begin the Map Tour using the same shiny visual effect introduced on the attract screen's "Touch to start" action, connecting the two moments and making the new experience prominent. Secondary actions were moved into a tab along the right side of the interface to create a clearer hierarchy.

Before

After

1 2 3

1

Improved browsing hierarchy: A prominent search bar, category filters, and clearly structured map cards make it easier to browse and locate content.

2

Elevated the Map Tour: The Map Tour became the primary call to action and used the same visual treatment as the attract screen's "Touch to start" prompt.

3

Separated secondary actions: Additional browsing actions were consolidated into the right-side tab, keeping alternative exploration paths accessible without cluttering the primary view.

Improvement 3: Map View

At the stakeholder's request, the original map view was reimagined as a curated global exploration experience. Instead of functioning only as a standard map interface, the new Map Tour guided attendees through selected maps from different locations around the world. As the experience progressed, the globe shifted and moved to each relevant location, creating a visual, guided way to discover featured work.

Before

After

1 2 3

1

Introduced a guided exploration experience: The original map view was reimagined as a curated tour of featured maps from around the world.

2

Connected maps to place: As attendees progressed through the experience, the globe shifted to each featured location, providing geographic context for every map.

3

Focused attention on curated content: The guided experience created a more intentional way to discover featured maps than the previous open map view.

Improvement 4: Mobile Experience

The mobile companion detail page was refined to improve typography hierarchy, elevate sign-in prompts for interactive features, and bring sharing and voting actions into immediate thumb reach.

Before

After

1 2 3

1

Improved readability and layout: Updated spacing, content grouping, and typography created a clearer hierarchy for viewing map details on smaller screens.

2

Made sign-in requirements clearer: The sign-in action was given greater prominence, making it easier for attendees to understand how to vote or comment on a map.

3

Elevated sharing actions: The share action was moved higher in the hierarchy instead of remaining difficult to find near the bottom of the page.

Improvement 5: Physical Meterboard (Designing Beyond the Screen)

Physical venue meterboards were redesigned to elevate QR codes to eye level and create a clear distinction between what attendees could explore at the kiosk versus what they could scan to take on their phone.

Before

After

1 2 3

1

Elevated the QR code: A larger, eye-level QR code made the mobile entry point more visible to attendees approaching from the aisle.

2

Clarified the two ways to engage: Condensed content separated actions available on attendees' phones from those completed at the kiosk, making each path easier to understand.

3

Added action-oriented guidance: Short, scannable instructions helped attendees quickly understand how to begin using either experience.