Skip to content
santhoshkanthala.Back to all work
06 — AI PlatformProduct UI/UX Designer · 2022 – 23· 16 min read

AI & Analytics Engine

My Role
Product UI/UX Designer
Timeline
2022 – 23
Key Metric
4
Core journey stages replacing a complex node-based legacy experience

Core challenge

AI · Analytics Platform

At a glance

Final solution at a glance

AI & Analytics Engine — project preview

4

Core journey stages replacing a complex node-based legacy experience

2

Primary user personas served from a single unified interface

1

Design system built from scratch — colours, typography, icons, and all UI components

Usability testing validated improved task completion, reduced confusion, and clearer path to value

01 — Overview

AI & Analytics Engine — What is it?

The AI & Analytics Engine (AI&AE) is a web-based machine learning platform built by PI.EXCHANGE that helps organisations quickly, easily, and affordably build predictive models and turn data into actionable decisions — without requiring deep coding expertise.

Purpose-built for anyone who works with data, the Engine guides users from raw dataset to deployed prediction model through a structured, simplified workflow. My responsibility spanned design sprints, usability testing, UI/UX design, and building the design system that unified the entire product experience.

AI & Analytics Engine — What is it?

AI & Analytics Engine hero dashboard showing the main interface and workflow overview

02 — The Problem

A complex legacy design blocking user adoption.

The AI & Analytics Engine was facing significant user retention and conversion challenges. A complex, node-based legacy design combined with multiple inconsistent UX flows was fragmenting the experience — making the learning curve steep for new users and ultimately preventing trial users from converting into paying customers.

The Core Gap

"The product's capability was strong — but the experience made it inaccessible. Users couldn't find their way through the tool, couldn't trust the outputs, and couldn't see a path to value quickly enough to stay."

Complex Legacy Node-Based Design

The existing UI relied on a node-graph paradigm that required significant technical understanding to navigate — creating an immediate barrier for the platform's target users, many of whom were not ML engineers.

Inconsistent UX Flows

Multiple disconnected flows across the product created confusion about where to start, what each step meant, and how actions related to each other — fragmenting the user journey and increasing drop-off.

High Learning Curve for New Users

Trial users — often aspiring data analysts or domain experts with limited ML background — encountered too much complexity too quickly, impeding their ability to experience the platform's core value before churning.

Low Trial-to-Paid Conversion

The combined effect of friction, confusion, and steep onboarding meant users rarely reached the moments of genuine value that would justify upgrading — directly impacting business growth and revenue targets.

03 — My Role & Goals

Shaping the product from research to system.

My role involved conducting design sprints across various stages of the user journey — fostering collaboration between data scientists, engineers, product owners, sales, and marketing teams. To drive feature innovation, I facilitated workshops using affinity mapping and card sorting techniques.

I was also responsible for establishing and maintaining the AI&AE design system from scratch, ensuring cohesive visual and interaction standards across the entire product — and overseeing accessibility testing to make sure the experience worked for all users.

Enhance user experience

Improve UI clarity, UX coherence, and visual quality across the platform.

Optimise functionality

Streamline workflows and increase task completion accuracy.

Drive business growth

Boost user retention, acquisition, and conversion from trial to paid.

Measure success

Track key metrics to evaluate design performance and iterate accordingly.

04 — Design Process

A structured, iterative approach to a complex problem.

The design process followed a five-stage framework — grounding every decision in user understanding before moving to execution. Each stage fed into the next, with feedback loops built in to prevent design decisions from outpacing validated knowledge.

01

Understand

Identify user needs, mental models, and operational pain points through interviews, observation, and existing data analysis.

02

Ideate

Generate creative solutions through workshops, affinity mapping, card sorting, and collaborative brainstorming with cross-functional teams.

03

Prototype

Build and test initial designs — from low-fidelity wireframes through to annotated mid-fidelity and high-fidelity interactive prototypes.

04

Iterate

Refine based on usability testing feedback, stakeholder input, and engineering constraints — with each cycle tightening the design toward the validated solution.

05

Implement

Launch the final product — with comprehensive design system documentation, developer annotations, and accessibility standards built in from the start.

05 — Discovery & Research

Understanding users before designing for them.

The research phase combined qualitative and quantitative techniques to build a grounded understanding of user needs, behaviors, and pain points. User research and brainstorming sessions used affinity mapping and card sorting — conducted in Miro — to organise findings into patterns that directly informed the product direction.

This included: conducting user interviews to surface goals and pain points; observing users in natural workflows; running surveys for quantitative signal; analysing existing analytics and customer service records; and creating user personas to represent the distinct types of users the platform served.

Understanding users before designing for them.

Requirements Gathering & Research Workshops — Leveraged Miro for visual ideation through affinity mapping and card sorting to organise research into actionable themes.

