Role
UX Designer
design case study1 month
Salesperson's Interface for an AI Platform
I designed a representative-led AI demo flow that turns dataset upload, prediction generation, result comparison, editing, metrics, and export into one clear product story.
My role
UX Designer, research synthesis, information architecture, wireframing, high-fidelity design, clickable prototype
SignalAIReply
Timeline
1 month
Focus
AI/ML demo workflow
Iteration
Post-launch image viewer
Project overview
Make a technical AI workflow demo-friendly.
Speedo.ai offers end-to-end AI/ML lifecycle solutions, from data labeling to customized model creation and prediction generation. The business needed a platform experience that sales representatives could use to demonstrate the product quickly across industries.
Platform
A SaaS demo surface for explaining AI predictions across client use cases.
The interface helps representatives turn a technical AI/ML workflow into a clear product walkthrough: upload data, generate predictions, compare results, edit output, and export.
The brief
The team needed a simple way for representatives to show clients how datasets can be attached, processed, compared, edited, measured, and downloaded. The challenge was to make a technical AI workflow understandable during a live sales conversation.
Design question
How can a representative explain AI without making the client decode the platform?
The interface needed to support a live sales conversation: choose a model, upload a client dataset, generate predictions, compare results, edit where needed, and export the final output.
Scenario
Corrosion detection for a manufacturing client.
A representative meets an aluminium sheet manufacturing company, collects corrosion-affected images from the business admin, uploads them into Speedo.ai, generates predictions, explains the process, and shows the final result.
AgricultureManufacturingHealthcareAutonomous drivingAerospace
Audience
A demo for mixed technical confidence.
Representative
Demo the product around a client's use case.
Business admin
Share images and understand the prediction result.
Quality control
Review quality issues and error reports.
Data scientist
Evaluate labeling, model training, and prediction quality.
Key flow
From image upload to usable result.
01
Log in
02
Model
03
Upload
04
Generate
05
Review
06
Edit
07
Export
Demo journey
One walkthrough, three visible moments.
01
Client dataset
Images from the client's use case
02
Speedo.ai model
SaaS workflow generates predictions
03
MetricEditExport
Prediction review
Compare, edit, measure, export
Demo gap
Competitors mostly showed existing projects, not a guided sales demo.
Trust need
Clients needed to compare original inputs with AI-generated outputs.
Format reality
Real datasets included awkward horizontal and vertical images.
Research signals
- Most competitors demonstrated AI capabilities through existing projects rather than a sales-specific demo platform.
- The demo needed to work for different industries, including agriculture, manufacturing, healthcare, autonomous driving, and aerospace.
- Representatives needed a familiar workflow that could handle questions during the presentation without breaking the demo.
- Clients needed to see both the original input and the AI-generated prediction to understand the value of the result.
Design process
From problem framing to prototype.
I used a collaborative, user-centred, iterative process: audience definition, competitor analysis, scenario writing, information architecture, sketches, wireframes, and high-fidelity prototyping.
Information architecture
Two prediction paths, one simple structure.
I mapped static image prediction and real-time prediction so the demo could branch without becoming difficult to present.
Wireframing
Sketch, structure, prototype.
- Started with hand sketches to establish the rough flow.
- Created low-fidelity wireframes for model selection, selected-model details, upload, and prediction start.
- Moved into high-fidelity UI using Speedo.ai's existing design system.
- Built a clickable prototype so the team could test the representative-led demo flow.
Prototype
Review was the proof moment.
The predictions area gave representatives a way to show results in grid, dual, list, and full comparison views while keeping metrics and export close by.
Usability testing
Feedback pointed to the image viewer.
- The team tested the flow internally before launch.
- After launch, feedback came from representatives and potential clients.
- That feedback showed where the product needed to become more efficient during real demos.
- The strongest iteration opportunity appeared in the image comparison viewer.
Post-launch iteration
Real datasets are not always square.
The first side-by-side comparison worked for square-like images, but extreme horizontal and vertical images were difficult to inspect. The iteration added a horizontal comparison mode and an individual full-scale view with zoom controls.
Zoomable detail
Inspect one image at fuller scale.
Flexible comparison
Review wide images in a stacked layout.
Prototype
Explore the Speedo.ai preview.
The Figma prototype shows the representative-facing flow from model selection through prediction review.
Outcome
- A clearer demo flow that representatives could use to explain AI predictions through a familiar step-by-step model.
- A reusable information architecture for model selection, dataset upload, prediction review, editing, metrics, and export.
- A more flexible image viewer that handled real-world dataset formats better after launch feedback.
Reflection
AI demos need visible logic.
The project taught me that AI interfaces become easier to trust when the workflow is visible. For a sales-led platform, the design has to support both product explanation and client confidence at the same time.