Prototype Demo

Prototype demonstration — the SwiftUI build in action

Letterboxd Live

2024 — 2025

Interaction Design · UX Research · SwiftUI Engineering · Self-Perception Theory

A three-part capstone that reimagines Letterboxd as a bridge between digital reflection and in-person cinema rituals — turning filmgoing into a communal lifestyle experience. Grounded in Self-Perception Theory, the project spans research, design, and engineering to prove that behaviour-driven design can reinforce cinephile identity and drive real-world cinema attendance.

Role
Lead Designer & Engineer
Stack
Swift 6, Xcode 16, SwiftUI, TMDB API, MapKit, EventKit
Methods
SPT, Double Diamond, Within & Between-Subject Experiments, Systems Interaction Mapping
Scope
3-part capstone: Research, Design & Validation, Engineering
Letterboxd Live — app interface showing cinema ritual features
The Problem

Cinema is Disappearing from the Digital Ritual

Letterboxd is one of the most culturally valuable film platforms in the world — a space where people log, rate, and reflect on what they've watched. But despite its deep emotional and social potential, it exists after the cinematic moment.

There's a major gap between the act of going to the movies and the act of recording that experience. While streaming platforms have integrated frictionless watching and sharing, the in-person film ritual — buying tickets, attending screenings, reflecting with friends — remains disconnected from the digital ecosystem.

As a result, the platform misses the opportunity to shape real-world cinema behaviour. Cinemas lose engagement from Letterboxd's passionate, data-rich community. And audiences experience reflection and discovery as separate, not continuous.

"Make cinema feel personal again."
Design Vision — Letterboxd Live

Inspired by the emotional tactility of vintage ticketing, the ritual of commitment (calendar adds), and the social reinforcement of shared taste, this project aims to create a system where digital actions lead to real-life meaning. Not just a film log, but the Strava for cinema: an app that builds cultural identity, community belonging, and third-place activity through experiential UX.

Part 1 — Discover

Cinephile as Self: The Psychology of Identity

The project is grounded in Self-Perception Theory (SPT) — Daryl Bem's framework (1967) that proposes individuals come to know their own attitudes and emotions by observing their own behaviour. Applied to interaction design, this means: if the system makes you act like a cinephile, you begin to believe you are one.

Part 1 established this theoretical foundation through secondary research, rapid ethnography, sketchbook-based field observations, interviews, and affinity mapping. The research surfaced a multi-variant problem space spanning the personal, communal, digital, and physical dimensions of cinema culture.

Research Methods

  • Secondary Research
  • Rapid Ethnography
  • Sketchbook-based Fieldwork
  • Interviews
  • Affinity Mapping
  • User Personas
  • Empathy Mapping
  • Edge Case Analysis
  • Literature Review (SPT)
  • Stakeholder Analysis
  • Field Observations
  • Accessibility Thinking
Part 1 Presentation Overview — Self-Perception Theory, Social Capital Theory, and Habit Formation applied to Letterboxd
Part 1 Presentation — researching Self-Perception Theory, Social Capital Theory, and Habit Formation to explore how identity is shaped through behaviour, applied to Letterboxd
Academic Research

Self-Perception Theory and Letterboxd: The Art and Science of Becoming, a Cinephile

Literature review examining how SPT, Dissonance Theory, and behavioural psychology can inform design practice — establishing the theoretical framework that underpins every design decision in the project.

When you do it, you become it — logging, reviewing, repetition, participation mapped to identity formation
"When you do it, you become it" — mapping Letterboxd behaviours to Self-Perception Theory: logging = ownership of taste, reviewing = expression of expertise, repetition = reinforcement of identity, participation = social proof of belonging
Empathic foundations — user personas and empathy mapping grounded in research
Empathic Foundations — user personas developed from research insights and refined through testing feedback
User Persona — Ben Romero, cinephile profile
User Persona: Ben Romero — "I don't just want to make movies. I want to make people feel like they're dreaming with their eyes open."
Define

