#Saas #Webdesign

Simplifying web app creation process for mechanical engineers

Contributions
Product Design
Design System
Timeline
June-Aug 2025

A SaaS platform for mechanical engineers

Recently I’ve been collaborating with Nihito, a Swiss startup, to design a SaaS platform from scrach that turns Python scripts into shareable web apps with ready-made UIs. As the lead product designer, I was responsible for the core flows, interfaces and design system, ensuring the experience is simple, trustworthy, and scalable.

My challenge: Translating complex technology into simple user experiences

Designing Nihito meant working at the intersection of highly technical backend logic and users who are not necessarily tech-savvy. Here’s how I approached it:

  • Understanding complex tech logic
    I dove deep into technical documentation, studied flow charts, and joined multiple engineering sessions. This effort helped me fully grasp the logic so I could translate it into intuitive design decisions.
  • Designing for non–tech-savvy users
    Mechanical engineers value clarity over features. I focused on simple, uncluttered layouts, breaking processes into one step per screen to minimize cognitive load.
  • Applying an MVP mindset to advanced technology
    I prioritized the core value first, creating a simple step-by-step MVP flow that delivered results quickly, while leaving advanced options for later iterations.
Design progression from existing product to the early wireframes and final UI design

My Design approach

I approached this project with a structured design process, moving step by step from understanding users to building and testing the product

Who are the users?

Before designing, I needed to understand who the users are, their challenges, and what truly matters to them. Since mechanical engineers are often not tech-savvy and prefer clarity over advanced features, I created personas and mapped frustrations to uncover real obstacles. This helped me set design goals around simplicity, usability, and trust.

My key findings were that users prefer uncluttered screens, one-step-at-a-time processes, and tools that feel stable and reliable over feature-heavy platforms.
User personas created to represent Nihito’s target audience

Learning from existing tools

I explored platforms like Streamlit, Gradio, and Anvil to see how they approached similar problems. While powerful, they often required coding UIs or managing hosting that are barriers for engineers who just want things to work.

  • Competitors showed feature-rich but cluttered flows.
  • Explanations often relied on technical language that intimidates non-technical users.
  • UI patterns were developer-oriented rather than user-friendly.

This confirmed our design direction: focus on clarity, zero-code flows, and simple step-by-step guidance.

Competitor analysis board

From insights to wireframes

At this stage, I focused on mapping the user flow and sketching early wireframes. I worked side by side with the founders in multiple sessions, iterating on ideas, testing assumptions, and making changes until the journey felt clear and simple.

Early wireframes exploring core flows and layouts

Designing the UI with an evolving design system

When moving from wireframes to UI, I focused on an MVP mindset: keeping screens simple, guiding users step by step, and delivering the core value without unnecessary features. To keep the design consistent and efficient, I built a basic design system in parallel — buttons, inputs, alerts, typography, etc.
As I designed new screens, the system evolved, each iteration added or refined components, ensuring the interface stayed cohesive, scalable, and easy to implement. This approach gave me both speed in design and a solid foundation for the development team.

Lot’s of hidden edge cases, shifting logics and iterations!

As I designed and shared work with founders and developers, new edge cases and scenarios emerged that we hadn’t considered earlier. Some flows had to be rethought based on backend constraints, while the founders also refined parts of the product logic during our sessions.
Instead of sticking rigidly to initial designs, I stayed flexible. Adapting wireframes, updating UI, and refining components in the design system. This iterative process ensured the product stayed aligned with business needs, technical realities, and user expectations, while keeping the experience consistent and simple.

Different iterations of dashboard design

Validating design with moderated usability tests

Before launch, I ran moderated usability tests with mechanical engineers to validate the web-app creation flow. I observed participants as they went through the steps of uploading a Python file, previewing the auto-generated UI, and publishing their first app.
The tests confirmed that the step-by-step process worked well, but also revealed areas to refine. Users tended to skip long instructions, so I replaced them with short guidance and tooltips. These insights helped polish the experience and gave us confidence that the product was truly usable for our audience.

Nihito founders in ETH Zurich startup competition

Launching and learning from real usage

We are now in the launch phase of Nihito. The focus has shifted from design validation to tracking real user behavior in the platform. We’ve integrated Microsoft Clarity to capture session replays, heatmaps, and drop-offs, which will help us understand how engineers interact with the product at scale.
Key metrics we plan to track include:

  • Conversion rate from upload code to the publish web-app
  • Time to first published app
  • Common error points or retries in the main flow

These insights will guide the next iterations, ensuring the platform continues to improve based on actual usage rather than assumptions.