06 — User Personas

Two distinct users. One shared platform.

Research surfaced two primary personas with meaningfully different technical backgrounds, goals, and challenges — both of whom needed to find value in the same product. Designing for both without privileging one over the other was a core constraint of the entire project.

Experienced Data Scientist

Primary — Senior Data Scientist at a mid-sized company. Age 30–45 with a Master's in Statistics, Computer Science, or related field. Highly proficient in Python, R, SQL, TensorFlow, PyTorch, Scikit-learn with 5+ years of experience.

Pain points

  • Time-consuming data preprocessing and cleaning routines
  • Difficulty finding optimal model parameters efficiently
  • Lack of efficient monitoring and experimentation tools
  • Explaining complex models to non-technical stakeholders

Goals

  • Develop and deploy accurate, scalable machine learning models
  • Automate routine data preprocessing and pipeline tasks
  • Access scalability for large datasets
  • Seamless collaboration and compatibility with existing data pipelines

Aspiring Data Analyst

Secondary — University student pursuing a degree in Data Science or related field. Age 22–25 with strong foundation in statistics and programming. Proficient in Python, SQL, and basic data visualisation tools.

Pain points

  • Lack of access to real-world datasets for practical experience
  • Difficulty understanding complex machine learning concepts
  • Limited knowledge of data preprocessing and feature engineering
  • No structured path from learning to practical application

Goals

  • Learn and apply machine learning techniques to real-world problems
  • Build a portfolio through hands-on data analysis projects
  • Access intuitive tutorials and step-by-step instructions
  • Use pre-built templates to accelerate model development

07 — User Flow

Mapping the full journey from sign-up to prediction.

Before any screen design began, I mapped the complete user flow — from onboarding entry through to model deployment and export. This gave the team a shared understanding of every decision point, branching path, and moment where users could get lost or drop off. The flow directly shaped the simplified UX architecture that followed.

Mapping the full journey from sign-up to prediction.

End-to-End User Flow — Full journey from onboarding and sign-up through model building, evaluation, and prediction export — with all branching paths mapped.

08 — First Milestone: Wireframes

Structural clarity before visual polish.

The first milestone focused on creating simple, clear UI wireframes that outlined the application's structure and core functionality. These served as a foundational blueprint — aiding developer comprehension and enabling early feedback before any visual design investment. Wireframes prioritised user experience and information hierarchy, and were meticulously labelled and annotated for handoff clarity.

Projects List — Wireframe
Projects List

Projects List — Wireframe

Entry point for returning users — project overview with status tracking and quick navigation.

Project Overview — Wireframe
Project Overview

Project Overview — Wireframe

The starting point for new projects — three clear paths: build from scratch, use a template, or import data.

App Builder — Goal Selection
App Builder

App Builder — Goal Selection

Guided path for new users — selecting a prediction goal before configuring the model.

Model Summary — Wireframe
Model Summary

Model Summary — Wireframe

Model detail view — definition, current predictions, churn definition, and performance summary at a glance.

09 — Design System

A flexible, scalable system built from scratch.

The AI&AE design system is a comprehensive set of guidelines and components used consistently across the entire product to ensure a cohesive user experience. It covers typography, colour schemes, spacing, interactive components, and accessibility standards — making it straightforward for both designers and developers to use, extend, and maintain.

The system was designed to be flexible enough to accommodate the product's evolving needs, well-documented for easy implementation, and grounded in accessibility testing to ensure it worked for all users across all states.

01

Colour & Typography

Colour tokens, type scale, and spacing system forming the visual foundation of AI&AE.

Colour & Typography
02

Icon Library

A unified icon set covering all core product actions, states, and data types.

Icon Library
03

UI Component Library

Buttons, forms, cards, and interactive components — all states documented and ready for production.

UI Component Library

10 — Next Milestone: High-Fidelity UI

From wireframe to polished, production-ready screens.

To create high-fidelity UI screens from wireframes, I followed a structured progression: adding colour, typography, and branding to give screens a professional finish; incorporating real content — text, images, and data — to make mockups accurate and stakeholder-ready; gathering user feedback and iterating; and adding animations, hover states, and micro-interactions to add realism and operational clarity.

Real-time collaboration tools kept the team and stakeholders aligned throughout — with every iteration reviewed and refined before moving to the next fidelity level.

From wireframe to polished, production-ready screens.

High-fidelity UI showing polished interface with colour, typography, and interactive states applied to core workflows

11 — Key Design Decisions

Three decisions that defined the simplified experience.

The redesign was grounded in simplifying a technically complex product without removing the capability that expert users needed. Every major decision had to serve both personas simultaneously — the experienced data scientist and the aspiring analyst — without designing separate products for each.

