Back

[ B2B · SaaS · Workflow automation · Integrations ]

Ottokit — A workflow automation platform for building multistep flows across apps and integrations.

OttoKit — Workflow automation platform placeholder

Contributions

Product design, UX and UI, information architecture, product experience, marketing website design, responsive layouts, and WordPress website development using Astra and Spectra.

About

OttoKit is a workflow automation platform for building multi-step flows across apps and integrations.

My work focused primarily on product design and the experience around the product. I also designed and developed OttoKit’s marketing website inside WordPress using Astra and Spectra, translating the visual direction into a working website.

Goals

The goal was to make OttoKit’s product experience and website feel clear, approachable, and consistent while communicating the value of workflow automation.

  • Shape a product experience that makes workflow automation easier to understand.
  • Create clear structures for presenting product capabilities and workflows.
  • Establish a consistent visual language across the product and website.
  • Design a marketing website that communicates the product clearly without overwhelming visitors.
  • Translate the design into a responsive, working WordPress website.

Design Considerations

  • Make complex workflows easier to understand. The product experience needed to communicate what users could do without relying on technical explanations alone.
  • Create a clear visual hierarchy. Product capabilities, workflows, and supporting information needed to be presented in a way that was easy to scan.
  • Keep the product and website connected. The marketing website needed to reflect the product’s visual language and communicate its value accurately.
  • Design for responsive behavior. Layouts, spacing, typography, and content structure needed to work across screen sizes.
  • Balance clarity with flexibility. The experience needed to communicate the product’s capabilities without making the interface or website feel unnecessarily complicated.
  • Design and implementation had to work together. Building the website in WordPress using Astra and Spectra meant translating design decisions into the constraints and capabilities of the chosen tools.

My work on OttoKit spanned product design and the development of its marketing website. I worked through the product experience, shaped the visual direction, and translated the design into a responsive WordPress website using Astra and Spectra.

Design and implementation

I worked primarily across product design and the development of OttoKit's marketing website. Alongside shaping the product experience, I translated the design into a working WordPress website using Astra and Spectra, making decisions about layout, content structure, responsive behavior, and implementation as the work progressed.

Reflection

OttoKit reinforced the value of staying close to both the product and its presentation. Designing the experience and implementing the website made it easier to see where clarity, hierarchy, and usability needed attention. It also strengthened my ability to move from design decisions to a working, maintainable website without treating development as a separate final step.

Up next

A few things shaped through design, experimentation, and the process of making them real.

Pottr — WordPress headless backend plugin interface

[ B2B · Developer tool · Personal project · Beta ]

A WordPress plugin that turns WordPress into the backend for web applications.

Product direction · AI-assisted development

Philosophr — Visual website builder interface

[ No-code website builder · Personal product · In development ]

A visual website builder for creating and editing web pages without writing code.

Product direction · AI-assisted development