TRISP Studio
Designing the end-to-end client experience for a creative studio.
I designed and engineered a custom platform to own the complete client journey for my creative studio. Rather than relying on fragmented third-party tools, I built two interconnected experiences that guide clients from their first interaction to the final delivery of their assets.
The Problem
The previous client experience was disjointed and relied on external tools that broke brand immersion.
- Broken Journey: Clients would discover my work on a portfolio site but receive deliverables via generic WeTransfer links. This created two disconnected experiences.
- Unprofessional Delivery: Generic file-sharing links undermined the premium perception established by the creative work itself.
- Selection Friction: Asking clients to "screenshot your favorites" forced them to work around the tools rather than with them.
- No Brand Continuity: Every external URL represented a moment where clients left my ecosystem.
The Design Approach
I treated the client relationship as a single journey supported by two distinct applications.
Experience 1: Discovery & Acquisition
Hosted at trispstudio.com
The goal was to build trust, showcase craft, and reduce the friction to inquiry.
- Dual-Mode Filtering: Clients can browse by output (Photography, Brand Systems) or by methodology (Motion Design, SaaS Development). This surfaces relevant work quickly and demonstrates range without overwhelming the user.
- Service-Specific Landing Pages: Each service line features dedicated pages with clear package details to remove ambiguity about offerings.
- Conditional Contact Form: The intake flow adapts to the user. Photography inquiries ask about dates and locations, while design inquiries focus on timelines and budgets.
Experience 2: Delivery & Delight
Hosted at clients.trispstudio.com
The goal was to create a premium, branded delivery system that empowers the client.
- Masonry Gallery: Images are presented in a curated layout that respects the aspect ratio of each photo rather than a generic grid.
- Multi-List Favorites: Clients can create named lists (like "For Instagram" or "Print These") instead of taking screenshots. These selections are submitted directly to me through the platform.
- No Account Required: Guests enter their email once to access their gallery. The system remembers them without requiring passwords or account creation.
- One-Click Downloads: Clients can select photos and download them immediately as a ZIP file without navigating complex file trees.
How Technical Decisions Enabled the Design
Every technical choice was made to serve a specific design goal.
| Design Goal | How I Built It |
|---|---|
| Fast gallery browsing | Built a 3-variant image pipeline. Thumbnails load instantly in the grid, while full resolution loads only when needed. |
| Premium brand feel | Domain masking via proxy routes hides all infrastructure URLs from clients |
| Client empowerment | Engineered a submission workflow for favorites that allows clients to curate lists and send structured data back to me. |
| Instant gratification | Implemented streaming ZIP generation so downloads start immediately without waiting for server processing. |
| Zero friction authentication | Developed an email-only guest system to verify identity without forcing account creation. |
Tech Stack
| Layer | Technology | Purpose |
|---|---|---|
| Frontend | React 19 + TypeScript | Modern React with full type safety across both apps. |
| Vite 6 | Fast builds and HMR for portfolio development. | |
| React Router v7 | Client-side routing for portfolio navigation. | |
| Framer Motion | Smooth animations and page transitions. | |
| Tailwind CSS | Utility-first styling with custom brand theming. | |
| Backend | Express 5 | API server for client portal (uploads, downloads, auth). |
| Sharp | Image processing pipeline: EXIF rotation, 3 variant sizes. | |
| Archiver | Streaming ZIP generation for batch downloads. | |
| Database & Storage | Supabase (PostgreSQL) | Galleries, photos, guests, favorites, submissions. |
| Supabase Storage (S3) | Photo storage with public/private bucket policies. | |
| AI & Automation | Google Gemini API | AI-powered image tagging and auto-renaming scripts. |
| Services | Resend | Transactional emails for inquiries and download links. |
| Vercel | Edge deployment with domain masking proxy. | |
| Railway | Backend hosting for Express server. |
Impact
| Experience | Before | After | Outcome |
|---|---|---|---|
| Gallery delivery experience | Generic WeTransfer link | Branded portal at my domain | 50+ clients served |
| Image loading speed | Full-res files, slow load | Optimized variants per context | Instant grid browsing |
| Brand consistency | Third-party URLs exposed | clients.trispstudio.com | 100% branded touchpoints |
| Client selection workflow | "Screenshot your favorites" | Named lists, direct submission | Structured feedback |
| Download experience | Navigate folders, wait for ZIP | Select → Download → Done | Instant gratification |
| Authentication friction | Create account, verify email | Enter email once, remembered | Zero barriers |
Skills Demonstrated
End-to-end experience design from discovery to delivery
Two-touchpoint journey mapping with distinct goals per phase
Two apps that create one cohesive client experience
Designed and built the product completely to eliminate handoff and translation loss
100% branded touchpoints, zero third-party URL exposure