From Meeting Functional Requirements to Crafting Developer Experience
This case study explores how I led the end-to-end design of Appvia Wayfinder’s form component, focusing on reducing cognitive load, enhancing modularity, and bringing delight to developer tooling. By shifting our approach from merely meeting functional requirements to intentionally crafting a consistent developer experience, we transformed how users engage with our product.
The product: Wayfinder
Appvia Wayfinder is a SaaS platform enabling Platform Engineers to create a self-service interface for developers to deploy, manage, and scale applications across multiple clouds.
Frustrations with current experience
Everything users create or configure in Wayfinder happens with a form. While we had a UI Kit for basic components, our forms lacked consistency. They were built independently over time by different team members, and older forms were rarely updated.
After gathering feedback on the old form, I realised that despite the complexity of the Kubernetes cloud domain, the issues were familiar. This allowed me to reframe them as design challenges I knew how to solve.
Before
After
What is good design for developer tooling?
Through research, I identified five key levers we used to guide trade-offs during design reviews. One insight, though seemingly obvious in hindsight, took months to uncover and articulate clearly: before using our product, users were already managing their cloud, just with different and often manual ways. The design challenge was to bridge the knowledge gap between their familiar workflows and how they could achieve the same tasks better with our tool.
Manage cognitive load
Close knowledge gap
Sweat the details
Infuse modern aesthetics
Build flexible components
One form to rule them all
I advocated for pausing new feature development to create a reusable form component, enabling us to build faster in the long term. Over a month, I iteratively designed the form, leveraging best practices from sources such as the Form Design Mastery course or the Practical UI book, and incorporating feedback from users and stakeholders.
I worked closely with developers to reduce the gap between Figma and code, and also to make pragmatic trade-offs between ideal design and delivery.
Results
Impact on product team delivery:
At least 2X faster design and build of forms.
90% of forms (about 20 workflows) were transitioned to the new component within one year, with ongoing iteration on its design.
Developer experience is a differentiating factor against competition and the new UI:
Received positive feedback during sales demo.
Provides compelling visual content for our product marketing efforts.
Facilitates product onboarding (hence conversion from free trial to paid)
Reflection
By introducing a unified modular component form, improvements and bug fixes could now be applied across all past and future forms. The resulting mindset shift moved us from meeting requirements to intentionally crafting a best-in-class developer experience.
