Client project · ui / ux design

Arab American National Museum Kiosk UX Design

Crafting an Interactive Narrative Kiosk UX to Educate Visitors on the Arab World by Enhancing Usability and Visual Appeal

ABOUT THE PROJECT

- The Arab American National Museum is the first and only museum in the United States devoted to documenting and sharing Arab American contributions that shaped the economic, political and cultural landscapes of American life. I was commissioned by the Arab American National Museum to design and develop an interactive kiosk screen.

GOAL

- Creating a visually appealing and intuitive interface for existing video and static image content.

CONSTRAINT

- Developing the kiosk while overcoming the high accessibility and learning curve of the BrightAuthor development tool for kiosk development.

OUTCOME

- I designed and programmed a prototype for the museum visitors' kiosk UX, delivered it to the client, and received positive feedback.

IMPACT

- The structured UX of the kiosk will provide an opportunity for the 50,000 visitors each year to understand Arab culture, fostering mutual understanding among people of diverse cultural backgrounds, reducing prejudices, and recognizing the value of a multicultural society.

MY ROLE WAS

- UX Design
- UI Design
- Programming

TOOL

- Figma
- Adobe After Effects
- BrightAuthor

PLATFORM

- 43 Inch Kiosk

I WORKED WITH

- Curator of Exhibits
- Engineer

YEAR

- February 2024 ~April 2024

Understanding the context

Kiosk setup and client requirements

Above all, the client wanted a visually appealing design

SOLUTION 01

'Storytelling' Before Visual Appeal

But I believed that it was important to consider how to effectively deliver
the museum's content to visitors before focusing on visual appeal.

Why storytelling?
01

Intro page: Inviting visitors to the arab world

I positioned visitors as travelers exploring the Arab world
and incorporated four elements on the intro page
to capture their attention.

Intro page background exploration

I presented the client with two versions of
the intro page background, and they chose option A.

02

Journey through the arab world:
From geography to cultural insights and social issues

I arranged the content to guide users from a basic geographical understanding to
a comprehensive grasp of the Arab world through its history, culture, and social issues.

SOLUTION 02

Visual Appeal But 'Functional'

I ensured usability by considering the setup with a 43-inch display.
I carefully selected design elements to enhance user experience,
taking into account the screen size and environment.

01

Focused and flexible: A functional content layout

I placed the main content area at the top to keep visitors focused
and added seven buttons at the bottom for easy content switching.

Layout exploration

When working on the layout area, I chose Layout A over Layout
B due to its balance and intuitiveness.

02

Button design for effortless selection

I focused on designing buttons with
excellent readability for the kiosk environment.

Research shows: Minimum button font size ranges from
18.7px to 23.4px based on gender.

The optimal font and button size

I conducted usability testing to verify the research and identified
the most impactful font size and button size for users in real-world scenarios.

Button style exploration

When working on the buttons, I presented three different concepts to the client,
and Concept A was selected because it was vibrant and modern.

Client's last-minute request: Add play and pause buttons

Near the end of the project, I demonstrated the prototype to the client.
During this demonstration, the client requested that I add
play and pause buttons for educators when playing videos.

USABILITY TESTING

Where should I place play and pause buttons?

I created play and pause buttons on a paper prototype,
assigned specific tasks to ten participants,
observed their responses, and gathered feedback.

The bottom right is the ideal place

Over 70% of participants chose the bottom right, while the rest
preferred the bottom left. Due to less overlap with the video, I decided
to place the buttons in the bottom right.

Final delivery

After completing the final testing, I delivered the final prototype to the client.
The client was very pleased with the results. This kiosk prototype will soon be
in use at the Arab American National Museum.

IMpACT to the real world

One Kiosk Will Connect 50,000 Visitors to Arab Heritage Each Year.

The kiosk will provides an immersive educational experience for the 50,000 visitors each year, offering comprehensive insights into Arab culture through interactive visual materials. This journey will spans from geographic awareness to cultural insights and social issues, allowing visitors to gain a thorough understanding of Arab culture. It will fosters mutual understanding among people of diverse cultural backgrounds, reduces prejudices, and helps recognize the value of a multicultural society.

Thank you for scrolling!

What I've learned

🏛️ The Arab American National Museum kiosk UX design project was a different experience from the web and mobile projects I had previously worked on.

1️⃣ Most of my previous projects were web or mobile interfaces. The Arab American National Museum kiosk screen design was different due to its large size. I needed to pay greater attention to ergonomic factors, accessibility, and font readability.

2️⃣ I learned that it is important not just to convey information, but to present it in a way that tells a compelling story. Because effective storytelling significantly enhances the user experience and improves the efficiency of information delivery.

3️⃣ When I first used the kiosk development tool BrightAuthor, I had to overcome its high accessibility and steep learning curve. There were many challenges in learning and utilizing this new tool, but overcoming them allowed me to grow significantly. This experience improved my ability to learn and apply new technologies.

More in the Desktop.

You are now reading the mobile version of the site. For detail case study, visit https://www.juyoungux.com with a desktop browser :)

About the project
Context
Solution 01
Solution 02
Usability testing
Final delivery
Impact