How AI Works
Crafting a visual system to teach users how generative AI works through interactivity and motion.
Software: Figma, After Effects
Brilliant is a STEM learning app on iOS, Android, and the web. It’s a platform where players engage with 60+ interactive courses to improve their problem solving skills.
Goal: Leverage the popular interest in generative AI to create new content teaching how text-to-image generation is possible.
Strategy: An interactive course where the user manipulates data and parameters in order to discover how neural networks make predictions.
Timeline: Around 4 months, splitting my time with other projects.
Team:
Producers - Josh Silverman (lead), Aaron Miller
Developer - Yufeng Zhao
Designer - Brendan Milos
Create a visual system to communicate key generative AI concepts including use of typeface, color, iconography, and motion design.
Improve interactive features to better align with the product design system and maximize usability for mobile and web.
Collaborate with the developer to implement designs within the constraints of our in-house tools.
Discovery
I joined this project part-time after it had kicked off, joining a full-time team of producers and a developer. Due to having limited bandwidth to dedicate on this project, I prioritized work based on an overall understanding of the course content, existing prototypes, and producer sketches for other new features.
Design
We used the knowledge gathered during the discovery phase, including pedagogical requirements and tool constraints, to focus on improving usability and aligning with the larger product.
Explorations
Initial Figma explorations for the various interactives and animations helped us to hone in on usability issues and begin identifying the building blocks of our style.
Style Guide
After exploring several features, we built a style guide specifically for this content based off of the existing product design system, paying extra attention to the ways that we visualized the AI process and data.
Visual & UI Designs
The process to create the final designs involved reviewing with the producers, developer, and product design team. It was important to achieve a consistent quality across the whole course, but also for this content to align with the whole product.
Motion Design
An important part of visually communicating data in this project was adding motion. This added a layer of clarity not possible in the static designs.
Dev Handoff
The process to get final designs implemented was iterative and included the style guide as well as content-specific dev guides with annotations, measurements, and re-usable components. This was an important step, because it minimized the guess work on our design intentions while also surfacing any feasibility issues regarding propriety toolsets.
Testing
Due to limited time, we weren’t able to conduct usability testing beyond reviewing with the internal team. However, we still had our teammates review implemented designs in addition to dev team testing. This was important to validate the design, seeing how users interacted with the content and ensuring that we addressed any inconsistencies or gaps in the style guide.
Conclusion
Working on “How AI Works” up-leveled my ability to balance working within an established system while also tailoring design standards for specific content. During production, I would often look holistically at the project to produce artifacts guiding the style. This helped me gain an eye for consistency.
This project challenged me to grow my product design skill set and rely less on my illustration background. The content’s focus on how AI works required visualizing abstract concepts of measuring data and allowing users to explore it in order to gain a better understanding of generative AI.
Team feedback was essential to shipping content that met user needs and satisfied their curiosity to learn a topic that is more relevant today than ever. Company leadership was extremely proud of this addition to the course library.