PROJECT KIOSK

INTRO

TL;DR - Project Kiosk is a welcoming experience running on an interactable kiosk for Parsons the New School.

It is one of the design challenges for Google UX Design intern candidates in 2018. Project Kiosk later won me a chance to intern at Google.

  • Google UX Design Challenge
  • March 2018 - 1 Week
  • Motion Design + 10-Foot UI
  • Sketch/Principle/AfterEffects/Photoshop

PROMPT

Your school has built a new student center and is looking to you for some design expertise. Design a welcome experience for visitors of the new center utilizing the large-format touch screen kiosk in the lobby, which displays upcoming events, news headlines, and next week’s weather forecast. Create three motion sequences that can loop in the lobby, transitioning between the different types of content.

UNDERSTANDING THE PROMPT

Your school has built a new student center and is looking to you for some design expertise. Design a welcome experience for visitors of the new center utilizing the large-format touch screen kiosk in the lobby, which displays upcoming events, news headlines, and next week’s weather forecast. Create three motion sequences that can loop in the lobby, transitioning between the different types of content.

INTERPRETATION & CONSTRAINTS

  • Your School: Parsons the New School, Manhattan.
  • New Student Center: A lot of students would be the 1st time visiting this building.
  • Welcome Experience/Lobby: The location of this experience would be at the entrance of the 1st floor.
  • Large-format touch screen: LARGE, and interactable.

RESEARCH

IMG_0563
IMG_0561
IMG_0562
IMG_0564
IMG_0560
IMG_0565

There is a kiosk located at one of the school building. So I took a few hours standing beside it and observing how people interact with it.


The kiosk machine I observed has a vertical display around 49 inches. However, it is not a touch screen and can only display static images. The content is mostly the photocopy of flyers and some posters.


The problem I noticed on this machine is that people can hardly read the contents from a certain distance(they are flyers). As soon as the users approach trying to read it, they don’t have enough time to read through. If they miss a page and want to see it again, they have to wait for the auto-loop for another round to see the content they are actually interested in.


Based on the observation, I categorized the users in 2 types.

QUICK BRAINSTORM BASED ON RESEARCH

IMG_0585

DESIGN FOR 2 TYPES OF USER

pastedImage0

“Passer-By”

Have something important to catch up, such as going to class, have a meeting at a certain room

  • Only have 1-3 seconds of attention for the kiosk
  • Usually stands 5 or more meters away from the screen
  • Instead, they are focusing on a certain direction like the elevators.
pastedImage0 (1)

“Stop-By”

Not as busy as “Passer-by”. They notice something on the screen is related to them or interesting so they try to see the details

  • Have more than 10 seconds of attention and are willing to interact with the screen
  • Close to the screen
    Still, their flow would easily be interrupted and they have to leave. Such as when the elevators arrive.
  • There is a short time period between having seen the kiosk and actually walking up to it. The page sometimes refresh before their interaction.
PasserBy

“Passer-By”

  • Provide concise information as much as possible in a short time.
  • The interface should be readable even in a distance
  • Since most of them are here for other business, it is important to let them know they are in the right building.
  • “Get shit done”
StopBy

“Stop-By”

  • Provide detailed information during the interaction
  • Once the user goes up to the screen, they should know how to go back to the previous page.
  • If they have to leave during the flow, provide a solution that they can keep reading the content.
  • “Keep them engaged”

CONTEXTUAL RESEARCH

The New School

The New School is located at Manhattan and the school buildings are scattered in different streets in Greenwich Village. Based on their majors, most of the students spend most of their time in 1-2 buildings.


The problem is that when someone goes to an unfamiliar building, he/she will easily get lost. Therefore a welcome experience should give them a clear idea “where I am”.

TNS Map

Ergo

Unlike mobile device, the user cannot interact with every corners of a large screen kiosk comfortably.

Use a vertical 1:1.5 screen as an example. The comfort zone of the interactable area is located on the upper half of the screen. Otherwise the user would have to stoop or bend their knees to use the screen.

kioskergo

DESIGN GOAL

Based on the research process I summarized the design goal for this project


Designing a traceable and adaptive motion interface to 2 different types of user, “Passer-By” and “Stop-By”.

SKETCHING

IMG_0566
IMG_0575
IMG_0604

VISUAL INDICATOR

In order to make the motion sequences trackable, it is crucial to use visual indicator to give a hint what page it is and what the next transition would be.


The top part is designed for “Pass-By” users who are meters away from the screen. It is inspired by stage curtains, which also marks the border of an audience’s viewport of moving images. And most importantly, they can be seen not matter how far the user is away from the stage.


The bottom part is a traditional page indicator. It is designed for “Stop-By” users who are closed to the screen.

Visual_Indicator

"WEATHER, EVENTS, AND HEADLINES"

Kiosk_AutoLoop

When the transitions are auto-looping, it “teaches” the users how to interact with it.

So instead of making an infinite looping feed, I compress the contents into 3 pages so the transition can be repetitive. The users can get a quick idea on each page in a short time and know their orders of transition.

looporder

"FOLDING"

Using mographs in the UI can “fold” the detailed information and give the “Pass-By” users a quick impression what is going on.

When a “Passer-By” user finds something he/she is interested in, he/she will turn into a “Stop-By” and go up and interact with the screen, using mographs to unfold the information and display the detail.

I hid the 7-day weather forecast and the contents of the events since barely any “Passer-By” can read them through in a few seconds.

Kiosk_Weather
Kiosk_Eventsfold
folding

THE NEW SCHOOL VI

TNSVI

AUTO-LOOP PROTOTYPE

Artboard Copy 8
Artboard Copy 14
pastedImage0 (2)

WEATHER DROPDOWN

Artboard Copy 8
Artboard Copy 13

EVENT CONTENT

Artboard Copy 14
pastedImage0 (3)

THINGS I LEARNED

  • Personal devices(phone, laptop) and public devices(kiosk) have some key differences in design approach.
  • Knowledge, tricks, Dos and don’ts for UI on a large touch screen.
    Some techniques in Principle.

FUTURE ITERATION

  • In-depth competitor research on all the current kiosk UI.
  • Polishing the reading experience on the content.
  • Making the UI responsive on different size of kiosk screen.

Other Projects

Crane: an Ongoing ProjectA Design Language for XR

XR Presentation @GoogleProfessional Tool in XR

Project Kiosk10 Foot UI

SingularityA Game about AI

Master of Fine Art Candidate

Parsons the New School of Design

Design & Technology 

Bitnami