Challenge
The client had a visual portfolio but no reliable way to publish new work quickly, qualify inbound interest, or route inquiries into an internal workflow. The site looked static, and every content change depended on developer intervention.
My role
I owned the full delivery: frontend architecture, backend APIs, admin workflows, content modeling, and communication integration.
Project overview
The public site was designed to help potential clients understand the studio’s work, browse completed projects, and submit high-intent inquiries.
The admin layer allowed the team to manage projects, edit content, and keep the site current without requiring code deployments for routine updates.
Impact
- Created a repeatable content publishing workflow for projects, service pages, and inbound lead capture.
- Reduced admin friction by moving updates into a dashboard instead of manual code changes.
- Structured the public experience around trust, project credibility, and inquiry conversion.
Architecture
How the system was structured.
Public presentation layer
A React-based frontend rendered project storytelling, service information, and trust signals while keeping the browsing flow simple and conversion-focused.
Admin and content workflows
An authenticated dashboard handled CRUD operations for project entries and business content, creating a cleaner separation between content management and public presentation.
Lead capture and notification flow
Inquiry submissions were routed through backend services and communication tooling so the client could follow up faster without manual handoffs.
Backend decisions
- Used Node.js and MongoDB to keep content structures flexible while the site model was still evolving.
- Separated public content retrieval from admin management flows so the operational interface could grow independently.
- Integrated Twilio-based communication support to shorten the path between inquiry and response.
Frontend decisions
- Used modular React UI sections so the client-facing experience could scale to more projects without redesigning the page architecture.
- Kept the visual language editorial and image-led while ensuring the conversion path still surfaced at multiple points.
- Used Ant Design selectively in admin workflows to accelerate delivery of table, form, and management interfaces.
Data model notes
- Projects were modeled as reusable content entities with metadata, imagery, descriptive copy, and status-like information that could be managed through the dashboard.
- Public content and operational content were kept conceptually separate so business updates did not require touching presentation code.
Performance notes
- Optimized image presentation and page structure so the experience stayed visually rich without feeling heavy in day-to-day browsing.
- Reduced the need for developer-mediated content changes, which also reduced operational delay and release overhead.
Security notes
- Scoped admin capabilities to authenticated flows and kept management actions behind protected interfaces rather than exposing writable public endpoints.
- Used server-mediated inquiry handling so direct business contact data and communication logic were not exposed in the client.
Tradeoffs
- Flexibility in the content model was prioritized over a more rigid schema because the client was still refining how projects should be presented.
- The admin tooling focused on operational clarity and speed of delivery rather than building a generalized CMS.
Stack used
Next steps
- Add richer lead qualification states and follow-up tracking inside the admin layer.
- Introduce analytics dashboards showing which projects and service pages generate the most inquiries.
- Refine image delivery and caching further if project volume grows substantially.
Interested in similar work?