Building Otto · From design tokens to production software

I built the Otto Design System starting at the primitive layer; colours, typography, spacing, all the way up to complex product shells, custom workflows and hyper specific object level components.

1. Designing and Building the Product End to End

Introduce the scope of your ownership: product strategy, interaction design, visual system, frontend, backend, database, authentication, AI inference, and deployment.

2. From Product Model to System Architecture

Show how Otto’s object model became the foundation for the database, application logic, interface, AI outputs, and future product capabilities.

3. Building for a Multiplayer Home

Explain how properties, memberships, roles, permissions, and shared records were designed around the home’s implicit social graph.

4. From Design Tokens to Production Components

Show how you created Otto’s visual language and translated it into reusable tokens, components, interaction patterns, and responsive layouts in code.

5. Building the Core Product Loops

Walk through how you implemented the key end-to-end experiences, such as creating a property, uploading an inspection, reviewing findings, creating a plan, and preserving completed work.

6. Designing the Backend Around Durable Product Objects

Explain how the database, APIs, application logic, relationships, and state transitions support the product experience—not merely store information behind it.

7. Turning Unstructured Documents into Structured Home Data

Show the ingestion pipeline from uploaded file to extracted information, structured objects, source attribution, user review, and permanent home record.

8. Making AI a Product Capability, Not a Chatbot

Explain where AI is used, where deterministic software takes over, how structured outputs work, and why Otto converts useful inference into persistent, inspectable product state.

9. Directing Coding Tools and Agents

Describe how you used coding agents to plan, implement, debug, refactor, and extend the product while retaining responsibility for architecture, product decisions, code review, and quality.

10. Designing for Trust, Failure, and Edge Cases

Show how you handled loading, processing, partial results, model uncertainty, errors, duplicates, corrections, confirmation, permissions, and recovery.

11. Closing the Gap Between Design and Production

Demonstrate how implementing the product yourself exposed weak assumptions, changed interface decisions, and allowed the design system, data model, and production behaviour to evolve together.

12. Shipping, Observing, and Iterating

Explain how you deployed Otto, tested complete workflows, observed early users, identified breakdowns, and turned those findings into subsequent releases.

13. What Building Otto Changed About How I Design

Conclude with the principles you developed through the work: designing from objects outward, thinking in states and systems, treating implementation as part of design, and using AI agents to increase—not replace—product judgment.

14. Design Principles

I developed a set of 14 principles I kept in mind while designing Otto and returned to often.

15. The Otto Design System

Marketing & Branding

The Production Stack

  • LinearProject management
  • Next.jsReact web framework
  • Shadcn UIComponent library
  • SupabaseDatabase
  • VercelWeb hosting
  • Codex & CursorCoding agents
  • ResendEmail API platform
  • TurbopufferServerless vector search
ETA Studio