professional project · UI DESIGN

Self-driving shuttle bus KIOSK UI design Project

Agust 2020. The city of Sejong in South Korea wanted to install kiosks for self-driving shuttle buses in the city park.

While working on a kiosk UI design project, I had the opportunity to learn more about the accessibility of touch screen kiosk UI. My goal was to design a UI that was easily accessible to everyone. So, I referenced W3C, WCAG, and Austrian/German standard DIN-1450 to ensure UI element size, readability, and color contrast for an accessible kiosk design.

CLIENT
- Sejong city, South Korea
MY ROLE WAS
- 100% of UI Design
- 70% of Research
tool
- Figma
- Photoshop
I WORKED WITH
- Project manager
- Senior designer
- Developer
YEAR
- AUG 2020 ~ OCT 2020

ACCOMPLISHMENT

A kiosk for self-driving shuttle bus was successfully launched and installed in Central Park in Sejong City, Korea, and is being used by Sejong citizens.

[Final Outcome]

[Demonstation Clip]

DESIGN PROCESS

I designed the kiosk screen UI after client meetings, research, and ideation. Afterward, I  handed over the finalized design to the development team.

GOAL

For the project, I had to understand what the client wanted and what their overall requirements were. After analyzing their requirements, my goal for this project is to design a kiosk UI that citizens can easily use.

[Sejong City Self-driving shuttle bus]

Research

First, I identified the size of the kiosk screen I will be working on. And then, I did further research and competitive analysis to identify the accessible UI of the kiosk design. My main research questions are as follows:

1. What is a large enough touch target size?
2. What size is the appropriate text size?
3. How to make the colors stand out?

Key findings
from research

I discovered the principles needed for accessible kiosk UI design from W3C, WCAG, and the Austrian/German standard DIN-1450, then shared them with my team to reach a consensus. I reflected these principles in the kiosk UI design.

1. The minimum target size is 20mm.
2. The important text size is 4mm.
3. The color ratio is 7:1.

IDEATION

When wireframing based on a pre-designed information architecture, I designed the wireframes with clear, intuitive navigation and a consistent layout.

STYLE GUIDE

I developed a style guide that considers ease of development, accessibility, and the brand identity of Sejong City.
I applied the principles of accessibility element size, readability, and color contrast discovered in my research to UI design to design a total of 9 kiosk screens and handed them over to the development team.

FINAL DESIGN

What I've learned

I gained a deep understanding of the importance of accessibility in kiosk UI design. Kiosks for the citizens of Sejong City must provide services that are accessible and easy to use for all users. In the process of determining the size of touch buttons, font size, and colors, considering the unique screen size and environment of a kiosk, I experienced and learned how Web Content Accessibility Guidelines (WCAG) can be applied in designing kiosk UIs, distinct from website design.