Portfoilio for film & visual art
Identity Portfolio
website
website
Designing a split-audience experience for a filmmaker & multimedia artist.
Key deliverables: role‑based IA, desktop split layout, mobile flows for both paths, reusable grid and component system for easy project additions, documentation (“build tree”) so the site can be rebuilt consistently
Role: UX architecture, Web designer | Visual system, responsive prototyping,
component library | prototyping, design system, validation
Tools: Figma (design system + prototypes) | design token thinking
(type, color, spacing) | usability testing (moderated, think‑aloud style)
Context
My role & approach
Users
Problem
Insights
Solution
Lo-Fi Wireframes
Prototypes
Validation
Results
Vladimir is both a filmmaker and a visual artist. The portfolio needed to work as a professional tool, helping very different visitors quickly understand who he is, what he does, and where to go next. He needed a portfolio that could speak to two very different audiences without forcing people to “decode” his identity.
Film industry viewers (producers, directors, recruiters) needed fast access to films, showreel, roles, and behind-the-scenes breakdowns. Art-world viewers (collectors, curators, galleries, competitions) needed curated artworks, categories, and context.
The portfolio should not only be a gallery, but also a means to attract employers, clients and the art environment.
The portfolio should not only be a gallery, but also a means to attract employers, clients and the art environment.
Starting point
From there, I focused on validating whether the structure matched real audience intent before iterating on visuals.
Design examples before
The biggest UX challenge was not aesthetics — it was making the dual identity legible in the first seconds, and making a large volume of projects feel curated rather than endless.
How I worked
While an early aesthetic direction existed, I redefined the structural logic of the product: from format-based categorization to audience-driven routing.
Goals and success criteria
Success was defined as: the right first click without guidance, faster access to proof (showreel / representative work), and more confident deep exploration without losing orientation.
- Make Vladimir’s dual identity obvious within the first few seconds.
- Provide two clear entry paths: Film vs Art—without splitting the brand into two separate websites.
- Reduce cognitive load when browsing many projects.
- Make the system maintainable: he should be able to add projects without breaking the layout.
Because I didn’t have analytics or conversion tracking, I focused on qualitative validation through usability testing (think‑aloud tasks), looking for:
- Can users pick the right path (Film vs Art) without guidance?
- Can they find a specific project quickly?
- Do they scroll beyond the first screen and still feel oriented?
- Do they understand where contact links live (and do they notice them)?
Target audience
That’s why I modeled three primary user groups. The goal wasn’t to invent personas, but to make design decisions traceable: routing, navigation density, page structure, and how much context belongs above the fold.
Scroll to see other roles
Next, I’ll summarize the key insights that translated these observations into the final interaction model and page templates.
Research
I mapped three key audience groups (film industry, art-world reviewers, collectors) and clarified what each group expects to see first, what proof they need, and what makes them leave.
Moodboard includes references to existing works by other artists/designers.
These are used strictly for inspiration and are not part of the final project.
- Moodboards to align on visual tone and references
- Low‑fidelity wireframes to test structure before polish
- Iterative usability checks to see how users scan, what they click, and what they ignore
To align quickly with the client’s mental model, I explored a “file system” concept, treating projects like folders and categories, similar to how Vladimir already organized his work.
I used these early screens as a first iteraction: could a creator-facing structure also work as a viewer-facing navigation? That test helped separate what was valuable (clarity, bold hierarchy, a consistent interaction language) from what was risky (format-first routing and decision overload).
I treated these early layouts as a structural test: could a creator-facing file structure also work as a viewer-facing evaluation flow.
This first iteration aligned with the client’s mental model and created a strong visual identity. But once tested against real evaluation tasks, it still made visitors work too hard to find the right path and pick what mattered.
When I used the first iteration in real evaluation scenarios, four failure modes repeated across audiences.
That created four issues:
film people had to sift through art categories;
art audiences had to sift through film categories.
Decision fatigue
large lists of projects felt like a long spreadsheet,
people stopped exploring after a few items.
Including too many, old, or weak projects
instead of focusing on high-quality, relevant work
Weak story on the homepage
text‑heavy hero layouts and multiple columns didn’t get read,
so visitors didn’t immediately understand what to click or why.
Reframing the problem
To understand what would actually help people evaluate
Visitors weren’t trying to explore everything. They were trying to answer a specific question fast.
The portfolio needed to route by intent first, then reveal depth progressively — with stable orientation and curated choices.
Vladimir’s work, I used lightweight, practical discovery:
- stakeholder interview with the client
- audience mapping
- concept checks, think-aloud usability sessions
- quick structure tests with early prototypes
What I decided
to build
Hypotheses
If the homepage offers two clear entry paths (Film / Art), users will choose the correct path faster and with higher confidence.
ddd
H2 Navigation stability:
If navigation stays fixed while content scrolls, users will explore deeper and switch projects without losing orientation.
If visible lists are kept short (selected work + long-tail bucket), users will click more than on long equal-weight lists.
H4 Visual pacingIf artwork pages use large anchors and controlled rhythm, users will feel less overwhelmed than in dense grids.
How I worked — Phase 2Design the interaction model (TO-BE)
This isn’t two websites. It’s one system with two entry points and reusable page templates.
Template hierarchy
The structure is intentionally simple: one page template, one navigation model, repeatable content sections. This is what makes the system scalable — adding new projects shouldn’t require redesigning layouts.
Click any image to enlarge
Component inventory
To prevent layout drift, each component has a usage contract: what it’s for, how it scales, and how much text it can safely carry. This keeps pages readable and makes future updates predictable.
Lo-Fi Wireframes
validating mechanics before visual polish
How I worked — Phase 3
Desktop keeps orientation fixed; mobile preserves the same narrative structure through stacked blocks. I didn’t have analytics or conversion tracking, so I validated direction through lightweight usability checks (think‑aloud tasks). I focused on observable signals: first-click confidence, time to find showreel, backtracks, and whether people could switch tracks without getting lost.
What broke in pilot and how I fixed it:
Sidebar list was still too long
capped the visible set and grouped the rest into “Everything else”
Copy blocks were too dense
cut to scannable intros and moved depth below
Some pages drifted in spacing
locked vertical rhythm tokens and enforced components
Media grids competed for attention
reduced simultaneous thumbnails, used bigger anchors
NEW design
Translates policy into interaction: auto-assigned tasks, state-aware actions, and auditable routing.
The shipped baseline: tasks surface automatically (auto‑assigned), actions are state‑aware, and every step is auditable. This “as implemented” baseline is what I took into pilot for Phase 3 validation and iteration.
Click any image to enlarge
Make the first click obvious → make the first click obvious
Turn “endless archive” into curated paths → long lists were capped and grouped (“Everything else”), so browsing stays light and intentional.
Ship a system, not a one‑off design → reusable page templates + component contracts + text budgets keep future updates consistent.
Confirmed
- two clear entry points (Film / Art) reduce confusion and speed up evaluation.
- stable orientation (fixed navigation + predictable sections) encourages deeper exploration.
- editorial pacing (hero → structured sections) makes mixed media pages feel readable, not chaotic.
Adjusted after pilot
- curation had to become a rule, not a taste choice: “show everything” brought back decision fatigue.
- homepage needed to be shorter than I expected: long intros were skipped and delayed the first click.
- Collage layouts needed hierarchy (one main anchor), not equal weight for every asset.
Adoption check
the real success metric here is maintainability: Vladimir can add new projects by filling templates without breaking spacing, hierarchy, or rhythm, because the component table and tokens act as guardrails.
The Human Side of Scale
— it was designing trust
Vladimir already had a strong visual language, and the site couldn’t “neutralize” it. The hard part was earning enough trust to change the structure underneath that aesthetic, moving from creator‑centric categories to audience‑centric routing. My biggest win was getting the client to agree that clarity doesn’t dilute personality; it makes the work easier to judge fairly.
— collaboration
I genuinely enjoyed turning subjective creative material into concrete, testable decisions: “What should the first click be?”, “What’s the minimum proof each audience needs?”, “What can be optional depth?” Once we aligned on that, the rest became a craft problem - pacing, templates, and small rules that keep the system stable while the portfolio grows.