6 hours
Discovery
Clarify the audience, offer, and page hierarchy before visual decisions are locked.
Information ArchitectureUser PersonaResearch
Studio / Identity / 2026
The studio portfolio -- a living system that organizes twenty projects into a scannable showcase.
The Zera Portfolio aggregates the full project catalogue into a filterable masonry layout with scroll-driven reveals, category tabs, and deep-link case studies. It serves as both a client-facing proof surface and an internal project index.
Design process
24 hours
Strategy
Turn the direction into positioning, conversion logic, and a tighter interaction flow.
Competitor AnalysisHypothesis BuildingInteraction Flow
40 hours
Solution
Shape the final experience through motion, responsive screens, and visual direction.
Prototype AnimationsInteractive WireframesMoodboard & Visual Direction
Initial concepts
Early UI Concepts and Visual Explorations.
Challenge / response / impact
Twenty projects across six categories needed to feel organized without becoming a flat grid. The layout had to reward browsing while supporting direct navigation.
Response
We used a masonry system with aspect-ratio-aware tiles, sticky category tabs, and staggered scroll reveals so each project gets visual weight without crowding the page.
Impact
The portfolio gives the studio a polished project index that scales as new work ships, with clear paths from overview to deep case study.
Full frameStudio portfolio grid and filtering system
Mobile responsive
Mobile frames keep the same tone, hierarchy, and conversion cues while tightening the page for swipe-first browsing.
01 / 05
