ASU PREPARATORY ACADEMY

UI/UX design, illustration, and interactive storytelling for an
online K–12 learning platform.

 

Each project started with a curriculum strategy that defined what students needed to learn and accomplish. Working within each curriculum’s established style guide and requirements, my role was to bring that content to life visually and interactively in a way that supported the subject matter.

ASU Prep interactive learning screens for Rome in Crisis, featuring illustrated Roman characters, historical storytelling, dialogue choices, and educational UI design.
ASU Prep educational interface designs featuring illustrated characters, interactive conversations, student response options, and decision-based learning.
Prom Pandemonium learning experience featuring illustrated high school students, conversational interfaces, and interactive decisions about planning a school prom.
Collection of ASU Prep educational UI designs featuring illustrated characters, interactive quizzes, decision-making activities, and visual learning tools.

One of the more immersive storylines placed students in the role of an East African merchant, making decisions about what to trade, where to travel, and how those choices affected the journey.

The experience combined information, markets, maps, decision-making, and consequences. I designed the UI around clear actions and manageable amounts of information so students could explore goods, make selections, plan routes, and see the outcome of their choices without losing the sense of discovery.

Illustration was a big part of making the experience feel like a story rather than a set of screens. I worked alongside another illustrator on the custom artwork, while also creating supporting elements and some graphics myself. We also adapted stock artwork where it made sense, which helped us build a cohesive historical world within the project budget and timeline while keeping the experience visually consistent across the interface.

East Africa Trading interactive storyline featuring historical illustrations, merchant characters, and an educational trading experience set in East Africa in 1324.
East Africa Trading interface showing an illustrated marketplace in Kilwa, selectable trade goods, pricing information, and interactive shopping cart elements.
Interactive East Africa Trading storyline screens featuring illustrated sailing journeys, Indian Ocean trade routes, maps, and decision-based navigation.

BioBuddies took a different approach to interaction: an avatar-building experience that allowed students to create a character by combining different biological variables.

ASU Prep Build a Bio-Buddy avatar creator introduction featuring a colorful geometric face illustration and an interactive character-building experience.
Bio-Buddy avatar creator interface featuring illustrated face shape options, a customizable character, and a simple selection-based UI.
Collection of nine illustrated Bio-Buddy avatars showcasing varied skin tones, facial features, hairstyles, and character combinations.

The design needed to make a large number of possible combinations easy to understand and enjoyable to explore. I developed the interface and illustrated component system so individual features could work independently while still creating cohesive characters when combined.

Accessibility and representation were also important considerations. Because no finite set of illustrated options could fully represent the range of human biological variation, the system needed to offer meaningful variety without suggesting that the available choices represented every possible difference.

Bio-Buddy avatar customization screens featuring illustrated lip shapes, diverse skin tones, and selectable facial features.
Bio-Buddy interactive avatar builder showing selectable skin tones, hair colors, eye colors, and facial features within a modular character design system.