🔍 Context
Standard Operating Procedures existed as static documents that nobody read — buried in shared drives, outdated within weeks of creation, and disconnected from the systems they described. When processes changed, documentation lagged by months. New employees learned by asking around, and institutional knowledge lived exclusively in people's heads.
The organization had 192 employees across 22 branches, operating complex multi-system workflows spanning ERP, financial accounting, legacy operations platforms, and external integrations. Each department had its own informal processes, often contradictory between branches. When key employees took leave or left, their operational knowledge went with them — creating recurring crises.
Previous documentation efforts had produced PDFs and Word documents that were abandoned within weeks. The fundamental problem wasn't willingness to document — it was that static documents can't represent dynamic, multi-system processes in a way that's actually useful to the people doing the work.
⚙️ Approach
Designed an interactive HTML5 SOP playbook system that treats documentation as a product — something designed for its users, not just written to satisfy a compliance checkbox.
Architecture: Each SOP is a self-contained HTML5 web application — no server required, no special software needed. Opens in any browser, works offline, and can be shared as a single file. This was a deliberate choice over wiki-based or CMS-based documentation systems, which add friction and dependencies.
Visual Process Mapping: Created 96+ architectural diagrams using SVG, covering system architecture, data flow patterns, decision trees, and step-by-step process visualizations. Every multi-system interaction is diagrammed — showing not just what to do, but how data moves between systems and where handoffs occur. These aren't decorative flowcharts; they're operational maps.
Interactive Navigation: Built search functionality, collapsible sections, cross-referenced process links, and contextual tooltips into each SOP. Users can jump directly to their specific task rather than scrolling through an entire document. Process dependencies are hyperlinked — click on "Create Sales Order" and it jumps to the exact steps.
Department-Specific Customization: Each SOP is tailored to its department's workflow and terminology. Finance SOPs speak in accounting terms with ledger references. Operations SOPs include equipment nomenclature and logistics terminology. IT SOPs include command references and configuration snippets. Same system, different languages.
🚀 Impact
- 7+ complete interactive SOPs covering Finance, Sales, Operations, and IT departments — 8,962 lines of structured, searchable documentation
- 96+ architectural diagrams providing visual process understanding that static text alone cannot achieve
- Self-contained HTML5 format — accessible without special software, works offline, runs on any device with a browser
- Reduced new-employee onboarding time for process comprehension — new hires can self-serve process knowledge instead of depending on tribal knowledge
- Eliminated single points of knowledge failure — operational continuity maintained regardless of individual availability
- Living documents designed for maintenance — structured so process updates can be made incrementally alongside system changes
🏗️ Key Technical Decisions
Self-Contained HTML over Wiki/CMS
Chose single-file HTML5 applications over Confluence, Notion, or wiki alternatives. Reasoning: zero deployment overhead, no login required, works offline in any branch office regardless of internet quality, no vendor lock-in, and the ability to version-control SOPs in Git alongside the systems they document. The team can update an SOP and push it to branches without IT involvement.
SVG Diagrams over Static Images
Built all 96+ diagrams as inline SVG rather than raster images. SVGs scale perfectly on any screen size, can be styled with CSS (supporting dark/light mode), remain searchable, and can be updated by editing code rather than redrawing in a graphics tool. This makes diagram maintenance practical — a text editor is all you need.
Department-First Information Architecture
Organized SOPs by department and workflow rather than by system. Users think in terms of "how do I process a return?" not "how does the Odoo credit note module work?" Structuring around user tasks rather than system features dramatically improved adoption — people find what they need because it's organized the way they think.
Progressive Detail Levels
Each process section has three layers: a summary (2-3 sentences), standard steps (what most users need), and detailed notes (edge cases, troubleshooting, system internals). Collapsible sections let users access exactly the depth they need without wading through information they don't.