An Interactive Introduction to Artificial Intelligence

Jun 2018 - May 2019


Jiaju Ma, Yicong (Michael) Mao, Yimei Hu


OKAI is an interactive introduction to Artificial Intelligence. The project uses interactive graphics to introduce Artificial Intelligence concepts to a broader audience who may have limited or no background in computer science and higher mathematics. We included 7 chapters in our website that introduces the user to fundamental concepts of deep learning.

As the content creator of OKAI, I am in charge of the contents of OKAI. I created the structure of the contents, ideated multiple graphics, wrote and edited content explaining AI concepts, and translated the website into Chinese.

This project was supported and funded by the Science Center at Brown University and the Brown Arts Initiative Student Grants. This project is also archived in the Arctic Code Vault as a part of open source human knowledge designed to last at least 1,000 years.

All Chapters

Content Design for Fragmented Reading

In the age of information explosion, content that is designed for the general public needs to compete with other apps and contents to retain the focus of our readers. The main venue to consume information has become mobile devices. This demands us to create a fun, easy, and short learning experience for our readers that is also mobile-friendly.

Due to the popularity of mobile device usage and short time-span of fragmented reading sessions, we need to ensure that we use the minimal amount of graphics and text. Throughout our contents, we relied on easy-to-understand analogies, simple examples that are easy to visualize, expanded tooltips for more accurate definitions, and providing a summary and glossary at the end of each chapter for quick references.

Analogies gives us a chance to tap in the user’s personal experiences and offload large chunks of concept explanation and visualization to the user’s imagination. For example, we used “walking downhill” as an analogy to “gradient descent”. Here, we expanded on the analogy and explained how each “step” in gradient descent is exactly like our “steps” in walking downhill, but with the caveat that a “gradient descent step” always takes the steepest path.

For concepts that don’t have a real world analogy, we used simple examples that are easy to visualize and explain. For example, to explain the linearity of perceptrons and its limitations, we gave a simple example of how AND is linearly seperable, but XOR is not. This is a good example since we can easily plot this out on a 2D plot using only 4 points. With the power of animation, we can show that it is impossible for there to be a single line dividing the true points and false points of XOR, thus explaining the limitations of perceptrons due to its linearity.

For technical terms that are essential for understanding, we used tooltips for further explanations. When the user click or hover on the bolded technical terms, a tool tip will appear and concisely explain it in one sentence. This allows us to throw away transitional languages and make our content more concise and easy to read.

At the end of the chapter, we provide a quick summary and a glossary of terms as a quick review of the content. This allows us to transition the reader to the next chapter and quickly reinforce important ideas touched on this chapter.

If you are looking for more details from the design perspective, please check out Jiaju’s article.