PDW - Website Redesign
Role:
Lead UI/UX Designer & Framer Developer.
Tools:
Framer (CMS & Interactions), Figma, Notion (Project Management).
The Objective:
Transform a "digital catalogue" into an immersive, narrative-driven experience that reflects the firm’s innovative design philosophy.
The Discovery: Identifying the "Brand Gap"
Through a series of stakeholder interviews and a UI audit, I identified that the primary friction wasn't just aesthetic—it was structural.
Key UX Challenges:
Linear Constraints: The grid-heavy layout felt "boxed in," contradicting the open, fluid nature of modern architecture.
Navigation Fatigue: Deep-nested project archives made it difficult for developers and government bodies to find relevant "Expertise" (e.g., Urban Planning vs. Residential).
The "Trust Barrier": A lack of micro-interactions and tactile feedback made the site feel dated, potentially undermining the firm's "premium" fee structure.
The Strategy: The "Architectural Flow" Model
I developed a design system based on Spatial UX. The goal was to make the user feel as though they were walking through a PDW-designed environment.
Fluid Transitions & Parallax
Rather than standard page jumps, I implemented scroll-triggered transforms. As the user scrolls, elements reveal themselves dynamically—mimicking the way a physical space opens up as you move through it.
Contextual Navigation (The Linked Ecosystem)
I restructured the IA (Information Architecture) so that "Expertise" and "Works" are no longer separate silos.
The Logic: If a user views a "Residential" project, the CMS automatically surfaces the technical "Expertise" behind it, reinforcing the firm’s authority without requiring extra clicks.
Tactile Micro-Interactions
Every hover and transition was tuned for "Precision Feedback." By using high-performance interactions in Framer, the site provides a sense of "weight" and "craft," echoing the drafting standards of an architect.
Technical Execution & Future-Proofing
A premium design is useless if the team cannot maintain it. I transitioned the firm from a static setup to a Growth-First CMS.
CMS Scaling: Built a modular collection system allowing PDW to upload new projects via a simplified dashboard, automatically populating across "Expertise," "Location," and "Year" filters.
Performance Optimization: Large-scale architectural photography can kill load times. I implemented a lazy-loading strategy and WebP conversion to ensure the site remains mobile-responsive and SEO-friendly.
Outcome & Impact
The redesign moved the needle from "archival" to "aspirational."
Brand Alignment: The digital experience now matches the 2026-standard of the firm's physical output, removing the "perception gap" during high-value pitches.
Reduced Friction: Streamlined contact flows and clearer CTAs have reduced the path to inquiry for prospective partners.
Operational Autonomy: The firm’s internal marketing team now manages the portfolio 100% independently, reducing maintenance costs.
Recent Designs
