Skip to content
Ilham Rajab
← work

Prototyping a year in review engineers could trust.

A high-fidelity Framer prototype defining the motion, transitions, and narrative of Tiketux Reveal.

Role
UI/UX Designer
Year
2024
Scope
Interaction design, Prototyping, Motion
Collaboration
Engineering

Tiketux Reveal

Your year in motion

14 trips, 3 cities

Tiketux Reveal preview

Context

Tiketux Reveal is a personalized year-in-review experience that turns a traveler’s booking history into a story.

The experience depends on pacing and transition. Static screens could not communicate how chapters should arrive, hand over, and resolve.

Challenge

The experience depended on motion. Static screens could not communicate the transitions, pacing, and feedback clearly enough for implementation.

Role

I owned the interaction design and built the high-fidelity Framer prototype that engineers used as their primary reference for the complex animations and transitions.

  • Defined the chapter structure and narrative sequence.
  • Designed the motion principles: timing, easing, and handover between chapters.
  • Built the high-fidelity Framer prototype used by engineering.
  • Iterated with engineers as the design met implementation constraints.

Chapter structure

The experience plays as short chapters, each carrying one idea. Transitions hand over context instead of cutting, so the story reads as one continuous piece.

Your year in motion

Chapter transitions from the Tiketux Reveal prototype. Sample content.

Key decisions

Structured the experience as short chapters that reveal one idea at a time instead of a single dense summary.

Problem. A year of travel data can feel like a report instead of a story. Outcome. Each moment lands before the next arrives, and the pace stays deliberate.

Prototyped the real timing and transitions in Framer so behavior was something engineers could play, not imagine.

Problem. Handing motion to engineering with screenshots creates guesswork. Outcome. The prototype became the primary implementation reference for animations and transitions.

Designed transitions that tolerate variable content instead of choreography that only works with perfect data.

Problem. Personalized data arrives at different sizes and shapes. Outcome. The experience holds together whether a traveler booked twice or twenty times.

Collaboration

  • Engineers replayed the prototype to match timing and easing.
  • Ambiguous states were resolved against the prototype instead of over messages.
  • Implementation review compared the build against the prototype directly.

Outcome

  • The prototype served as the primary reference for engineers implementing the complex animations.
  • Design intent survived implementation: the released experience moves the way the prototype moves.
  • Tiketux Reveal shipped publicly.

Reflection

Motion specs written as prose would have produced a different, worse product. Playable prototypes are the spec.

Next time I would pair the prototype with a short motion token sheet, so timing values become reusable decisions instead of one-off craft.