Interactive Lesson
A system diagram using one or more of any media: illustration (hand or computer), photography, video, audio, interactive. Must be more than just a draw.io flowchart.
September 9 – September 30, 2024 (1 month)
Figma
Visualizing a simple system with an interactive website teaching users about the pen.
This project is an interactive online lesson designed to teach users how a pen functions as a system. It breaks down the pen into its individual parts and demonstrates how the elements of the system interact with each other and how the stocks affect the flows.
Originally, the project started out as an interactive children’s story titled “Tampa the Alien’s Earthly Finds,” where an alien character named Tampa learns about everyday human objects. Due to the limited time, I focused on simplifying the concept to just the pen lesson, while retaining the colours and typefaces.
This project is created for my “Designing for Existing Systems’ course. If I had the time to continue working on this project, I would go more in-depth about the life cycle of the pen, further explaining and demonstrating how different elements or stocks can affect the flows of this system.
Typography & Colour
This project uses a code-like colour palette and geometric sans-serif typography, mirroring the systematic feel of the pen’s life cycle.
Interactive Moments
These elements were made using components on Figma with delayed smart animations.
Bento-Box Layout 🍱
The lesson features a “bento-box” layout, where users can hover through the different parts of the pen to see animations of each step of the system, then scroll through each step in detail.
Made Through Real Life Observation
By looking through a pen with a clear casing, I was able to see for myself how the inner workings of a pen operated.
Choices... Choices... Choices...
The user’s choices leads to different outcomes, as the user themselves are also a part of the system. By replacing the stock, they are lead to a feedback loop, whereas choosing the second option ends the system.
Takeaways
This project helped me grow my skills in Figma and interactive design, specifically in creating engaging, educational experiences. It challenged me to problem solve when figuring out how to make the side scrolling work. In order to solve this, I broke each step into its own frame and animated the scroll, similar to how fullpage.js works.
BoboPomo
Miss Me Musika
.png)