PAKISTANI TRUCK ART
Pakistani Truck Art is an interactive digital prototype designed as a playful learning experience for a children’s museum. Inspired by the colorful hand-painted trucks of Pakistan, the project uses p5.js, basic geometry, animation, Urdu text, and clickable learning hotspots to introduce children to the craft, language, symbols, and motion behind Pakistani truck art.
The project began as a visual coding experiment where users could hover and click on a decorative truck. After revisiting the experience through a UX lens, I redesigned the interaction to include an educational layer. Users can now tap glowing dots on the truck to learn about Chamak Pati, Urdu quotes, painted motifs, and the role of the driver in personalizing the vehicle.
The goal was to make the truck feel alive while also helping young users understand that Pakistani truck art is not just decoration. It is a moving cultural tradition shaped by artisans, drivers, humor, poetry, pride, and craft.
PROBLEM
Cultural exhibits for children in Pakistan often rely on static images, objects, or long explanatory text. While these formats can share information, they do not always capture the movement and sensory richness of traditions like Pakistani truck art.
Pakistani truck art is experienced on the road. It moves, reflects light, carries Urdu poetry, displays personal symbols, and expresses the pride of drivers and artisans. A static image alone cannot fully communicate this energy.
The design challenge was:
How might I create an interactive museum prototype that helps children discover Pakistani truck art through touch, motion, visual feedback, and short learning moments?
QUALITATIVE RESEARCH
The project is a tribute to the artisans who create Chamak Pati, a steel-carved and painted decorative craft unique to these trucks. Over the past decade, I’ve studied these trucks, collected photographs of their quotes, and visited the artisans to understand their process. This design aims to honor their work and inspire future generations to appreciate this vibrant tradition.
USER
Primary users are children ages 6–10 visiting a children’s museum with parents, teachers, or museum guides.
KEY FEATURES
Clickable Learning Hotspots
I added glowing cyan dots to guide users toward interactive areas of the truck. These dots act as visual affordances, helping children understand where to tap without needing complex instructions.
Transitions, Hover and Click Interactions
Users can tap flowers, birds, eyes, and patterns to interact with them while experiencing a day to night transition.
Educational Info Cards
When users tap a hotspot, a small card appears with a short explanation. The cards are intentionally brief so the experience stays playful and does not become text-heavy.
Urdu Quote Translation
Users can tap the Urdu quote area to learn that truck art often includes poetry, jokes, and emotional phrases.
RESEARCH TO DESIGN DECISIONS
Chamak Pati reflects light and makes trucks sparkle as they move.
I added a clickable Chamak Pati hotspot and animated twinkling details.Pakistani trucks often include Urdu poetry, jokes, and emotional phrases.
I added an Urdu quote hotspot with a short translation.Truck art is visually dense, colorful, and symbolic.
I used repeated motifs, flowers, peacocks, eyes, flags, and bright colors.Truck art is experienced on the road, not as a static object.
I added a road, rotating tires, moving dashed lines, and a day-to-night transition.Children need simple prompts and immediate feedback.
I used glowing dots, hover outlines, and small pop-up cards to guide discovery.
WALKTHROUGH
USER JOURNEY
ITERATIONS
Version 1: Geometric Truck
I started by constructing the truck with basic shapes in p5.js. This helped me translate a visually complex object into simple coded forms.
Version 2: Decoration and Motion
I added emojis, bright colors, flowers, peacocks, eyes, stars, Urdu text, rotating tires, a moving road, and a day-to-night transition to make the truck feel dynamic.
Version 3: Twinkle and Chamak Pati Effect
To reference Chamak Pati, I added twinkling decorative elements that change color over time, creating a reflective effect.
Version 4: Educational Layer
After reviewing the project as a UX case study, I realized the prototype needed to teach users, not only entertain them. I added glowing clickable hotspots and small learning cards so children could discover the cultural meaning behind different parts of the truck.
Version 5: Visual Affordance Refinement
I changed the hotspot color from yellow to cyan because yellow was already heavily used in the truck design. The cyan dots stand out more clearly as interactive UI elements.
OUTCOME
The updated prototype transforms the truck from a decorative animation into an interactive learning experience. Users can now tap different parts of the truck to learn about Chamak Pati, Urdu quotes, painted motifs, and driver personalization.
The project now better supports its intended museum context because it combines visual delight with short educational moments. The interaction is simple enough for children to understand quickly, while still introducing meaningful cultural context.
This project helped me practice creative coding, interaction design, educational UX, and cultural storytelling within a playful digital prototype.
CHALLENGES
Because this prototype has not yet been tested with children, my next step would be to observe how children ages 6–10 interact with the hotspots. I would want to learn whether they understand what to tap, whether the cards are easy to read, and whether the experience helps them remember anything about truck art.
Future improvements include:
Adding sound effects, such as a horn or road ambience.
Creating custom illustrated motifs instead of relying on standard emojis.
Adding a “Design Your Own Truck” activity where children can choose colors, patterns, and quotes.
Creating a touchscreen museum kiosk mockup.
Adding an artisan spotlight section to show the people who make Chamak Pati and hand-painted truck art.
Testing the prototype with children, parents, or educators.