01

Simplified UX — Four Clear Stages

The entire user journey was restructured into four sequential stages: Prepare data. Build ML models. Interpret and understand models. Generate and export predictions. This linear progression replaced the non-linear, node-based legacy experience — giving users a clear mental model of where they were, what came next, and what each stage required of them. The structure worked for both expert and novice users: experts could move quickly; newcomers had guardrails at every step.

Outcome — Complex journey became a navigable four-step flow
02

Explainability Built Into Every Model View

One of the platform's core differentiators was making ML model behaviour understandable to non-technical stakeholders. I designed explainability as a first-class feature — not a technical afterthought. Every model view surfaced performance metrics, confusion matrices, feature importance scores, and what-if analysis tools in accessible, non-jargon language. The goal: a domain expert who has never trained a model should be able to understand what it's doing and trust its outputs.

Outcome — Model transparency accessible to all user types
03

Guided Onboarding That Adapts to User Role

New users were asked to describe their role and motivation immediately after sign-up — not as a profiling exercise, but to personalise the onboarding assistance, quick-start guide, and feature annotation experience they received. An experienced data scientist and an aspiring analyst would see the same product but encounter it through a different introductory lens. This reduced early drop-off by ensuring users quickly reached the features most relevant to their specific context.

Outcome — Role-adapted onboarding reduced early friction

12 — Simplified UX: Core Flows

Four stages. One coherent experience.

The simplified UX divided the entire user journey into four major sections — each designed to be approachable on entry but capable at depth. Every stage surfaced the right controls for the right moment, without overwhelming users with complexity they hadn't yet needed.

Analyse & Prepare Your Data
Stage 1

Analyse & Prepare Your Data

Connect data via file upload or direct database connection. Perform exploratory analysis using built-in visualisation tools.

Build Machine Learning Models
Stage 2

Build Machine Learning Models

Develop optimal models with algorithm recommendations. Set performance quality and training time thresholds.

Understand Model Behaviour
Stage 3

Understand Model Behaviour

Compare trained models and interpret results using evaluation metrics, confusion matrices, and what-if analysis.

Generate & Export Predictions
Stage 4

Generate & Export Predictions

Run one-off predictions or schedule automated updates. Export results directly using built-in integrations.

13 — Final UI Screens

The complete interface in production.

The AI&AE visual design applied principles of contrast, hierarchy, and balance to create an aesthetically clear and easy-to-understand interface. Colour, typography, and imagery choices were grounded in understanding the audience — enterprise data teams and aspiring analysts — and the high-stakes nature of the decisions the product supported.

Onboarding
Onboarding

Onboarding

Entry experience with role-adaptive onboarding path and personalisation.

Upgrade Plan — Plan Selection & Checkout
Upgrade Plan

Upgrade Plan — Plan Selection & Checkout

Clear plan comparison, straightforward review, and frictionless payment — designed to convert trial users.

Dashboard & Product Core — Full Screen Set
Dashboard & Core Flows

Dashboard & Product Core — Full Screen Set

The complete set of production UI screens covering all major workflows.

14 — Impact

A complex product made approachable.

The redesign transformed a technically capable but user-hostile product into an accessible, structured experience that users could navigate with confidence from day one. The combination of simplified UX architecture, role-adapted onboarding, and explainable model views addressed the core retention and conversion challenges that motivated the project.

4

Core journey stages replacing a complex node-based legacy experience

2

Primary user personas served from a single unified interface

1

Design system built from scratch — colours, typography, icons, and all UI components

Usability testing validated improved task completion, reduced confusion, and clearer path to value

15 — Reflection

What I learned designing at the intersection of AI and accessibility.

Proudest Contribution

Building the AI&AE design system from scratch — establishing the visual language, component library, and accessibility standards that unified the entire product. Starting from nothing and producing a system flexible enough to serve both expert and novice users, while being straightforward for developers to implement, was the most complete design challenge of this engagement.

Biggest Challenge

Designing explainability UX for ML outputs. Making model behaviour — performance scores, feature importance, confusion matrices — genuinely understandable to non-technical users required deep collaboration with data scientists to understand what each metric actually meant, and then rethinking how to communicate it without jargon or information overload.

What I'd Do Differently

Involve domain experts — data scientists and actual end users — earlier and more continuously in the design validation process. Some explainability decisions were made based on assumed understanding rather than observed behaviour. Earlier and more frequent usability sessions specifically around model interpretation would have produced sharper solutions faster.

Tools & Methods

Figma · Miro · Affinity mapping · Card sorting · User interviews · Usability testing · Accessibility testing · Cross-functional workshops with data scientists, engineers, product owners, sales, and marketing · Design system documentation · Iterative prototype feedback loops