Ai-Book

Overview

Ai Master was an educational technology startup based in San Diego back in 2017. I joined the startup team for 6 months as a product designer working on the project called Ai-Book. It was the first product Ai Master planned to ship, offering interactive learning materials on basic concepts related to artificial intelligence, featuring animations, video contents and interactive quiz besides online textbook. My primary responsibility was to design static and motion graphics according to the textbook. Our team successfully shipped the Ai-Book product online as planned within 6 month.

Using Graphics & Animations to Illustrate Abstract Concepts

The field of Artificial Intelligence is progressing rapidly. Yet as a student, it is hard to find a comprehensive textbook that systematically taught all related knowledge. Ai-Book is an online interactive textbook aiming to fill in this gap.  As part of the product design team, my goal as a UX Designer is: Optimize learners' online learning experience using Ai-Book.

Challenges to design education contents 

Designing textbook supplement on complex concepts in AI related field is challenging. Joining the team as a UX designer, I communicated with textbook content writers and web developers to deliver graphics and animations clarifying artificial intelligent concepts. Continually considering user’s learning experience, I tried to find the best way to not only deliver the abstract mathematical concept with graphs, but to also make it clear for beginners to understand and follow the logic. To conquer the challenging situation, I refined my work process of designing animation and made sure to test my design constantly.

Designing with self-generated template to increase work efficiency

To create an animation, I need to go through the above steps. Yet the final step was always time consuming, since completing one tutorial animation usually required creating multiple gif segments. Realizing that lots of time was wasted generating similar fade in and fade out effect, I designed a template with organized layers, naming customs and presets effect. In this way, the efficiency was greatly increased, since every designer can simply used the preset layers in the template and supplement the elements with the correct symbol. In this way, the tedious process was not only simplified but also standardized.

Highlight Features

There are no better way to understand how users felt than watching them interact with the design. After every iteration, I showed my design to multiple potential students new to the field of Artificial Intelligence. Asking users to speak out loud enabled me to fine tuned the animations in terms of speed of transitioning and length of animation. In the end, the following features was designed to enhance learning experience of different sorts of information

Illustrate concepts with relatable graphics

Illustrate complex calculation with motion design

Illustrate abstract mathematical concepts concretely with geometric shapes

Illustrate properties with step by step animations

Final Deliverable

Ai-Book successfully launched on Ai-Master’s website September 2017. The specific product consisted of 4 different books with tons of graphic illustrations, animations and interactive quizzes embedded to explain concepts. Unfortunately as all the founding members went on with new journeys of their life, Ai-Master was unregistered last year and the website was taken down for now.

But feel free to reach out! I am happy to discuss my work and showcase more sample animations I did when I was part of Ai-Master.

Takeaway

• Be a fast-learner: This is the first time I worked as a designer in a company. This job let me discovered my strength in learning new tools and concepts. I was able to learn the basics of Adobe Illustrator and Animation in the first few weeks I joined the team and start to create graphics based on the branding guidelines. I also realized that I will never learn all the skills I need for a job in school. Inevitably, every job will require me to quickly learn something new. Yet with this six months of intense startup experience, I am confident to call myself a fast-learner. I believe this strength will help me thrive in future positions as well.

• Finding patterns to increase efficiency: When designing real products, we are always facing time constraints. To ensure the quality of products, I believe it is important to find out best practices to create templates and design systems to avoid spending time on repetitive work. As I discussed previously, while designing animations, I came up with templates to handle similar motions. This approach not only boost efficiency but also ensured consistency of design work.

• Designing materials for educational purpose was fun: Being a designer in an Ed-tech startup helped me find my interest in designing for education. I am looking forward to working on other design for education projects in the future.