Interactive
Map Gallery
Interactive
Map Gallery
Interactive
Map Gallery
Interactive
Map Gallery
Interactive
Map Gallery
Overview
Designing an Inviting First Touchpoint
The idle screen on the Interactive Map Gallery is the starting touch point that welcomes users and encourages them to engage with the kiosk. Through clear calls to action and brand-aligned visuals, it prompts users to start exploring shared GIS content immediately.
Overview
Summary
Tools
The Interactive Map Gallery Kiosk is a device on-site at the company's largest events that provides attendees a virtual experience of maps submitted by industry professionals. It's an opportunity for attendees to learn what their peers are doing in their industry or others, vote on their favorite work, and comment.
Role
Spearheaded the design, research, prototyping, and testing of the idle screen, that introduces attendees to the kiosks and gets them to engage.
Methodologies
Competitive Analysis, Wireframes, Prototyping, Research, Interaction Design
Figma
Dovetail
The Problem & Barriers to User Engagement
Through observational research, we discovered that attendees were disengaging from the kiosk. Key barriers included unclear messaging, a dynamic background that resembled a video, and a lack of clear prompts to interact with the screen, see below for original design.
Original design for the idle screen
Overwhelming interface: Dynamic backgrounds resemble video content, confusing users.
​
Unclear navigation: QR code distracts from the main call-to-action, which is to engage with the screen to start the experience.
Key Findings
-
Users need clearer calls-to-action to encourage interaction.
-
Background animations should be simplified to reduce confusion.
Final Design
(prototype and following images of the idle screen are not interactive)
Designing for Engagement - Iterative Process
​To address user pain points and align with the company's business goals of fostering a sense of community for GIS professionals to share and learn, I focused on creating a solution that enhances engagement while reinforcing the company's brand and reputation. My design process was guided by these priorities:​
Alignment with business goals
Fostering Community
The solution simplifies access to GIS content, enabling professionals to easily find, explore, and share maps. This promotes connection, collaboration, and engagement within the GIS community.
Strengthening Brand Reputation
With its intuitive, polished design, the kiosk highlights the company’s leadership in GIS technology and community-building. It reinforces the brand’s commitment to empowering users and fostering collaboration.
Encouraging Knowledge Sharing
Interactive elements act as gateways to deeper exploration, encouraging users to engage with shared content, gain insights, and contribute to the company’s growing knowledge-sharing ecosystem.
Iterative design approach
Original design
Version 1 (Lo-Fi)
Version 2 (Mid-Fi)
Version 3 (Mid-Fi)
Early Wireframes Addressing Usability Challenges, Version 1
Created low-fidelity wireframes to map out the user flow and address usability challenges, such as reducing distractions and improving clarity.
Simplified interface: Proposed a static or subtly animated background with limited visuals to reduce confusion.
Clear navigation: Clear call-to-action button - ensuring users had guidance without feeling overwhelmed by unnecessary text.
Engaging visual cues: Incorporated an interactive pointer/icon to pulse gently, providing a clear visual cue for users.
Wireframe to emphasize potential areas of improvement.
Prototyping for User Clarity and Focus, Version 2
Through mid-fidelity wireframes and prototyping, refined the interface by testing the placement of interactive elements and adjusting visual hierarchy to prioritize user actions.
​
I used Figma to prototype the idle screen, applying interface design principles like visual hierarchy and alignment to ensure clarity.
Using animation tools within Figma, I tested subtle motion for interactive elements to enhance usability without distractions.
One of many iteration prototypes to showcase motion of interactive elements.
Collaborative Feedback & Refinement, Version 3
I collaborated with cartographers, developers, project manger, executives to create an experience that met their expectations, business goals, an user's goals. Various iterations were shared to showcase and visualize stakeholder request in addition the recommended solution.
Final iteration after stakeholder feedback – emphasized clarity and simplified interaction prompts
Metrics Overview and Assumptions
The idle screen is designed to inform and encourage users to interact with the kiosk. The following metrics focus on assessing the screen's ability to capture attention, provide clarity, and drive engagement. These assumptions are based on the expected user behavior during events and the kiosk's placement in high-traffic areas.
Engagement Rate
Measure the percentage of event attendees who stop and engage with the kiosk after noticing the idle screen.​
Interaction Conversion Rate
Measure the percentage of users who engage with the screen and proceed to interact with the kiosk interface.
Time to First Interaction
Track the time it takes for users to move from viewing the idle screen to their first interaction with the kiosk.
High Fidelity Prototype & Next steps
Below is the high-fidelity prototype of the idle screen design, which will be rolled out at an upcoming event. The objective is to validate if the new design increases attendee engagement compared to previous iterations.
​
The prototype features a polished "shine" effect on the call-to-action, designed to subtly draw attention and guide users toward interaction. To ensure the idle screen aligned with the company's brand, I used bold typography and high-contrast elements to draw attention to the call-to-action while maintaining a professional, clean aesthetic.
​
Next steps include analyzing event metrics, gathering feedback, and refining the design to further enhance its impact.
Designing Real-Time Event Navigation for Attendees
