Back to overview

UX for data analysis and AI training

Connected workflows for data analysis and AI training gave the product team a shared foundation for further development. We also made an additional node-based approach available to explore through a prototype.

My role
Project & Design Lead · userdoo
Collaboration
Tommy Haacke and team · AICU
Scope
Product UX, interfaces & prototypes
AICU workflow study with a component library and connected steps for data, preprocessing, visualisation and training
Workflow study from the later collaboration. AICU proposed the Node View; the userdoo team developed its design and prototype.

Connecting data work and training through a shared UX

Situation

AICU already had a data-intensive product. Different approaches had grown alongside each other, leaving navigation and interface patterns inconsistent. Projects, data exploration and training needed to work better together.

Role and responsibility

I led project and design on the userdoo side, coordinated with the client and guided our joint design work. Later, we also translated AICU's node-based workflow idea into a design and prototype.

Approach

We clarified tasks with the client in design sessions and calls. Designers then developed screens, which we reviewed together with the client team. This is how we evolved navigation, training flows and components. We later built the node prototype together under my leadership, using AI-assisted coding.

Result

AICU received connected flows for data, training and results, along with shared components. The node prototype made another product approach available to explore.

01 Product orientation

Connecting projects,
data and training.

Working sketches with variants for project information, data tables, exploration and training steps
Project sketches exploring navigation and the arrangement of work areas.

The application combines a project and its data, tools for exploring that data, and training runs with their own settings and results. Navigation needed to distinguish those levels while making their relationships clear.

The sketches give the project a stable frame. Information, tables, exploration and training form distinct areas, each with its own tasks, such as selecting a table, creating a visualisation or opening a training run.

Our scope extended from onboarding and project creation to data and training views. Under my leadership, we developed a shared UX for these connected tasks.

Variants in the working material

Distinguishing two levels of navigation.

Sketches A and B explore where training steps belong: in an additional vertical column or horizontally above the workspace. Project areas remain accessible on the left in both variants.

The design question was how to guide users through training while retaining project navigation. The detailed training view uses horizontal steps; the sketches document the layouts explored and their relationship to the workspace.

02 Connected flows

From starting training
to reviewing results.

Training starts with several domain-specific decisions. The design breaks them into four steps: analysis objective, target selection, feature selection and model recommendations. A step indicator shows progress, with back and next actions connecting the decisions.

This gives configuration a sequence. Users first choose an objective such as prediction, classification or clustering; model recommendations have their own later step. The domain choices become successive interface views.

Results are also organised by task: the processing pipeline, applying the model to new data and evaluating performance. Data information, preprocessing and further steps remain accessible within the pipeline. Figma connections show how the views and dialogs link in the prototype.

Figma working excerpt with connected new-training dialogs and pipeline, inference and results views
Original excerpt of prototype connections. The visible content illustrates the flow.
Prepare

Create a training run and choose the analysis objective.

Configure

Present the remaining decisions in sequence.

Assess

Make the pipeline and results accessible in structured views.

03 Design foundation

Making recurring elements
consistent.

The structural redesign needed a shared visual foundation. Navigation, inputs, dialogs and cards should work consistently across the different areas.

The component board combines general UI elements with application-specific ones. It connects the many individual views: domain content varies, while shared controls provide a familiar frame. We later developed the colour palette and interface further.

Component overview with application-specific elements, buttons, cards, inputs and dialogs
Project component overview: general building blocks and application-specific additions.

04 Workflow & prototype

Showing processing steps
as a workflow.

AICU introduced the node-based workflow idea. Our contribution was to translate it into an interface and prototype.

The study divides the interface into a library and a canvas. Categories and search help users find building blocks on the left; the canvas shows connections between data, preprocessing, visualisation and training.

The design supports finding available steps and understanding their relationships. Zoom controls and a minimap provide additional orientation. These elements are part of the design study.

We built the later prototype together under my leadership. Much of the work used AI-assisted coding, connecting design and prototype implementation.

Node workflow with library, search, connected processing steps and a canvas overview
Figma Node View study. This shows a design iteration, not evidence of a production workflow.

05 My responsibility

Leading the redesign.
Developing it with the team.

I was responsible for client communication, design decisions and delivery on the userdoo side, including guidance of the designers involved.

I led the overall direction and coordinated the detailed work with my team and AICU. Together, we connected product structure to data views, configuration steps and recurring controls.

The client brought the Node View idea. I led its design and prototyping with the team; the later AI-assisted implementation was also a joint effort under my leadership.

Collaboration

My contribution

Project and design leadership, client coordination and design-team guidance

Tommy Haacke and team

Design of key views and prototype development

AICU

Domain context and the node-based workflow idea

Outcome

Evaluating product decisions through concrete workflows.

The client team could discuss and refine navigation and training workflows using concrete screens. Shared components connected previously inconsistent areas. The node prototype made the client’s workflow idea available for interactive exploration.

Product structure

Navigation & projects

Redesigned entry points, project creation and project overviews.

Product design

Data & training

Detailed data views, visualisations and training flows.

Exploration

Node View

Design and prototyping of the workflow idea proposed by the client.