Playbook
Building a Living SOP System
for Operational Teams
Knowledge Systems
Workflow Design
Role
Product Designer
Timeline
4 weeks
Tools
Figma, Claude Code, Next.js
Quick note: This case study takes about 10 minutes to read.
Project Overview
Where This Started
I work at Parkmerced, a residential community serving over 9,000 residents. After transitioning to a new property management company, many of our established workflows — parking, key handoffs, maintenance — became inconsistent. The new team was experienced in managing single-family homes across the Bay Area, but those systems didn’t translate cleanly to a large, operationally complex community.
Clear SOPs weren’t created to bridge the gap. With leadership often working remotely & a high employee turnover rate, knowledge became fragmented. Processes lived in email threads, teams messages, or individual memory ~ leading to inconsistent execution.
The issue wasn’t effort. It was structure.
That’s when I began exploring what it would look like to centralize operational knowledge into a system teams could reliably reference and execute against.
Playbook began as that exploration.
Core Problem
Following the management transition, operational workflows became inconsistent across key processes. Processes like parking, key handoffs, and maintenance lacked structured SOPs, and knowledge was fragmented across tools and individuals.
But this isn’t unique to one organization.
As operational teams grow, knowledge often fails to scale with complexity. When systems rely on communication threads instead of structured workflows, execution becomes dependent on individuals rather than process.
The core issue wasn’t effort —
it was the absence of a centralized, scalable knowledge system.
Who this Impacts?
Playbook is designed for operational teams working in complex, process-heavy environments — where execution depends on consistency across roles.
In my situation, this includes:
Onsite operational staff who need clear guidance on handling resident-facing workflows such as parking, key handoffs, and maintenance.
Remote support teams who manage tickets and escalations without full context.
Managers and leadership who need visibility into how processes are executed across teams.
New hires navigating high-turnover environments where training materials are fragmented or outdated.
In environments where clarity determines speed and trust, inconsistent execution creates friction at every level. Playbook aims to reduce that variability by centralizing operational knowledge into a shared, structured system.
Strategy
Design Hypothesis
As operational complexity increases, knowledge must scale with it.
If SOPs evolve from static documentation into living, structured systems, teams can execute more consistently, reduce unnecessary back-and-forth, and onboard new team members faster.
Product Vision
Today
Playbook aims to transform SOPs from static reference documents into living, execution-ready systems.
Long-Term Vision
Create a centralized operational knowledge layer that scales with organizational complexity, reduces dependency on individual memory, and enables consistent execution across teams.
Solution
Product Capabilities
Playbook transforms static documentation into an execution-ready operational system. Below are the core capabilities explored in this build.
1. Structured SOP Execution
Playbook replaces long-form documents with guided, step-based workflows. Each SOP is organized as an execution flow rather than a reference page. Within each step, users can:
Add contextual instructions
Attach scripts and documents
Embed photos directly into the workflow
Surface edge-case logic when needed
The goal is clarity at the moment of action — not after confusion occurs.
2. Intelligent Search & Discoverability
Operational speed depends on finding the right workflow instantly. The search system prioritizes clarity and hierarchy:
Centered AI-like global search
Category filters (Operations, Leasing, Finance, etc.)
Pinned and recently accessed SOPs
Structured naming for scannability
Rather than browsing folders, users search by intent.
Structured Workflow Creation
The Add SOP interface supports:
Title, category, and tagging
Overview and detailed step inputs
Photo and script attachments per step
Dedicated edge case documentation
Escalation ownership fields
Contextual contact linking
The system enforces consistency while remaining flexible.
4. Contextual System Layer
The UI design reflects the system philosophy: structured, readable, predictable.
Playbook’s interface emphasizes clarity through modular layout:
Persistent sidebar navigation
Clear content hierarchy
Consistent spacing and interaction states
Modular component structure
Build Approach
Playbook was developed through a human-directed, AI-accelerated workflow.
The goal wasn’t speed alone — it was systems fluency.
Using AI as a Drafting Partner
Architectural Refactoring
Designing for State
Claude & ChatGPT was used to scaffold early components and test structural ideas quickly.
Rapid layout exploration
Component scaffolding in Next.js
State-behavior experimentation
I used AI to accelerate iteration ~ not replace product judgment.
Iteration Log
System Evolution
Playbook evolved through structured phases — each refining clarity, architecture, and interaction discipline.
Phase 1 — Structural Foundation
The initial focus was defining how SOPs should be structured — not how they should look.
• Transitioned from document-style layouts to step-based flows
• Introduced modular sections (Overview, Steps, Edge Cases, Escalation)
• Established consistent hierarchy patterns
The goal was execution clarity over documentation density.
Structure before scale.
Phase 2 — Interaction & Hierarchy Refinement
Once the framework stabilized, attention shifted to interaction details.
Refined collapsible behavior and spacing
Standardized hover states
Adjusted padding rhythm across components
Tightened typography scale
Small refinements created system consistency.
Details reinforce discipline
Phase 3 — System Maturity
As complexity increased, components were simplified and consolidated.
Reduced redundancy across inputs
Improved form structure in Add SOP flow
Strengthened separation between content and logic
Clarified sidebar navigation hierarchy
The product shifted from experimental to intentional.
Simplicity is a form of architecture
Reflection
Final Thoughts
Playbook started as an experiment in structure. It became a lesson in systems thinking.
"This project pushed me to think beyond screens and into architecture — how decisions scale, how components relate, and how clarity compounds over time."
1. Structure Before Speed
2. Designing With Engineering in Mind
3. Restraint as a Design Skill
4. What I’d Do Next
Playbook wasn’t about building another tool.
It was about building fluency — in systems, in structure, and in translating product decisions into scalable architecture.
That shift will carry forward into everything I design next.