top of page
Screenshot 2023-07-25 at 16.46.55.png


An interactive introduction to artificial intelligence (AI)



OKAI is an interactive introduction to Artificial Intelligence (AI). The project aims to demystify and introduce Artificial Intelligence concepts to a broader audience with limited or no background in computer science. It utilizes web-based interactive graphics and animations to visualize the working principles of Artificial Intelligence. OKAI is in the format of a website, with each webpage functioning similarly to a chapter in a book and introducing one concept at a time.

As the founder of this project, I assembled a small but multidisciplinary team consisting of engineers and designers. I created an initial prototype and pitched it to various sources to secure funding. Then, I led the design of OKAI’s website, visual identity, interactive components, and motion graphics. I also developed and implemented the OKAI website and its interactive features.


UX Designer


January 2022 - May 2023


2 designers, 2 engineers, 1 advisor


Figma, TensorFlow, Lottie.js, GreenSock.js, ScrollMagic.js, Illustrator, After Effects

Screenshot 2023-08-02 at 16.41.22.png
Screenshot 2023-07-26 at 15.56.36.png
Screenshot 2023-07-26 at 15.46.07.png



In a paper published in ACM SIGCHI 2017 (top conference in Human-Computer Interaction) named UX Design Innovation: Challenges for Working with Machine Learning as a Design Material, Dove et al. described challenges faced by designers in the tech industry: they are designing products that are powered by advanced technologies like Artificial Intelligence and Machine Learning, yet their artistic or design background did not prepare them to fully understand how these things function behind the scenes. AI is a trending topic that frequently appears in the public eyes. However, it's hard for people with little background to learn it in an efficient way since the information online is everywhere. There's no resource focusing on explaining the fundamental principles instead of on the mathematical proofs and coding. 

Screenshot 2023-07-26 at 16.04.35.png



The goal of the research was to understand if the general audience has an interest in learning more about AI. To do so, I created a 9-question survey that was available in two languages - English and Chinese. A total of 505 valid responses were received, and the respondents were in different industries and had various levels of schooling. Almost all respondents (94%) have heard of terms like “AI”, yet 90% of them rated that they are only minimally familiar with how AI works fundamentally. In contrast, 83% of the respondents expressed interest in learning more about it. This result has confirmed my hypothesis that there is a need for people to learn and understand how AI works behind the scenes. In terms of content, the responses showed that people are less interested in the technical aspects of AI than its fundamental principles and real-life applications. We also learned that people preferred to learn these concepts in a visual dominant format.

Screenshot 2023-07-26 at 16.12.14.png
Screenshot 2023-07-26 at 16.12.08.png
Screenshot 2023-07-26 at 16.36.34 (1).png
Screenshot 2023-07-26 at 16.41.13.png
Screenshot 2023-08-02 at 15.37.32.png



Design Process

Based on our research, we explored various formats and interactive mechanisms for OKAI. After many brainstorming sessions and iterations, we decided to concentrate on the most fundamental interaction mechanism of the web - scrolling. We wanted to craft an experience for our users that enables them to reveal OKAI’s textual contents and control the timeline of our visualizations and motion graphics by simply scrolling up and down.

Screenshot 2023-08-02 at 16.41.06.png
Screenshot 2023-08-02 at 16.42.30.png



User  Testing

We recruited 15 users (age 18 - 45) with various academic and professional backgrounds to test a working prototype of OKAI. We observed them interacting with OKAI and interviewed them afterwards. We have learned the following:

Users liked that animations and content can be controlled by scrolling
The primary interaction feature in OKAI is scroll-controlled animations - users scroll to advance or reverse the animations. Many users thought that this feature allowed them to learn and digest the complicated concepts of AI at their own pace. “I can very easily go back to or replay a certain section of an animation if I just scroll up or down,” a user commented.

Users appreciated the presence of the scroll indicator
On top of every chapter page, we added a scroll indicator that informs users how much they have scrolled from the top of the page. Users thought this features affirmed the affordance of scrolling and indicates how much they have progressed into the chapter. Moreover, because scrolling was also tied to the timeline of the animations, the scroll indicator also played the role of a video progress bar.

Users did not discover that bold text can be hovered over to trigger tooltips
For technical terms used in the chapters, we provided additional explanations for each of them in the format of a tooltip, which can be triggered by hovering. However, some of the users did not discover such affordance of the bold texts in the chapters.

Users were not sure about where the navigation arrows lead to
The landing section of each chapter provides an overview of the chapter’s content. In order to allow users to quickly browse and navigate between these chapters, we added arrows to the sides of landing sections. However, it was hard for new users to discern where the arrows would lead them too.

Final Product

OKAI, an interactive introduction to AI, consists of seven chapters, each devoted to explain and illustrate one concept in the field of AI. It is a fully responsive website that features scroll-controlled animations and interactive components.

Screenshot 2023-08-07 at 19.06.26.png


Interaction Design

Scroll-controlled Animations

Lying at the heart of OKAI, scroll-controlled animations will play or reverse according to how users scroll. Unlike traditional videos and animations that have a fixed timeline, this new media format allows users to be fully autonomous when they are exploring the world of AI.


Interactive Module

The first chapter of OKAI, Chapter 0, features an interactive module in which an AI algorithm recognizes digits written by users. The interaction is simple and intuitive - the digit written in the white box will trigger a series of computations when the “recognize” button is clicked, and the result is displayed in the grey box.


Keyword Tooltips

Key technical terms in the chapters are bolded, and hovering over them triggers a tooltip that contains definitions and additional information of the terms.


Quick Navigation System 

For each chapter, an overview of its contents is provided in its landing section. To mimic how users will flip through a book to browse contents and get an overall understanding of what the book is about, navigation arrows that bring users to previous and next chapters are added.For each chapter, an overview of its contents is provided in its landing section. To mimic how users will flip through a book to browse contents and get an overall understanding of what the book is about, navigation arrows that bring users to previous and next chapters are added.

Screenshot 2023-08-02 at 16.29.23.png
Screenshot 2023-08-13 at 00.06.13.png


Visual System

Screenshot 2023-08-08 at 14.48.54.png
Screenshot 2023-08-08 at 14.49.04.png


Screenshot 2023-08-08 at 14.49.19.png


Motion Graphics



OKAI not only validated the project's assumptions but also offered nuanced insights that have profoundly influenced content creation and presentation. The confirmation of user interest in AI learning, coupled with the emphasis on real-life applications and visual learning formats, provided a strategic direction for enhancing the project's impact and effectiveness. The findings underscore the value of user-centered design in creating educational platforms that cater to diverse audiences and bridge knowledge gaps in complex domains like AI.

​In the future, I want to conduct more user testing and implement iterative updates based on user feedback. I would also like to establish mechanisms for users to provide feedback directly within the interactive platform. This would enable continuous improvement based on user suggestions, allowing the platform to adapt and evolve based on real-time user needs.

bottom of page