The Interaction Codex
An Interface for Exploring Interaction Design
Digital Product Design • UI/ UX Design
💭 The Problem:
Interaction design shapes how we engage with the world, yet its presence often goes unnoticed. People interact with it daily—through apps, products, and environments—but don’t always recognize it. As a multidisciplinary field, its influence often blends into the background, making it difficult to define without a visual or hands-on example. What if people could learn about interaction design through the act of interaction itself?
💡 The Solution:
An interactive codex that helps users understand interaction design through hands-on discovery. Instead of just explaining concepts, it lets users explore and engage with each discipline directly.
👩🏽💻 My Role:
Product Designer and UI/UX Designer
🛠️ Tools Used:
Figma, Illustrator and Procreate
🗓️ Timeframe:
Year: 2025
Length: 4 weeks
🔍 Research Phase:
My research began with personal experience. When I tell people I’m an interaction designer—often in casual settings like Lyft rides—I’m usually met with confusion. Most don’t understand what interaction design is until I give a visual example, like the driver’s GPS interface. These conversations made it clear that while people use interaction design every day, they rarely recognize it since it blends into the background and crosses over multiple disciplines.
To support this, I explored different learning styles, starting with Montessori-inspired methods. The Montessori approach emphasizes self-directed, hands-on learning and collaborative play, which encourages independence and curiosity from an early age. Bringing this kind of tactile, exploratory learning into adulthood can help make abstract topics—like interaction design—feel more natural and approachable.
This idea is supported by Constructivist Learning Theory, which suggests that people learn best by actively building understanding through experience and reflection rather than passively receiving information. These insights led me to design The Interaction Codex, an interactive tool where users learn by engaging directly with the principles of interaction design.
📚 Precedents:
The Interaction Codex was heavily inspired by the Ology book series—like Pirateology and Vampireology—which made learning feel like an adventure. These books used flaps, envelopes, layered visuals, and hidden notes to turn each page into a discovery. While originally aimed at kids and tweens, they have an elegant, immersive nerdiness that appeals to adults who love world-building, lore, or beautifully illustrated books. They feel like a cross between an in-universe field guide to fantastical things and a vintage-style scrapbook filled with maps, letters, and wax seals.
What drew me in most was how the Ology books blended fictional storytelling with real educational content, making even complex topics feel fun and approachable. With The Interaction Codex, I wanted to capture that same spirit—introducing the abstract world of interaction design through hands-on exploration. Instead of just reading about principles, readers engage with them directly.
🧪 User Testing: Rapid Prototyping
To communicate the core idea behind The Interaction Codex, I created a rapid prototype of the main page, featuring an early version of the “wheel of disciplines.” This interactive wheel served as a central navigation hub, allowing users to explore different areas of interaction design from a single starting point. I shared this prototype with fellow designers to gather feedback. While the physical format successfully conveyed the concept, many peers felt it would have greater impact as a digital experience—especially since interaction design is closely tied to screens and digital tools.
✅ Iterative Design Process
In response to peer feedback, I transitioned The Interaction Codex from a physical book to a digital interface. This shift allowed the format to better reflect how interaction design is experienced in the real world—through screens, apps, and dynamic systems.
I began by sketching key screens in Procreate to explore how the wheel of disciplines would function and how content like examples, visuals, and key points could be arranged. These early layouts shaped the structure of each page.
To bring in storytelling, I designed cyberpunk-inspired HUD-style interface boxes in Adobe Illustrator. The cyberpunk style reflects the digital, system-based nature of interaction design and supports the narrative of the codex being passed from mentor to apprentice—turning the experience into a guided, immersive initiation.
I then exported the visual assets into Figma to build out the full interface. Every design decision—from layout to iconography—was made to ensure the experience stayed immersive, hands-on, and true to the original goal: helping users understand interaction design by engaging with it directly.
⚙️ The Prototype
The interface begins on a central navigation screen, where users are introduced to interaction design and invited to explore its core disciplines through a circular “wheel” layout. Each discipline opens to a dedicated page that breaks down key concepts, shows how they connect to interaction design and provides real-world examples. Interactive elements—like clickable cards and visual comparisons—help reinforce learning through direct engagement.
📝 Insights & Reflection:
Shifting to a digital format opened new opportunities for interaction, visual storytelling, and flexibility—making the project more aligned with how interaction design is experienced in the real world. It also challenged me to think critically about how to preserve the original spirit of exploration in a screen-based environment.
While the current interface introduces this narrative through structure and visual design, there’s more potential to weave the story into the user journey. To make the experience feel more immersive—like the Ology books that inspired it—I’d like the text and prompts throughout each page to feel like they’re part of a mentor-apprentice exchange.
Looking ahead, I plan to:
➡️ Add more interactive content to deepen learning in each discipline
➡️ Complete the remaining modules across the Codex
➡️ Conduct further user testing to refine navigation and clarity
➡️ Expand the narrative layer to make the learning experience more personal and memorable