top of page
Mockup of the Airwave kiosk UI on monolith style digital kiosks

Airwave Kiosk

A gesture-based UX for Smart city Kiosks. Designed in response to my Masters Research Paper exploring Kiosk usage.

OUTCOME        Research Paper and Prototype 

       SCOPE        15 Weeks - 12 for Research Paper, 3 for Prototype

      TOOLS         Adobe XD, Photoshop, Illustrator, Premier Pro  

Click below for the full paper, design rationale, details and video on YouTube

UX Research Paper 

Abstract

Digital Kiosks can be found in different forms in smart cities across the globe. They exist to provide quick and easy access to a multitude of features, helping smart cities engage with and assist the wider community using technology. This paper examines the uses of digital kiosks within smart cities and how their hardware and aesthetic design affects user experience. A literature review examines specific uses of kiosks, including as access points for digital infrastructure and for information. A study gaining responses from the public and UX specialists was also conducted. The survey focused on opinions of the idea of digital kiosks, current usage, desired features, and the idea of kiosk vs. mobile applications for specific tasks. The results suggested that kiosk networks should focus on supplying access to information over infrastructure as this was the key driver for public interaction with digital kiosks. Additionally, a critical yet unexpected find from the survey was that covid-19 had become a deterrent for use of shared digital displays. Feedback noted that fears over the transmission of the disease through usage of public displays would lower public engagement with current interactive kiosks.

Airwave Kiosk Prototype

During the age of Covid, users are less likely to interact with shared public devices such as digital kiosks due to the potential for transmission via the touchscreen or physical input methods. The artefact created to tackle this issue is a prototype for a touchless, gesture based UX for shared digital kiosks - ‘Airwave Kiosk’. By utilising a gesture-based NUI, the public should feel more confident in using these shared devices without worrying about disease transmission. This is important to address now, as hygiene fears over shared devices will almost definitely linger long into a post-covid world.

Design Principles

Use of time and delays: -

To ensure that gestures are deliberate, and that accidental movements or actions do not interfere with the use of the kiosk, a 2-second fist gesture is used in the prototype to select options. This allows accidental gestures to be ignored/corrected by users.

Eliminate the cursor: -

The prototype uses an ‘on-rails’ approach to mitigate possible jitters and lack of accuracy. An orange glow signifies the highlighted button and moves from one button to the next, rather than utilising a free-moving cursor

Single Hand gestures: -

Users in cities are likely to have only one hand free to interact with the kiosk due to holding, for example, shopping bags, a child’s hand, or an umbrella. Subsequently, single-handed gestures only were included in the prototype.

Keep it simple: -

As this is a shared outdoor device, users would not have the time or desire to learn many different or complicated gestures. As such, the prototype utilises 3 simple one-handed gestures for operations. This will also allow for expansion and development in the future.

Wireframes

Sketch development focused on the use of gestures to interact with the system, and designing a layout that would minimise the cognitive load on users. Initial designs were too gesture heavy, with 2 handed gestures included, and a radial home screen that would require too many movements to be comfortable for the less abled. This idea was scrapped in favour of 3 single handed gestures, and a UI layout akin to traditional mobile devices in order to utilise the users prior knowledge, and require less physical dexterity.

Initial Sketch Wireframes

Initial Sketches

Developed Sketch Wireframes

Second Iteration

The gestures for navigation are simple and easy to perform. Moving between options is performed by moving an open palm left-right, up-down. Select an option with a 2 second closed fist, as if grabbing the item. Finally, to move between horizontally scrollable options, a straight handed swipe is performed. 

Navigation Hand Gestures

05            UI and Branding 

The visual design uses the complimentary pairing of blues and oranges, alongside the clear and easy to read font of Helvetica Neue. The design system ensured a consistent experience across the prototype and made creating the final product markedly quicker.

A novel design feature for this UI is the cursor, and on-rails orange shadow that moves between buttons with the users gestures. The design is noticeable enough on screen, without intruding on information or cluttering the UI. In addition to this, the 2 second 'click' animation is a small turquoise strip scrolling along the top of the button, allowing users time to change/stop selection if necessary.

Style Guide
Final Screen Mockups
bottom of page