Project
About
Linked In
Resume
Email
graduate school · professional project

Arab american national museum kiosk ux design project

PAIN POINTS

- The kiosk did not display the existing video and image content, limiting educational potential and learning experiences.

- The interface needed optimization to better engage visitors and educators with the museum’s content on Arab culture.

GOALS

- Create an intuitive and visually appealing interface to enhance visitor engagement with educational content.

- Implement content playback and programming control through a BrightSign XT4 media player.

APPROACH

- Conducted research and usability testing to design a user-friendly interface with effective content organization and accessible controls.

- Analyze competitors to determine usability and visual appeal strategies.

- Structure and organize content to align with identified user needs and project goals.

OUTCOME

Delivered a refined kiosk interface that improved educational impact and received positive feedback from the museum staff.

ABOUT THE PROJECT
I was commissioned by the Arab American National Museum in Dearborn, MI to design the user experience for a large, interactive kiosk screen. My task was to create a visually appealing and intuitive interface for existing video and static image content and to develop interactive screens using BrightSign media players to ensure dynamic interaction among displays.

CLIENT
- Arab American National Museum
MY ROLE WAS
- Preliminary research
- Prototyping
- Usability testing
Tool
- Figma
- Adobe after effects
- BrightAuthor
I worked with
- Curator of Exhibits
- Engineer
YEAR
- FEBRUARY 2024 ~ APRIL 2024

final Prototype

Problem

Although the museum is equipped with an interactive kiosk, it currently does not display the existing video and image content, thereby limiting its educational potential and the learning experiences of visitors, especially students.

DESIGN SOLUTION OVERVIEW

1. aesthetic appeal &
accessibility

A user-centered design that balances aesthetic appeal with functional accessibility, providing a seamless interaction experience for all users. This includes using fonts and icons sized appropriately based on readability metrics and usability testing, as well as color contrasts that comply with WCAG standards.

2. Home screen

I enhanced the kiosk's user interface with an animated cloud flow over the Arab world and an Arabic-style card design. The display features the title 'Explore The Arab World' and a call-to-action 'Tap below to learn more,' designed to guide first-time visitors and reduce confusion.

3. pause and play button
for educators

Playback controls are strategically positioned at the bottom right corner based on usability testing results. This placement allows educators easy access and efficient management of video content directly from the kiosk.

process: how i got to the solution

1. EMPATHIZE

client meeting &
field research

I met with client to understand the kiosk’s placement environment, display size, primary users, Goal, Scope of work and the design resources available from the museum.

Therefore, my task is to design a visually appealing and user-friendly kiosk UX
that allows for easy interaction with and enjoyment of the museum's seven video and image contents.

competitive matrix

After researching competitors, I contemplated how to integrate the eight pieces of content into the kiosk screen while ensuring usability and visual appeal. This analysis helped determine the direction the museum's kiosk should take.

2. DEFINE

WHo is target user?

The primary users of the kiosk are student groups and museum educators.

Problem statement

After defining the personas, I moved on to the problem statement so I could clearly describe the core issues.

3. IDEATE

Information Architecture

I organized and structured the seven pieces of content according to the user needs identified through personas and problem definitions, and aligned with the goals of the project.

The key is to allow users to select the content they want through buttons on the home screen.

layout

I deliberated on how to arrange the buttons on the home screen. I concluded that option A, which allows users to effectively navigate through seven content sections on the kiosk screen, was the best choice. This is because option A offers better button readability compared to other options and provides visual stability during video playback.

4. PROTOTYPE & USABILITY TESTING

button design: STYLE

When I design the button style, I followed 3 key focuses:
‍1) How well they visually harmonize with the current video content while ensuring readability. 2)How effectively the icons convey their meaning.
3)How they can represent the museum's branding.

button design: STYLE

After incorporating three key focuses into the buttons, I presented three different color styles to the client, and Style B was chosen.

button design: STYLE

Because this style not only 1) harmonizes well with the video content on the kiosk screen but also2) reflects the museum's identity, while receiving many opinions stating that 3) it is visually appealing

button design: accessibility

I factored in the average heights of U.S. adults and teenagers to ensure the interface would be comfortably usable by all. I calculated an ideal viewing range of 23.7 inches to 29 inches to accommodate users of different heights, enabling a strain-free interaction.

button design: accessibility

For a 43-inch kiosk mounted 40 inch above ground, the average viewing distance ranges from 23.7 inches (60.4 cm) to 29 inches (73.7 cm). Based on these distances, a readability metrics recommended a minimum font size between 19.1px and 23.3px for readability.

button design: accessibility

However, this was the minimum requirement. After usability testing, I finalized a more user-friendly font size of 30px and button size of 235px to enhance interaction and ensure all users could easily read and use the kiosk.

button design: accessibility

Both gradient color schemes for the icon, #2970E9 and #0A469E, meet WCAG Level AA and AAA standards.


home screen

Home screen gives users a first impression and provide initial direction on how to navigate information. I explained to the client the need for an home screen for the following reasons:

1) Explore The Arab World: It directs users towards the primary purpose and exploration path of the kiosk.
2) Tap below to learn more(CTA): It motivates users to engage with the content actively.
3) Direct links: By providing direct links to various sections from the home screen, users can access areas of interest immediately without navigating through complex menu structures.

home screen: minimalist design

I proposed two different styles for the home screen to the client.
‍
The first design option features a minimalist approach:
The minimalist design reduces complexity and focuses on key elements. I intended for users to not be distracted by unnecessary visual elements, allowing them to quickly understand the core messages and functionalities.

home screen: arabic design
(Selected)

The second design incorporates traditional elements from the Arab region:
‍
1) By combining traditional Arab design elements with cloud imagery, the design aligns well with the museum's theme. My intention was to reflect culturally significant elements that leave a profound impression on visitors.
‍2) The background with flowing clouds offers a dreamlike and narrative ambiance, intended to hint at the beginning of the visitors’ journey through the exhibition.

After receiving feedback from museum staff that this design better suits the museum's atmosphere, I selected it as the final home screen design.
‍

Meanwhile, I implemented the interactions between each screen using BrightAuthor, a software designed for creating digital signage solutions for kiosks, based on previously designed screens.

Usability testing-1

I conducted a usability testing to evaluate how intuitive and visually engaging the prototype is.

usability testing-1

I received qualitative feedback on the intuitiveness and visual appeal. Additionally, the placement of pause and play buttons for educators led me to conduct another round of usability testing.

usability testing-2:
puase and play button

I conducted usability testing to determine the placement of the pause and play buttons.

usability testing-2:
puase and play button

The test results showed that 70% of participants felt that placing the play and pause buttons on the bottom right was the most natural.

final prototype &
demonstration

I completed all tasks and on the final day, I went to the museum to demonstrate in front of the client, and the project concluded successfully.

client feedback

We're excited and satisfied with the kiosk screen.
Thank you for your excellent work, Juyoung!

Thank you for scrolling!

What I've learned

The Arab American National Museum kiosk UX design project was more than just a professional engagement; it was a journey that enriched my understanding of UX design, from conceptualization to implementation. It reaffirmed the importance of empathy, reinforced the value of thorough testing, and demonstrated the profound impact of well-considered design on user experience. This project was not only about creating an interface but also about enhancing the way people interact with and perceive cultural content, making it a deeply fulfilling experience.

Previous Project
HORIZON: GM Sponsored project
Next Project
Farmlinker: food supply chain