Interaction Design Projects in OttawaInteraction Design Projects in Ottawa
Projects
People
Cover image for Packaging looks like graphic design.
Packaging looks like graphic design. But every word takes physical space. For Day 19, I built PACKSHIFT an interactive packaging experience where claims, languages, warnings and data become pressure on a finite surface. It starts with the real 56 mm width of the carton. Then you try to make everything fit. Make the box smaller and the pressure becomes physical: 56 mm → pressure → CRACK → recovery → museum The final package doesn’t just show the solution — it remembers the negotiation that produced it. Underneath the public game is a deeper spatial compiler built with Blender + Three.js / React Three Fiber, where the same package can open, decompose, expose its dieline, redistribute information and refold. Packaging is not a file. It is a compiled surface. Full case study ↓ https://contra.com/p/3WBccUlM-packshift-packaging-is-a-compiled-surface Live experience ↓ https://packshift-awd.pages.dev/ GitHub ↓ https://github.com/Faadil1/PACKSHIFT Would love to know which moment lands most for you: Actual Size, the Hydraulic Press, or the Museum?
1
17
Cover image for DAY 16: CONDITION TRACE 30 Days
DAY 16: CONDITION TRACE 30 Days of Real Business Problems Phase II I stopped at Day 15. Not because I ran out of problems. The format was becoming predictable. So I changed the rules. Phase II starts with a problem from museum conservation. Condition reports can document what was visible at different moments — but they cannot always prove when a physical change actually occurred. So instead of asking: “Where did the damage happen?” I reframed the problem: Trace when the feature first appears in the documentation. That became CONDITION TRACE. The prototype follows a fictional museum-loan case involving the same vessel across four signed condition records. Earlier examinations were completed under diffuse light. During the return-arrival inspection, the conservator introduces raking light. As the grazing angle changes, a hairline crack on the vessel’s upper-right shoulder becomes legible. That observation is preserved as OBS-04 and carried through a traceable evidence chain: SRC-03 → OBS-04 → CMP-01 → LIM-01 → FND-01 But the system deliberately refuses to overstate what the evidence proves. The earlier examinations were not performed under equivalent lighting conditions. So the conclusion remains narrow: FIRST DOCUMENTED APPEARANCE AUGUST 3, 2026 Not: “The damage happened on August 3.” Not cause. Not responsibility. Not liability. The interface follows the same principle. Light becomes an examination instrument. The observation persists through comparison. The evidence lineage remains visible. And the final finding must be deliberately sealed. The goal wasn’t to make an interface that looks forensic. It was to make the boundary of the evidence visible and traceable. TRACE THE RECORD. NOT THE BLAME. Live prototype: https://day16-condition-trace.vercel.app Day 16 / 30 Phase II begins.
2
98
Cover image for REHEARSAL: The Room Has No
REHEARSAL: The Room Has No Chalk Some conversations stay with us for days before they ever happen. We replay the possible replies. We soften what we need to say. We search for the perfect sentence until the moment passes. As an introvert, I know that feeling well. So I designed REHEARSAL, a preparation room for difficult real-world conversations. Most AI tools try to write the sentence for you. REHEARSAL refuses. You write the reply you are afraid to hear. You write your first, instinctive response. You identify the reflex behind it. The room contributes one structural constraint not a replacement sentence. Then you write again, entirely in your own words, and say it out loud. The central rule is simple: You write both sides. This room never writes for you. The visual world is built around the idea of The Black Floor: one person draws both sides of the conversation, while the room is only allowed to mark a limit. No chatbot. No generated dialogue. No emotional score. No simulated person on the other side. Because the real conversation does not happen inside the product. Practice here. Speak there. Designed and iterated in Flowstep, then developed into a working React experience. Flowstep: https://app.flowstep.ai/file?activeFileId=768ea904-4954-4f20-a863-8e68ccec1166 Live experience: https://rehearsal-psi.vercel.app #Flowstep #ProductDesign #UXDesign #InteractionDesign
2
4
219
Cover image for Most check-ins ask how people
Most check-ins ask how people feel. STARTFIELD asks what the room has capacity for. Two minutes before a workshop or team session, a facilitator often has to decide whether to begin as planned, slow down, add context, or reduce the scope. STARTFIELD turns three anonymous, temporary responses into a tactile collective field: Ready to dive in Need a slower start Need context first No names. No personal profiles. No historical tracking. No automated recommendation. The field makes the group’s current capacity visible, while the final decision remains human. Built as Day 12 of my 30 Days of Real Business Problems challenge, using Figma Make, original 3D token assets, and Animos for the presentation film. The room resolves before the session begins. Live prototype: https://shrub-gong-08594418.figma.site How should a facilitator read the room without turning a check-in into surveillance?
4
20
521
Cover image for AFTER THE SIGNAL: The System
AFTER THE SIGNAL: The System Chose Consistency. The Human Chose Meaning. For the Envato × Contra Human by Design challenge, I created AFTER THE SIGNAL, an editorial design system about a specific creative conflict: What happens when the automatic answer is polished, coherent, and still wrong for the meaning? Issue 01 established a confident visual system. For Issue 02, the automatic recommendation was obvious: repeat the same typeface, image language, density, and rhythm. The result was consistent. It was also too certain for a story about the silence before anyone knows whether a system has failed. My Human by Design moment was not “make it different.” It was: REPEAT THE ESTABLISHED IDENTITY × PRESERVE WHAT ISSUE 02 NEEDS ✓ I redirected the typography, grid, hierarchy, spacing, image meaning, motion rhythm, and sound around hesitation and uncertain transmission. Envato was used across: ImageGen VideoGen SoundGen MusicGen The fjord became the language of stability. The relay became the language of uncertain transmission. The handoff click marked the exact moment human judgment took control. The tools generated the visual and sonic ingredients. Human judgment decided what they meant. Interactive prototype: https://actor-sweat-63115452.figma.site THE SYSTEM CHOSE CONSISTENCY. THE HUMAN CHOSE MEANING. #envatochallenge #HumanByDesign #MotionDesign #CreativeDirection #EditorialDesign
3
214
Cover image for Before Bar One: The First
Before Bar One: The First Version Proved the Mechanism. Squarespace Turned It Into an Experience. Before Bar One did not begin as a website. It began as a small functional prototype for Day 3 of my 30 Days of Real Business Problems challenge. The original idea came from a very specific orchestral problem: Five musicians receive their parts and begin rehearsal together. Four parts continue normally from rehearsal mark C to rehearsal mark D. But in one edition, the Horn in F part contains eight missing bars. The page still looks complete. The paper is still ruled. The rehearsal continues. But one musical route has quietly disappeared. That first prototype was designed to prove a single interaction: The mechanism worked. Visitors could move from the fictional 1987-F field edition to the revised 2001-R edition and watch the orchestral route reconnect. But the experience still felt like a product demonstration. It explained the mechanism, but it did not yet feel like the kind of environment where someone might discover, inspect and interpret an edition discrepancy. For the Squarespace Make It Real Challenge, I decided not to replace the original idea with a more conventional brand website. I kept the interaction and rebuilt everything around it. The result is Before Bar One An Interactive Critical Archive. Rather than presenting the problem as a dashboard or software tool, the Squarespace experience treats it as a fictional archival incident. The visitor enters an editorial environment built around records, catalog references, edition controls, rehearsal routes, incident reports and constructed evidence. The visual system uses warm ivory, charcoal, archival brass, fault red and restoration mint. Editorial serif typography is paired with monospace archive labels, fine rules, stamps and catalog notation. The central question remains simple: What changes when the edition changes? In the 1987-F state, the Horn in F becomes silent between rehearsal marks C and D. The visitor can inspect: five orchestral routes; one interrupted path; eight empty measure cells; a ruled but unprinted passage; a tactile archive record; an unresolved incident status; a restoration diagram that remains incomplete. The part does not look damaged. That is the point. The issue is not the physical copy. The issue is the edition. When the visitor selects 2001-R, the archive changes with it. The missing measures return. The archive object is recatalogued. The incident status changes. The Horn in F route reconnects. The five parts arrive together again. The edition selector is therefore not simply a visual toggle. It becomes the central reading device for the entire experience. I also created a second page called The Reading Room. This page expands the interaction into a fuller archival consultation and includes: Archive Record 001; Archive Record 002; a direct edition comparison; an Incident Report; an Evidence Wall; a Build Record; the final closing notice. The Evidence Wall presents several fictional artifacts: a photographed leaf, a copyist-style marginal cue, a constructed sketch source, a restoration analysis tag and a transcribed cue sheet. All institutions, dates, editions, records and musical evidence in the project are explicitly labelled as fictional or constructed. The goal is not to imitate a real historical discovery, but to demonstrate how an edition-comparison workflow could be transformed into an interactive narrative. One of the most important additions came late in the process. I realized that visitors could see the missing passage, but they could not yet hear what it changed. So I created two versions of the same short orchestral rehearsal: Both versions use the same tempo, harmony, strings, duration and arrangement. The only intended difference is the Horn in F during the central eight-bar passage. In 1987-F, the strings continue while the horn disappears. In 2001-R, the horn remains present and rejoins the ensemble through the restored passage. These recordings were added through a native Squarespace Listening Station using Squarespace Audio Blocks. The visitor can now: Squarespace became more than the place where the prototype was published. It provided the structure for turning one interaction into a complete public experience: a clearer five-second introduction; a responsive editorial layout; a two-page narrative architecture; navigation between the Archive and Reading Room; native audio presentation; a stronger visual hierarchy; a final layer of polish and atmosphere. The core edition mechanism is implemented as a custom HTML and CSS interaction embedded within Squarespace. Around it, Squarespace provides the public-facing framework, page structure, responsive composition and native Listening Station that make the project feel complete. The transformation was not: It was: The original version proved that the idea could work. The Squarespace version gave the idea a world, a rhythm and a reason to explore it. Explore the project Interactive Critical Archive https://horse-grey-66kc.squarespace.com/before-bar-one The Reading Room https://horse-grey-66kc.squarespace.com/reading-room Password 1234 Original Day 3 prototype https://faadil1.github.io/before-bar-one/ The first version proved the mechanism. Squarespace turned it into a visual, editorial and audible experience. Before every rehearsal, check the edition. #SquarespaceChallenge #MakeItReal #Squarespace #FinishLayer #WebDesign #CreativeDevelopment #InteractionDesign #EditorialDesign #SoundDesign #UIUX #Contra
1
237
Cover image for Day 7 of 30 Days
Day 7 of 30 Days of Real Business Problems: Northline A handoff request is not a transfer of responsibility. I built Northline, a custody passport for workflows where accountability must remain explicit during a handoff. The receiver can verify the load, seal, units, condition, and photo evidence. Even when every check is complete, custody has not moved. Only explicit acceptance creates the Transfer Imprint, locks the new custody sheet, and makes Northline the current custodian. When the handoff expires, no imprint is created. Charlotte remains responsible. An exception can be assigned to Jordan Lee, but exception ownership does not transfer custody. The central design principle: Responsibility moves only when acceptance leaves a permanent imprint. Live prototype: https://faadil1.github.io/northline/ I’ll add a closer look at the accepted and expired states in the comments.
2
0
136
Cover image for Day 5/30: MISREGISTER An operating-room case
Day 5/30: MISREGISTER An operating-room case can still look ready on paper after it has stopped being operationally executable. I built MISREGISTER to make that gap physical. CASE 04 is connected to four changing dependencies: — staffed OR team — sterile instrument set — postoperative ICU bed — remaining operating-room time As those windows drift apart, the operating list stays unchanged. The signature moment: the crank freewheels to the end-stop while CASE 04 still reads SCHEDULED. Only after that failed test does a human re-strike the case as DELAYED or RESEQUENCED. This is not clinical decision support. It is a synthetic operational prototype exploring the difference between a scheduled slot and executable capacity. Built with React, TypeScript, SVG, Playwright, Remotion, Claude Code, Kimi, Agent Reach, ChatGPT, and AI33Pro. Live prototype: https://faadil1.github.io/misregister-day-5/ Source: https://github.com/Faadil1/misregister-day-5
4
4
355
Cover image for Day 4 of my 30
Day 4 of my 30 Days of Real Business Problems challenge. A veterinary patient leaves the clinic at 6 PM. The next scheduled follow-up begins at 8 AM. That leaves a 14-hour interval where care continues, but ownership may not be explicit. I designed CORBEL to make that gap physical. Instead of treating ownership as a status, task, or notification, CORBEL turns the unsupported interval into a structural failure. Maya Chen does not check a box. She becomes the exact missing component, accepts custody, enters the gap, and takes the load. Only then does the structure recover. No toast. No celebration. The system simply stops failing. CORBEL — A Structural Handoff for Veterinary Aftercare. Live prototype: https://faadil1.github.io/corbel/ Source: https://github.com/Faadil1/corbel
2
5
454