Introduction
As an established director & cinematographer with an extensive body of work, Cinera Films needed a marketing website that could function as a living archive while attracting production houses and potential collaborators. The goal was to design an experience that felt intentional and atmospheric mirroring her films while balancing structure and ease of use.
In this project I lead the entire project 0 → 1 from strategy to launch, handling visual identity, UX, UI design, and Webflow development to create a digital presence that truly represented the studio.
role
Visual Identity Design
UX Design
UI Design
Webflow Development
timeline
16 weeks
The Impact Created
Transforming Cinera's digital presence through a scalable marketing website, elevating brand perception.
A re-designed system that leads to higher conversion rates.
The Bridge to our impact
The starting point
The vision was to infuse cinematic language into a website that went beyond archiving work. It needed to provide a viewing experience. I began with a comprehensive analysis of Cinera's existing site.
Challenge
Overly minimal archives that reduced film to lists, The opportunity was to find balance. I had to distill what defines her creative direction.
Approach
Conducted workshops with the client to discover what Cinera represents. Through mood boards, competitor analysis.
Research
I began with understanding who the clients competitors were. Followed by a desk research conducted to unpack the user experience of leading production houses and filmmakers.
Strategic Decisions that shaped the redesign.
Grid-Based Architecture
Borrowed from the tools most used - the camera’s focus grids and rule-of-thirds framing.
Content-First CMS
Webflow accommodated Cinera's extensive archive while enabling scalability at ease
The Visual System
Muted dark palette that would represent the viewing experience like in a cinema hall.
Visual Identity System
Inspired by the cinematographer's primary tool; the camera's grid, focus points and composition guides created a visual story that embodied the essence of the client's work.
The visual identity draws direct inspiration from the cinematographer's primary tool: the grid. Just as focus points and compositional guides structure a shot, Cinera's logo system is built on a modular four-square framework that can adapt, separate, and recombine across contexts.
UX Design
Mapping out the information architecture and user flows provided a starting point to create a narrative flow.
Leveraging Relume's AI to generate multiple information architecture iterations, identified the strongest solution, then refined the architecture into a comprehensive sitemap balancing the portfolio's depth with intuitive navigation.
System Design & UI
The dark theme website required a calming palette and crisp geometry to reinforce grid architecture while maintaining accessibility compliant to WCAG AA standards.
Color System
Aa
Typography Hierarchy
Buttons & Interactions
Corner Radius
Prototyping & Testing
Built high-fidelity prototypes in Webflow to validate user flows and interaction patterns before full development. This empowered the studio to scale their portfolio independently post-launch.
Given the extensive content archive, I chose Webflow for its robust CMS and client-friendly content management
The outcome
The digital brand presence launched in 2024, establishing Cinera with a modular identity system and scalable website built for growth.
Post roll-out Insights and observations
Post-launch analytics revealed a critical usability gap: 30% of users couldn't recognize the custom navigation icon. This insight led to a design pivot toward familiar interaction patterns, improving task completion rates.
Design system optimizations are underway for 2026 to further enhance performance, consistency and accesibility.