B2B SaaS
I turned a bespoke website process into a repeatable product system. I defined the UX patterns, design system, and guardrails behind it, then grew one Blueprint into a portfolio of 18.
The Result
66% fewer design & development hours, with Blueprints now powering 77% of projects.
My Role
Lead Product Designer & Product Owner
Company
Portland Web Design
Product Strategy
Design Systems
Product Design
UX/UI
The Situation
Custom websites worked. Scaling them didn't.
Every client site was a custom WordPress theme. Clients got tailored solutions, but designers and developers kept re-solving the same problems. The company envisioned Blueprints as a turnkey alternative, and I owned turning that idea into a product and evolving it.
We borrowed from the language of building a house to make the model intuitive:
Floorplan
The underlying UX/content structure based on common user and client goals.
Blueprint
A distinct design system built around that structure.
Client Implementation
The Blueprint configured with branding, content, and controlled customization.
My Task
Create repeatability without eliminating flexibility.
I owned the product architecture, the template-based design system, its evolution, and the prioritization of what to build next. The goal: cut custom production significantly while supporting different user goals, brands, and content, with enough visual variety to offer real choice.
What I did
01
I organized recurring website patterns around the job users needed to accomplish.
Drawing on my municipal website experience, historical client work, and our CEO's institutional knowledge, I identified recurring relationships between client goals, user priorities, and homepage structure. That produced a small set of initial floorplans, each built around a different job: help users complete common tasks quickly (task-oriented) or showcase services and programs (promotional).
For the MVP
The task-oriented floorplan was prioritized for the MVP because our history showed it applied to the most clients.
Floorplan Wireframes
Standardized:
core component structure and styling, layout characteristics, interior pages, web app capabilities.
Configurable:
colors, typography, content, homepage section priority, approved variants.
02
I learned where flexibility has to stop.
We created Sellwood from a project that signed our lower-tier package intended for the new turnkey model. Because Blueprints weren't available yet, the project had been designed more manually. Treating it as a flexible starting point backfired: reasonable styling tweaks piled up until sites needed heavy custom development again. Through trial and error with our first implementations we established our defining product principle: Technical flexibility isn't necessarily product flexibility.
So I encoded each Blueprint's defining traits into its components and documented the guardrails.
03
I moved repeatable decisions out of projects and into reusable templates.
I built the repeated decisions directly into the Blueprint template files: color and type styles, reusable components and variants, desktop, mobile, and interior-page templates, homepage section options, icon and logo libraries, and predefined web-app treatments. Designers could apply a client's brand and content to an established system and spend their judgment on exceptions.
The system had to be easy to pick up. Early on, I trained full-time designers with documentation, tutorials, and implementation reviews, using their feedback to refine the templates, including through our move from XD to Figma. Today we work with a pool of contract designers, so much of the guidance lives in the Figma files directly. I still provide art direction and technical feedback as needed.
Build
Teach
Observe
Refine
Laurelhurst
Springwater
Bainbridge
Bridgeport
Alder
Halsey
Sunnybrook
Sellwood
Ashland
Deschutes
Morningside
Gateway
Farmington
Tabor
Lancaster
Irving
Montgomery
Hoosier
04
I expanded the portfolio to evolve the product.
Depth: where a floorplan was chosen often, I added visually distinct Blueprints so neighboring clients with similar needs didn't end up with similar-looking sites. Promotional grew to 7, task-oriented grew to 4.
Breadth: where repeated custom-project exceptions exposed a gap, I added new floorplans like Dashboard. Blueprint selection patterns, custom-project needs, team and client feedback, and company leadership input guided each investment.
Blueprints Evolution
Results
Measurable Impact
↓ 66%
Reduction in design & development hours
~77%
showcased projects using Blueprints
1 → 18
blueprints launched
Reflection
What six years of operating the product taught me
Validate directly with clients
My strategy leaned on domain expertise and historical patterns. I'd add direct client research earlier.
Launch with meaningful choice
One Blueprint got the system moving but limited options. I'd launch with several high-value floorplans.