01 · Problem
One business, several very different user needs.
Prospective clients need a direct explanation of services, pricing context, and an easy way to inquire. Active clients and staff need private tools, files, records, and status information that never belong in the public experience.
The core challenge was not simply building a polished marketing page. It was designing one coherent system that could move a lead into an operational workflow without weakening the boundary between public, client, and staff data.
02 · Role
End-to-end ownership from discovery through support.
I own the product and engineering work across discovery, content architecture, interface design, front-end development, database design, access control, deployment, accessibility, technical SEO, and ongoing support.
Product and interface
Mapped a clear public path from understanding the offer to estimating and submitting an inquiry, then designed role-aware workspaces for the work that follows.
Application and operations
Connected authentication, records, private files, database rules, and server-side functions so the platform could support real client delivery.
03 · Constraints
Keep the public site fast without treating security as a visual trick.
Separate audiences
Visitors, clients, and staff require different information and permissions inside the same product.
Abuse-resistant intake
A public lead form must accept legitimate inquiries while limiting automated or repeated submissions.
Private data and files
Hiding controls in the interface is not authorization. Records and stored files need enforceable access rules.
Maintainable delivery
The public experience needs to remain understandable, responsive, and supportable without an unnecessarily heavy front-end stack.
04 · Decisions
A simple public layer backed by explicit system boundaries.
- Use static HTML, CSS, and JavaScript for the public experience.This keeps content and interactions direct while reserving application complexity for the workflows that need it.
- Enforce authorization at the data layer.Database policies, private file access, and server-side checks protect records independently of what the interface displays.
- Validate public inquiries before they enter operations.Server-side checks keep the public intake path dependable before a lead moves into the private workflow.
- Design around role-aware workspaces.Clients and staff see the records and actions needed for their work, with the public site kept focused on understanding and contact.
05 · Technical depth
The workflow is connected, but every boundary stays visible.
The diagrams describe the implemented system flow. They are intentionally simplified to communicate responsibility and data movement without exposing sensitive implementation details.
Public lead workflow
- Review services and estimate context
- Complete inquiry and consent
- Run browser and server validation
- Run abuse and submission-rate checks
- Move the verified lead into the private workflow
Authenticated workspace
- User authenticates
- Evaluate role and record access
- Enforce database and Storage rules
- Return only allowed workspace data
Front end
Semantic HTML, responsive CSS, and focused JavaScript handle the public interface and authenticated interactions.
Back end
Supabase provides PostgreSQL, Auth, Row Level Security, private Storage, database functions, and Edge Functions.
06 · Quality and trust
Accessibility, security, search, and testing are part of delivery.
Accessibility
Semantic structure, keyboard access, visible focus, explicit labels, and reduced-motion support are built into the interaction patterns.
Security
Public input is validated in layers, while private records and files are isolated through database and storage policies.
Technical SEO
Metadata, structured data, canonical page signals, and sitemaps support clear indexing and sharing.
Testing and support
Responsive layouts, keyboard paths, validation states, role access, and production behavior are checked as part of ongoing delivery and debugging.
07 · Delivered result
A live business platform with room to support real delivery.
Show Me Web Design connects its public site, estimator, client workspace, and staff tools in one platform. The practice has also delivered four published client websites.