Systems Thinking & Interaction Architecture

Moving from research to structure, I constructed a comprehensive systems interaction map spanning users, platforms, cinema partners, and social interaction touchpoints. This framing moved the project beyond surface-level interface design and instead visualised the interdependencies across Letterboxd's existing ecosystem.

By diagramming multiple user journeys and their emotional and functional states, I was able to test assumptions early, rationalise feature hierarchies, and identify modular design opportunities that would later support scalability.

Detailed Double Diamond with methods mapped and iterative design cycle
Design Process — Double Diamond framework with research methods mapped to each phase, and iterative cycles driving continuous refinement
Core problem definition and design objectives
Core Problem — mapping the gap between cinema behaviour and Letterboxd's digital ecosystem, with design objectives
Systems Interaction Mapping and User Flow Modelling
Systems Interaction Mapping — transforming an abstract concept into a structured, testable architecture
Design Brief

Letterboxd Live — Design Brief

The design brief that bridges research insights to design direction — establishing user objectives, psychological objectives, design opportunity, and design vision for the project.

Part 2 — Develop

Design Development & Validation

Part 2 transforms research into lived cinematic ritual. Through iterative cycles of sketching, wireframing, prototyping, and user testing with cinema-goers, the project advanced from concept to validated design outcomes.

Using Self-Perception Theory and controlled within- and between-subject experiments, I tested whether the designed features could reinforce cinephile identity, increase brand affection, and motivate real-world cinema attendance — outcomes that show both psychological rigour and practical product impact.

Concept Development and Low-Fidelity Exploration
Concept Development — low-fidelity sketches and wireframes exploring foundational interaction flows and content structures
Low-fidelity sketches and design experimentations
Lo-fi Sketches & Design Experimentations — from physical sketchbooks to digital wireframes to screen prototypes
Mid-Fidelity Prototype Testing with state models
Mid-Fidelity Prototype Testing — scenario-based usability sessions and think-aloud testing with state models for prototyping logic
Insights from tests and walkthrough of early mockups
Testing-Led Design — early insights from user walkthroughs, with feedback mapped across Invites, Cinema Map, and Film Club features

Testing Protocol

The testing protocol included both within-subjects design (same participants tested across features) and between-subjects design (comparing groups with and without SPT-informed features). The tests assessed psychological implications against the design brief objectives:

  1. Does the feature feel integrated into the total Letterboxd brand and product experience?
  2. Does the feature improve willingness to engage with the app as a genuine 'social media alternative'?
  3. Does this increase brand affection for the Letterboxd product?
  4. Does this feature lead to an increased feeling of belonging/community?
  5. Does the feature set increase the likelihood of initiating action into regular cinema-going behaviour?
  6. Does the feature set increase willingness to engage deeper in the film world?
High-Fidelity and Functional Prototyping — Xcode SwiftUI implementation with on-device testing
High-Fidelity Prototyping (Xcode) — translated into a coded SwiftUI build for on-device testing. Participants responded positively to the tactile, filmic feel — particularly flipcard gestures, haptic feedback, and Calendar integration
Validation and Final Refinement — summative testing with design peers and external testers
Validation & Final Refinement — summative testing with design peers, lecturers, and external testers. Participants described the system as "emotionally engaging, socially connective, and highly scalable"
Refined Loop Summary — testing iterations and feedback cycles
Refined Loop Summary — four testing cycles from concept validation through final polish, with feedback insights driving each iteration

Graphic Design & Visual Identity

Every element carries the tension between analog warmth and digital precision that defines the project's identity — from the orange-amber painterly cover to the collage-influenced page compositions.

Letterboxd Designed by Bruno — orange painterly cover
Design Progress Cover — "Letterboxd, Designed by Bruno"
Making the invisible visible through design — collage artwork
"Making the invisible visible through Design" — collage-influenced graphic work
Part 3 — Deliver

