Add Services User Flow for DuploCloud

DuploCloud helps companies deploy and manage their cloud applications without needing deep DevOps expertise, while automatically handling security compliance and infrastructure setup.

My Role

I joined DuploCloud as the company’s first Product Designer

I solved key usability issues by redesigning the client product experience. I created intuitive flows with progressive disclosure and essential inputs, working closely with developers and product managers to ensure successful delivery.

Team Makeup

Drivers: Design Lead (Me) & VP product

Approver: VP product

Contributors: Engineering Lead, VP product, CEO, System Engineering Lead

Informed: QA, Sales, Engineering

Since joining, we’ve shipped a lot of improvements

Some of the highlights from the last 2 years:

- Rebuilt the navigation system
- Launched the first dashboard for resources and costs management
- Automate add-services flow
- Built AI-Copilot system
- Built billing alert setting system

The Problem

Previously, DuploCloud users had to write code to configure and deploy services, which created several barriers:

The previous service deployment approach created significant barriers by requiring technical expertise in multiple areas (Kubernetes, infrastructure, etc.), which led to an increased potential for errors due to manual coding. The time-consuming process and steep learning curve for new users further hindered adoption and efficiency across teams.

Here is how we used to do it:

Here 
The Solution 01

Streamlining the Service Creation Experience

Streamlined Information Architecture: Transformed from cluttered tab layout to hierarchical, collapsible sections with clear component relationships and prominent service status indicators.

Enhanced Context & Descriptions: Added service ID and descriptive content for each component, helping users understand relationships between DuploCloud services, Kubernetes Pods, and Containers.

Improved Visual Hierarchy: Implemented consistent styling, better form organization, and visual separation between configuration sections, reducing cognitive load and creating a more intuitive workflow.

The Solution 02

Starting form with only essntials

Dramatically Simplified Form: Reduced from a complex multi-tab interface with numerous accordions to a clean, focused form with only essential fields (Name and Image).

Clearer Context & Status: Added prominent display of service ID and service state indicator, providing immediate visibility of critical service information.

Reduced Cognitive Load: Eliminated overwhelming configuration options in favor of a streamlined, two-field approach that makes service creation more accessible and reduces potential for user error.

Project Goal: Transform Add Services into a streamlined No-code user experience

Discovery - Teardown

To kick off the project, I worked with different teams to create a diagram of the current experience

This was used to uncover gaps & align the team on the current experience

Internal Feedback

Then I connected with both the Engineering team, and Customer success team

Engineering Team
Love: Faster service deployment with fewer errors
Concern: Need more advanced configuration options for complex cases

Customer Success Team
Love: Dramatic reduction in support tickets for deployment issues
Concern: Would like to see more built-in validation rules to prevent misconfigurations

Iterations

Based on feedback from clients, engineers, product managers, and usability testing. We conducted iterations, including user flow, wireframes, and visual presentation

Iteration B: Based on feedback from clients, engineers, product managers, and usability testing. We conducted iterations, including user flow, wireframes, and visual presentation

Iteration B: Based on feedback from clients, engineers, product managers, and usability testing. We conducted iterations, including user flow, wireframes, and visual presentation

Quick note of how I work with engineering

Engineering Hand-off

Engineers are involved in every step in the design process, so when it comes time for hand-off, there aren't any surprises. Also, I always leave notes that include interactions, links to mocks, etc. in the tickets we use for project management.

  • Design Files
    Figma file with components, and user flows
    Prototype link for testing user flows
    Style guide page with tokens and variables

  • Next Steps
    Schedule 30-min design walkthrough
    Set up joint Slack channel for questions
    Plan bi-weekly check-ins for progress

Impact

Internal data after the first 4 weeks

Refection

Being your user is the only way to do it right

By limiting initial inputs to just essential fields , we reduce decision paralysis while creating quick wins that build user confidence. This combination of clear constraints and rapid initial setup encourages users to progress through more complex configurations with greater momentum and fewer errors.