Kiosk Attractor Screen
Designing an Inviting First Touchpoint
The idle attractor 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.
My Role
UX Designer
Team
Cartographic designer, UI Designer, Copy Writer, Product Manager, Project Sponsor
Core Skills
Cross-functional collaboration, user research, product thinking, QA support
Tool
Figma
Dovetail
Implemented design of the attractor screen for the touchscreen Map Gallery Kiosk.
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.
ATTRACTOR SCREEN | ORIGINAL DESIGN
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 Pain Points
-
Users need clearer calls-to-action to encourage interaction.
-
Background animations should be simplified to reduce confusion.
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.
Iterative design approach
ORIGINAL
VERSION 1 (LO-FI)
VERSION 2 (MID-FI)
VERSION 3 (MID-FI)
Early Wireframes Addressing Usability Challenges, Version 1
Wireframe to emphasize potential areas of improvement.
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.
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.
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, and executives to create an experience that met their expectations, business goals, and the user goals. Various iterations were shared to showcase and visualize stakeholder requests in addition to the recommended solution.
Final iteration after stakeholder feedback – emphasized clarity and simplified interaction prompts.
Metrics & Researh
The idle screen is designed to inform and encourage users to interact with the kiosk. I designed and lead a field study which was a combination of direct observations, informal interviews, and contextual inquiry with the following metric benchmarks in mind to assess if the new design of the attractor screen increased user attention, provided clear next steps, and drove engagement.
Engagement Rate
Measure the percentage of event attendees who stop and engage with the kiosk after noticing the attractor screen and show interest.
Time to First Interaction
Track the time it takes for users to move from viewing the attractor screen to their first interaction with the kiosk.
Interaction Conversion Rate
Measure the percentage of users who engage with the screen and proceed to interact and move to next steps with the kiosk interface.
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.
Rendering of kiosk display on the show floor.