Product Designer for AI & Digital Products
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
115
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
175
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
248
A request does not automatically change an agreement.
Scope Accord is a five-state interaction prototype designed around a common service-project problem: a client may hear “already included,” while the provider means “additional scope, cost and time.”
The proposed change remains structurally outside the current agreement until both parties express the same understanding of its impact.
One request.
Two interpretations.
One visible boundary.
Designed and built with React, TypeScript, CSS Grid and Playwright.
Live prototype:
https://scope-accord.vercel.app
2
118
Web Design and Development
Web Design and Development
View more →
Full Stack Mobile & Web | UI/UX Product Engineer | Devops
- $25k+
- Earned
- 7x
- Hired
- 5.0
- Rating
- 190
- Followers
Full Stack Mobile & Web | UI/UX Product Engineer | Devops
Building full websites based on your design vision
Building full websites based on your design vision
View more →
Developing performant & accessible web sites.
Developing performant & accessible web sites.
I build Ai powered web apps to improve messy workflows.
A 15-second luxury jewelry ad concept created entirely with AI video generation (MiniMax Hailuo 03), designed to show how brands can produce high-end campaign visuals without a studio shoot.
The piece follows a classic luxury commercial structure: it opens on a slow macro reveal of an emerald-cut diamond ring on black satin, moves to a statement necklace on a display bust, shifts to a model wearing matching drop earrings, and closes on a full collection hero shot with the tagline "Endless Elegance."
2
1
151
A leak doesn't wait for a callback.
You know the moment: water is dripping from the ceiling, you call the contractor, and it goes straight to voicemail. He's on a roof across town. You leave a message, try someone else, and by the time anyone calls back, the stain has doubled. The worst.
So I built Bytown Leak & Repair, a booking and operations app for a one-truck contractor in Ottawa. The problem I wanted to solve: let customers book help instantly, without the contractor ever having to pick up the phone.
See it in action here: https://booked-in-a-flash.lovable.app
Customers describe the problem, upload photos, and pick a time from live availability, all in about 60 seconds. AI reads the photos before the visit, so the contractor shows up knowing what's wrong and with the right parts.
On the owner's side, jobs are grouped by area for tighter routes, and each day starts with a morning brief showing every stop, the likely fix, and a price range. Questions get flagged, customer history lives in one place, and confirmations and follow-ups go out automatically. It means fewer missed calls for the contractor and no phone tag for the customer.
The leak is urgent. Booking the fix doesn't have to be stressful. 🔧
0
145
MERN Stack Web Developer | Clean, Responsive Sites
MERN Stack Web Developer | Clean, Responsive Sites