Engineering the System

Built with Swift 6, Xcode 16, and the latest SwiftUI framework, the final phase brought the validated design to life as a functional prototype. The app follows an MVVM architecture with a consistent colour and typography system maintained across views through a custom Design Token structure.

The prototype demonstrates the full interaction model — from discovering screenings on the Cinema Map to hosting intimate film gatherings through tactile invite craftsmanship, to logging reflections in a redesigned diary experience.

Letterboxd Live — four app screens showing Cinema Map, profiles, events, and diary
Letterboxd Live Prototype — Cinema Map, Profiles, Events, and Diary screens
A Tactile, Cinematic UX System Built in Swift — feature overview with screens
A Tactile, Cinematic UX System Built in Swift — each screen designed as part of a single system where tactility, rhythm, and restraint guide every interaction

Technical Architecture

The MVVM pattern separates data, logic, and UI for modularity and testability. The Movie Database (TMDB) API powers live film data via async/await networking, while Apple's native frameworks bridge digital and real-world interactions.

MVVM
Architecture Pattern
TMDB
Live Film Data API
MapKit
Cinema Map Integration
EventKit
Calendar & Scheduling
Haptics
Tactile Feedback System
Swift 6
Latest Language Version
Technical Rationale — SwiftUI architecture, MVVM, TMDB API, system integrations
Technical Rationale — platform choices, architecture decisions, data networking, and system integrations
Visual & Motion System — core palette, typography, texture, motion philosophy
Visual & Motion System — duotone palette, SF Pro + Abril Display typography, grain overlays, and cinematic motion pacing
Cinema Map — MapKit integration with Letterboxd-style pins
Cinema Map — bridging digital and physical cinema-going with custom MapKit pins, venue cards, and booking flows
Upcoming Events / Invites Screen — scrollable card stack with haptic feedback
Events & Invites — scrollable card stack with hover lift, flip transitions, haptic feedback, and "flick down" paper physics
Film Club View — organising collective film experiences
Film Club — turning shared taste into organised community experience with spring-animated controls and TMDB poster carousels
Create Event / Invite Flow — crafting an artifact through liquid-glass popup
Create Event Flow — organising a film night feels like crafting an artifact. Liquid-glass popup, TMDB-connected film search, and collectible ticket theme selectors
Pack Nights — experiential layer that ritualises the social act of film-watching
Pack Nights (Experiential Layer) — ritualising the social act of film-watching with sensory depth. Custom sound cues, ambient animations, and post-film reflective prompts. "Not gamified — ceremonial. A UX of atmosphere."
Event Tokens — collectible keepsake stubs materialising memory and participation
Event Tokens (Collectibles) — materialising memory and participation. Auto-generated duotone tokens with TMDB posters, metallic gleam animations, and unique serial codes. "A living cinematic artifact — like a keepsake stub from a night worth remembering."
Diary Reflection — post-film reflection with publish scheduling and warm-to-dark transition
Diary Reflection — enabling immediate but unpressured reflection. Warm sepia fades to Letterboxd dark once published — a metaphor for private → public. "Captures authenticity, not performance."
Final Flow Executive Overview — 30-screen information architecture
Final Flow Overview — the complete information architecture spanning 30 screens across Films, Cinema Map, Film Club, Events, Diary, Pack Nights, and Tokens
Accessibility Through Code — VoiceOver, reduced motion, touch targets, colour contrast
Accessibility Through Code — designed into the system, not layered on top. VoiceOver, reduced motion, 44pt touch targets, WCAG-tested contrast
Iterating in Component Design and Code — high-fidelity screens collage
Iterating in Component Design and Code — the full breadth of screens, components, and interactions in the final prototype
Iterating in Component Design and Code — Xcode build errors
The Process of Creation — the reality of engineering: hundreds of build errors resolved through iterative development
View Prototype on GitHub
Design Walkthrough

Design walkthrough — demonstrating the full interaction model and feature suite