Back to Portfolio

CobiotX SaaS Web App

Designing an intuitive B2B platform to connect, monitor and manage Plato robots and their devices remotely

Role: UX/UI, Design System lead, Responsive DesignTimeline: October 2022 - December 2024

SaaSB2BRoboticsDashboardFigmaUser Research

Outcome

A guided monitoring experience that let non-technical managers run their own robots. Workflow efficiency rose and users were satisfied.

My contribution

I led the UX/UI and design-system work across the platform, from secure login to the monitoring dashboard and device-management features: ran research and ergonomic audits with PMs and POs, mapped the user flows and information architecture, designed the responsive high-fidelity screens, integrated the design system, ran usability testing with 8 operators (95% task completion), and wrote the UX spec with acceptance criteria for handoff to dev via Jira.

Challenge

CobiotX is a cloud platform for managing connected devices remotely: Plato serving robots, their routers and their tablets. Clients needed one place to connect and pair each device (robot ↔ router ↔ tablet), keep it running, and store or export its data (for example, for Customer Success Managers). The existing tools were fragmented and too technical, which made pairing, monitoring and data handling slow and error-prone.

Objective

Design new, easy-to-use functionality on top of the platform, starting with secure login and the monitoring dashboard, then features like device pairing. The right people also needed access to it: a restaurant manager should be able to monitor and manage their own devices without technical help, while device data stayed centralized and exportable.

Context

Long-term B2B SaaS project for clients operating Plato service robots. Collaborated with on-site managers, staff and technical teams to understand real device-management workflows, connectivity needs and safety constraints.

Design Process

How I worked through the B2B workflow problems, step by step

1

Requirements & Discovery

Gathered product requirements from the PM, analyzed user pain points, and ran ergonomic audits on existing features to frame the problem.

2

User Stories & Specifications

Translated requirements into user stories with acceptance criteria, defining the features needed to solve each user need.

3

Information Architecture

Mapped user flows and structured KPI hierarchies for an optimal dashboard structure.

4

UI Design

Designed high-fidelity, responsive mockups, integrating the design system into the wireframes before hand-off.

5

Testing & Feedback

Ran usability testing with 8 operators, achieving a 95% task completion rate, and iterated based on findings.

6

Handoff & Documentation

Wrote the UX spec with acceptance criteria in Figma, then handed it off to the dev team via Jira.

Key decisions & trade-offs

What I chose, and why

Chose to centralize every device (robot, router, and tablet) in one platform that clients could manage remotely, instead of handling each device through separate, fragmented tools. That gave teams one place to connect, monitor and export device data without being on-site.

Sequenced the build around the core journey, starting with secure login, then the monitoring dashboard, before layering on features like device pairing, so users had a reliable foundation to work from first.

User Personas

Who CobiotX was designed for

S

Sarah, Restaurant Manager (End Client)

End Client

Runs a busy mid-size restaurant using Plato serving robots to support staff during peak service.

Goals

Keep robots running smoothly during service
Reduce staff workload during peak hours
Monitor robot status at a glance without technical training

Pain Points

Robots dropping connection mid-service
No easy way to see which robot needs attention
Setup feels too technical for non-technical staff

Needs from CobiotX

Simple real-time dashboard for robot status, battery, and connectivity
Quick pairing of a robot to the restaurant router and floor tablet
Clear alerts when action is needed

L

Louis, Customer Relationship Manager, Ald

Ald Team

Manages multiple restaurant accounts and keeps their Plato robot fleets operational and clients satisfied.

Goals

Keep every client fleet online and operational
Resolve issues remotely before they escalate
Prove reliability and value to accounts

Pain Points

Limited remote visibility into each client site
Reacting only after clients complain
Time lost coordinating on-site setup visits

Needs from CobiotX

Multi-site fleet overview across all accounts
Remote diagnostics and connectivity health monitoring
Guided sync/onboarding flow to hand off to clients easily

User Flow

Syncing a Plato robot with its router and tablet through CobiotX

Start

Connect on CobiotX

Dashboard

Select a Device

Click Sync button

Sync?

Yes

Done

No

Click reset

Reset successfully?

Yes

Done

No

Contact Help

Dashboard Interface

Responsive design for industrial workflow management

Results & Impact

Made operator training faster to get through.

Improved workflow efficiency through automated reporting

Strong user satisfaction in post-deployment surveys

Key Learnings

Working with on-site teams taught me to design for fast-paced, high-stakes environments where clarity and efficiency matter most.

Iterative testing showed that operators preferred a simple guided interface, a clear step-by-step flow for each task, over dense feature-heavy screens.

B2B UXDashboard DesignUser ResearchDevice Management

Interested in collaborating?

Email me and tell me what you're working on.

← All ProjectsLet's Work Together

Back to Portfolio

Enterprise Design System

Building a scalable design system using Atomic Design, with design tokens and accessibility guidelines.

Role: Design System Lead, UI DesignerTimeline: September 2022 - December 2024

Design SystemAtomic DesignDocumentationFigmaAccessibilityTokens

Outcome

A 45+ component Atomic Design system with tokens and accessibility built in. Design-to-development handoff time dropped 65%, and the system was adopted company-wide.

My contribution

As design system owner, I rebuilt the component library so each component was defined once and reused everywhere: variants, states, responsive versions, one documentation page each. I paired it with ergonomics rules covering usage, behaviour and limits, so design, dev and QA worked from the same spec and the products stayed consistent as they scaled. Handoff time dropped by roughly 65%.

Challenge

Multiple product teams were building inconsistent UI components. That fragmented the user experience and slowed development. There was no centralized design system across platforms.

Objective

Create a scalable design system following Atomic Design principles, with documentation, accessibility guidelines and design tokens that reduce design-to-development handoff time by 65%.

Context

Internal company initiative spanning multiple product teams. Collaborated with developers and product managers to establish design standards, applying accessibility best practices to build inclusive components from the start.

Design Process

Building a system that scales across multiple product teams

1

Audit & Research

Audited the UI across all products and ran workshops with cross-functional teams to understand each product's features and needs.

2

Token Architecture

Established a design token hierarchy and semantic naming conventions as the foundation of the system.

3

Component Library

Built 45+ components following Atomic Design with variants and states, designed around real product features and adapted for responsive layouts.

4

Testing & Validation

Ran accessibility testing and validated components with development teams, applying the system directly in wireframes to confirm it worked in real screens.

5

Documentation

Wrote guidelines with usage examples and ergonomic rules so teams could apply the system consistently.

Key decisions & trade-offs

What I chose, and why

Built reusable components designed to last, and used design tokens so colors and languages could be switched easily across the whole system, rather than rebuilding screens each time. Getting multiple teams to adopt it took extensive stakeholder alignment and clear communication of the system's value.

Applied ergonomic and accessibility-minded rules across components: consistent color contrast, font sizes and spacing, so the system stayed legible, comfortable and inclusive to use.

Who It Serves

One source of truth for four teams

UI Designers

Quickly find the right component and stay consistent, so design work is faster and on-spec.

UX Designers

Reuse patterns, flows, and interaction rules to keep experiences coherent across products.

Developers

Integrate ready-made components directly instead of coding each UI element from scratch, so they build faster and with fewer mistakes.

QA Teams

Validate the final product against a single documented spec to catch inconsistencies early.

How a Component Gets Used

From design to shipped, validated against one spec

Designer applies itUX/UI designers pull components and templates into their wireframes for new or updated features, rebuild the user flows, and produce the design spec.

Handoff with requirementsDesigners hand off the spec together with the UX requirements as the reference to build from.

Developer buildsDevelopers implement the feature using the components already integrated in their library, instead of coding each UI element from scratch.

Technically feasible?

No

Yes

QA validatesQA checks the final product against the same spec, using Jira and the Figma file.

Validate?

No

Yes

Shipped

Revise spec

System Components

Atomic Design methodology in practice

Complete Design System Library — Built on Atomic Design principles, so teams compose components and templates like Lego blocks. Tokens keep styling consistent across every product.

Plato design system, header and navigation bar sizes for mobile, tablet and desktop, with list item and button states — Each component documents its states, variants, and responsive behavior across 3 breakpoints, so developers build from a single source of truth.

Design Tokens & Color System

Brand

Black & white

Grey scale

Colorful & state

Results & Impact

Reduced design-to-development handoff time by 65%

Improved product quality and consistency through standardized, reusable components

Adopted and integrated by 2 development teams as a shared source of truth

Key Learnings

The hardest part wasn't building the system, it was getting different teams to actually adopt it. Consistency only happens when people understand why the system helps them, rather than just knowing that it exists.

A design system isn't done when the components are built. It only works if it's documented and kept up to date, otherwise teams stop trusting it and go back to their own versions.

A design system is a long-term product, not a one-time deliverable. It needs constant iteration as products, teams and needs change.

System ThinkingOwnershipCross-functional CollaborationDocumentationDesign Systems

Interested in collaborating?

Email me and tell me what you're working on.

← All ProjectsLet's Work Together

Back to Portfolio

Working In Progress

Koto Tea Space

Workshop booking website built in Figma, with an AI chatbot handling bookings and recommendations

Role: UX/UI Designer, No-Code DeveloperTimeline: Ongoing

WebsiteAI ChatbotBookingFigma

The idea

A warm, self-serve booking experience for a tea-workshop space, with an AI assistant that answers questions, recommends the right session and takes bookings, so the owner spends less time on admin and more on hosting. In design and prototyping now.

My contribution

As the sole designer and no-code builder, I’m shaping the whole thing end to end: the user journey, the visual design, the booking flow and the AI assistant. I prototype in Figma and wire the automation and GPT integration with no-code tools, testing ideas as I go.

Challenge

A local tea-workshop space wants an online presence to take bookings, showcase its workshops and give people personalized recommendations. Manual booking is capping how much it can grow.

Objective

Design a self-serve booking website with an AI assistant that cuts the owner’s manual admin, while keeping the experience warm and personal rather than transactional.

Context

A personal, in-progress project that pairs UX design with no-code automation, built in Figma with AI integration. About six weeks in.

Design Process Roadmap

Combining UX design with automation technology

1

User Journey Mapping

Mapping customer touchpoints, from discovering the space to post-workshop follow-up.

2

Automation Architecture

Designing the booking and AI-assistant flows with no-code automation (Figma Make and GPT).

3

Visual Design

Building a warm interface around a tea-inspired palette and photography.

4

Integration Testing

Next: test the booking flow and AI recommendations with a handful of early users.

5

Launch & Analytics

Planned: a soft launch with light analytics to see what to refine.

Key decisions & trade-offs

What I chose, and why

Leading with no-code (Figma Make and GPT) so I can prototype and reshape the whole flow fast, and keep the project shippable by one person.

No-code trades some flexibility and scale for speed. If Koto grows, parts of the automation may need a proper backend, which I’m treating as a deliberate later step, not a day-one need.

Website Design

A warm interface with automated booking

Koto Tea Space Website & App — Homepage and workshop showcase, with the AI assistant surfacing recommendations. Current draft.

Koto Tea Space Website — Booking flow. Current draft, still being refined.

Where it stands

An honest snapshot of a project still in motion

Design and interface: in progress. I’m prototyping the site, the workshop showcase and the booking flow in Figma.

AI assistant and automation: in progress. I’m wiring bookings and recommendations with no-code tools (Figma Make and GPT), keeping a human, welcoming tone.

Next up: test the flow with a handful of early users, then a soft launch with light analytics to see what to refine.

Early learnings

Designing AI into the experience is mostly a balancing act: automation should save time without losing the human, welcoming feel, which matters even more in hospitality.

No-code tools like Figma Make and Lovable are letting me prototype and test complex automated flows on my own, without traditional development overhead.

AI IntegrationNo-Code DevelopmentAutomation DesignService Design

Interested in collaborating?

Email me and tell me what you're working on.

← All ProjectsLet's Work Together

Back to Portfolio

Working in progressConceptual project

LedgerPilot: AI Finance Agent

An AI agent that automates expense and finance workflows. It categorizes spend, flags policy issues, drafts approvals and surfaces anomalies, with a human always in control.

Role: UX/UI Designer, AI Product DesignType: AI agent + SaaS concept

AI AgentFintechSaaSAutomationTrust & ControlDashboard

Outcome

A finance-review tool where the AI does the repetitive checking: categorizing spend, applying policy, flagging anomalies, but shows its work, so the accountable manager can verify each decision in seconds and stand behind it. The team keeps control of every consequential action.

My contribution

Sole designer on this concept: defined the problem, ran secondary research (competitor-review analysis) and an expert interview, shaped the trust-and-control UX principle, and designed the review-and-approval flow end to end.

Challenge

Finance teams spend hours checking expense claims by hand: against policy, for errors, in batches. AI can do that checking, but no one will let software approve spending they can't see into. The challenge: show the AI's work clearly enough that a manager can trust it, verify fast, and defend every decision.

Objective

Design a review-and-approval flow where the AI does the checking but the manager makes every decision. One rule throughout: the agent proposes, the human decides. The goal is faster review that preserves oversight and leaves an auditable record of who decided what, and why.

Context

A concept project exploring how to design AI agents for high-stakes work where a person stays accountable for the outcome. The primary user is the finance reviewer. With limited direct access to finance professionals, the work draws on secondary research: real competitor-app reviews, with a planned expert interview to validate it. Personas remain hypotheses until tested against that input.

Design Process

Designing an AI agent people can actually trust

1

Research

Used AI to analyze real competitor-app reviews and map the expense-review workflow: where an agent adds value, and where a human has to stay in control.

2

Agent capabilities

Defined what the agent does (categorize, flag, detect) and what it never does alone (approve, pay), before designing any screens.

3

Wireframes

Sketched the core screens as low-fidelity wireframes in Claude Design to test the layout and the review-and-approve flow.

4

Design system & UI

Built a design system in Claude Design and applied it across the screens to bring them to high fidelity, keeping styling consistent.

5

Testing (planned)

Once the flow is built in Lovable or Claude Code, test with users how much agent autonomy feels helpful vs. intrusive, and how errors and edge cases are surfaced.

Competitive benchmark

Where four spend platforms stand on AI, control and auditability, and the gap this design targets

Competitive Benchmark · Expense Management4 platforms · 4 dimensions

Each cell is rated Strong / Moderate / Basic, scored from aggregated G2, Capterra and TrustRadius reviews plus each vendor's current product docs.

Platformavg strength	AI AgentAutomation and autonomy	UsabilityReview experience	ExplainabilityReasoning and control	AuditabilityAnomaly handling
Expensify1.6 / 3.0	Basic OCR extraction plus policy-violation flags, not an autonomous agent.	Moderate Fast receipt capture, but tools feel buried; expenses ⇄ reports confusing.	Basic Shows extracted data and flags, but no reasoning or confidence: a "check each one" model.	Moderate Visible approval chains, but weak anomaly intelligence.
Ramp2.8 / 3.0	Strong Four autonomous agents (coding, fraud, routing, payment); reviews 100%, escalates ~10-15%.	Strong Consistently praised as clean and intuitive.	Moderate Flags come with context, but heavy auto-approve hides the work from the reviewer.	Strong Real-time anomaly and fraud detection plus 3-way match; US / card-locked.
Pleo2.0 / 3.0	Moderate Auto-extract and receipt-to-transaction matching, custom flows (European focus).	Strong Clean, low training time, a top-cited strength.	Basic Automates approvals, little reasoning surfaced; config struggles on complex flows.	Moderate Approval flows and limits, but anomaly detection is not a focus.
Spendesk2.1 / 3.0	Moderate Automated workflows and spend controls, less agent-heavy.	Strong Guided, step-by-step; thin on analytics and customization.	Moderate Strong on control (per-user rules, 100% visibility), light on the "why".	Moderate Real-time feeds and card limits; modest anomaly logic.

ReadRamp leads on autonomy and auditability; Pleo and Expensify win day-to-day usability; explainability is the shared weak spot: most tools flag, few reason.

Sources: G2 · Capterra · TrustRadius · vendor docs

Meters and ratings at a glance. Enlarge for each vendor's notes.

Key decisions & trade-offs

What I chose, and why

Made the agent's reasoning visible: every suggestion shows its confidence, the policy rule applied, and the evidence, so the reviewer verifies in seconds.

Propose, don't execute: the agent prepares decisions but never approves or pays on its own.

Anomalies and policy issues are excluded from bulk approval by default, so the fast path stays safe.

The agent's autonomy is adjustable, so trust is dialed up over time instead of assumed on day one.

User Persona

A hypothesis to validate, not a researched persona

F

Finance / Operations Manager

Hypothesis persona

Reviews and approves employee expense claims.

Goals

Clear the review queue quickly
Stay compliant
Justify every decision

Pain Points

Manual policy checks
Hard-to-spot anomalies
Bulk-approving without confidence
Being accountable if something wrong slips through

Needs from LedgerPilot

To see what the AI did and why
To override it easily
To keep a record of who decided what

Wireframes

7 screens, low fidelity, before the Design system's elements are applied

Wireframe: review queue screen — Review queue — anomalies and policy exceptions ordered first, excluded from bulk approval

Wireframe: claim detail and AI reasoning screen — Claim detail & AI reasoning — claim facts left, agent assessment right, overridable

Wireframe: anomaly detail screen — Anomaly detail — this transaction against the normal pattern, the deviation made obvious

Wireframe: bulk approve with guardrail screen — Bulk approve with guardrail — confident items batch; anomalies and policy issues excluded

Wireframe: automation settings screen — Automation settings — the autonomy level and the limits the agent can never cross

Wireframe: audit trail screen — Audit trail — every line attributed to the agent or to a named person

Key Screens

High-fidelity screens in the LedgerPilot design system

LedgerPilot sign-in screen — Sign in — identity is established up front, so every action is attributed to a named person

LedgerPilot review queue screen — Review queue — AI-processed claims, sorted by what needs attention

LedgerPilot claim detail and AI reasoning screen — Claim detail with AI reasoning panel — confidence, policy rule applied, evidence, override controls

LedgerPilot anomaly detail screen — Anomaly detail — why it was flagged, compared to normal patterns

LedgerPilot bulk approve with guardrail screen — Bulk approve with guardrail — separates confident items from uncertain ones before confirming

LedgerPilot automation and governance screen — Automation settings — how much autonomy the user grants the agent

LedgerPilot audit trail screen — Audit trail — every approve, edit and reject with who, when, and the reasoning behind it

Design System

Built with Claude Design. 4 foundations shown here: explore the full design system below.

Colors · brand and AI

--brand-primary#1055C9Primary actions, links, active states

--brand-primary-hover#0D47A8Hover

--brand-primary-active#0A3B8CPressed

--brand-primary-weak#E7F0FFTint / secondary hover

--ai-bg#E7F0FFAI proposal background

--ai-text#1055C9AI proposal text

--ai-border#BAD3FBAI proposal border

Status · never colour alone

ApprovedNeeds reviewPolicy errorAnomaly

Every status pairs a colour with an icon and a written label, so the meaning survives colour blindness and greyscale printing.

Typography · Inter

The agent proposes, the human decides

Heading--text-heading24px · 700

The agent proposes, the human decides

Subheading--text-subheading18px · 600

The agent proposes, the human decides

Body--text-body15px · 400

The agent proposes, the human decides

Caption / meta--text-caption13px · 400

Button

Approve exceptionRequest informationEscalateApprove · disabled

Primary is filled, secondary is outlined, tertiary is quiet. Consequential actions stay disabled until their precondition is met.

View the full design system

Results & Impact

Results to be added.

Usability tests still need to be conducted. The flows below are reasoned from the research, not yet validated with finance managers.

Key Learnings

The hardest part was trust. People will accept an agent's help once they can see how it reached a suggestion and override it, as long as the decisions that carry weight stay with them.

Being able to explain a decision, and leaving a clear audit trail, mattered more than how much the agent could do on its own. It proposes; the person decides.

In finance, replacing the person was never the point. The agent takes the tedious work off their plate, and the judgment stays with them.

AI AgentTrust & ControlFintechHuman interaction designExplainabilityClaude Design

Interested in collaborating?

Email me and tell me what you're working on.

← All ProjectsLet's Work Together

Back to LedgerPilot

Working in progressConceptual project

LedgerPilot Design System

A calm blue-on-neutral system, built for clarity under dense financial data. Consistent tokens, type, and components across every screen.

Built with: Claude DesignModes: Light + dark

Design tokensComponentsAccessibilityDark mode

Principle

One system, built once, reused everywhere: for consistency across screens and faster development.

Open the Figma file ↗

Colours

Brand, AI proposal, status and neutrals

Brand

--brand-primary#1055C9Primary actions, links, active states

--brand-primary-hover#0D47A8Hover

--brand-primary-active#0A3B8CPressed

--brand-primary-weak#E7F0FFTint / secondary hover

AI suggested · a proposal, not a decision

--ai-bg#E7F0FFAI proposal background

--ai-text#1055C9AI proposal text

--ai-border#BAD3FBAI proposal border

AIProposed classification: Voyage · Hôtel Low · 62%

Status

Badge	Token	Base	Background	Text
Approved	`--status-approved`	#91D06C	`#EEF8E6`	`#3F7A1E`
Needs review	`--status-review`	#F5B21A	`#FEF4DC`	`#8A5D00`
Policy error	`--status-error`	#E5484D	`#FDECEC`	`#B42227`
Anomaly	`--status-anomaly`	#F76B15	`#FDEEE1`	`#B24704`

Neutral ramp

0#FFFFFF

50#F8FAFC

100#F1F4F8

200#E4E7EC

300#D3D8E0

400#9AA3B2

500#6B7280

600#4B5563

700#374151

800#232830

900#1A1D21

Typography

Inter, body minimum 15px, tabular figures for money

Type scale

The agent proposes, the human decides

Heading--text-heading24px · 700

The agent proposes, the human decides

Subheading--text-subheading18px · 600

The agent proposes, the human decides

Body--text-body15px · 400

The agent proposes, the human decides

Caption / meta--text-caption13px · 400

Weights

Aa 1234Regular400

Aa 1234Medium500

Aa 1234Semibold600

Aa 1234Bold700

Tabular numerals

tnum€1.240,00
€4.218,45
€54,00

Money columns align on the decimal because every digit occupies the same width.

Spacing, radius and elevation

A five-step scale; flat by default with lift reserved for panels and modals

Spacing scale

--space-14px

--space-28px

--space-316px

--space-424px

--space-532px

Radius

--radius8pxAll corners

--radius-sm6pxInner elements

--radius-pill999pxBadges and pills

Elevation

--shadow-noneDefault

--shadow-cardCards

--shadow-raisedPanels

--shadow-overlayModals

Components

Button and status badge rebuilt here; the rest are specified in the system

Button · primary / secondary / tertiary

Approve exceptionRequest informationEscalateApprove · disabled

Sizes 32 / 40 / 44px. The 44px size meets the mobile tap-target minimum.

StatusBadge

ApprovedNeeds reviewPolicy errorAnomaly

Colour, icon and label always travel together.

Also in the system

DataTable + DataTableRowSortable, selectable review-queue table
ConfidencePillAI confidence High / Medium / Low, always labelled
SidePanel + PanelSectionThe AI reasoning panel
ModalConfirm dialog for consequential actions
TextInput + NoteFieldOverrides and audit-trail justification
IconLucide-based stroke glyph set

Rules

The constraints that make the principle enforceable

Do

Use color tokens, not hardcoded hex. Pull from the defined palette (primary, status, neutrals).
Use the type scale as defined: Heading 24 / Subheading 18 / Body 15 / Caption 13. Body never below 15px.
Use the three button types for their role: primary (filled) for the main action, secondary (outline) for alternatives, tertiary (icon) for minor actions.
Keep the 8px radius and the 4 / 8 / 16 / 24 / 32 spacing rhythm on every element.
Use Lucide icons throughout, at consistent size and stroke.
Pair every status with its icon and label.

Don’t

Introduce colors, fonts, or icon styles from outside the system.
Use more than one primary (filled) button per screen.
Resize or restyle components ad hoc instead of using the defined variants.
Rely on color alone to signal status.

Back to the case study

See how these foundations are applied across the review flow.

← LedgerPilotAll Projects

Back to Portfolio

Accessibility Mediation Platform

Koena Connect: the platform where users report accessibility and usability issues on a partner's website, and Koena's team mediates them

Role: Sole UX/UI DesignerYear: 2021-22Product: Koena Connect · mediation platformClients: STIVO · Île-de-France Mobilités

AccessibilityWCAGUsability TestingMediation

Challenge

People with disabilities regularly hit accessibility and usability barriers on public-service websites, with no simple way to report them or get help. Partner organisations needed a channel to receive, sort and resolve those problems.

My role

As the sole UX designer at Koena, I designed Koena Connect end to end: the user request flow, the admin management interface, and a client onboarding page, aligned with usability criteria and WCAG, with concrete interface proposals for users and clients.

Context

Built and run during an experimentation phase with real partners: STIVO with Île-de-France Mobilités. The partnership with STIVO continues in production.

Approach

Designing, testing and iterating an accessible mediation platform

1

Platform design

Designed the platform against usability criteria, covering the user request flow and the admin management interface, for an intuitive and accessible experience.

2

Accessibility & usability analysis

Analysed usability issues and applied WCAG to identify what to improve, then proposed concrete interface solutions for users and clients.

3

STIVO onboarding

Designed an onboarding page for our client STIVO to filter out irrelevant requests before they reach mediation.

4

Testing with disabled users

Ran usability tests with users who have disabilities, on both the platform and the onboarding page.

5

Iterate

Where we hit difficulties, I proposed changes and refined the design iteratively, round by round.

How a request flows

From a barrier on the partner's site to a request that gets resolved or routed

Issue on partner site

Accessibility button (designed)

Mediation request form

Koena triages

UX/UI proposition/solution

Resolved / routed

Where each request goes

Koena's team sorts every incoming request

Accessibility issueBarrier on the partner's website

Koena mediates

Usability issueConfusing or hard-to-use flow

UX/UI fixes proposed

Out of scopeNot an accessibility/usability problem

Routed to client

Key screens

The platform, its onboarding, and the request flow as shipped with STIVO

Overview of the Koena Connect mediation platform: welcome page, request form and mediation dashboard — Overview: the STIVO welcome page, the request form, and the mediation dashboard Koena’s team uses to triage each incoming request.

The mediation platform on the STIVO website — The mediation platform on STIVO: contact routes and a three-step request wizard (About you · Your problem · Summary).

Form step that records the assistive technology the user relies on — The request records the assistive technology used, screen reader, keyboard or Braille display, so a mediator can reproduce the barrier.

STIVO onboarding page for the mediation platform — STIVO onboarding page, badged « accessibilité numérique », with a user tutorial and clear ways to get help.

The Contact accessibilite web button placed on the partner site — The « Contact accessibilité web » button I designed: the entry point to mediation, placed on the partner’s site.

Results & Impact

Delivered Koena Connect end to end, covering the user request flow, admin interface and the STIVO onboarding page, as the company's sole UX designer.

Validated the design with users who have disabilities through usability testing, and refined it iteratively.

Ran live with real partners, STIVO · Île-de-France Mobilités, and continues in production with STIVO.

Key Learnings

Testing directly with users who have disabilities surfaced problems no guideline check alone would catch, and it made every iteration sharper.

Clearly separating accessibility, usability and out-of-scope requests kept mediation fast and made the platform's value obvious to clients.

AccessibilityWCAGUsability TestingMediationOnboardingEmpathy

Interested in collaborating?

Email me and tell me what you're working on.

← All ProjectsLet's Work Together

Back to Portfolio

Plato: Serving Robot for Humans

UI/UX design for the Plato serving-robot app at Aldebaran, taken from Android to a web application on a shared design system and Material Design 3.

Role: UI/UX DesignerCompany: Aldebaran (United Robotics Group)Year: 2022-24Access: Confidential

Android AppWeb AppRoboticsEnterprise UX/UIDesign SystemMaterial Design 3

Outcome

A consistent, accessible Plato experience, taken from Android to web on a shared design system, with UX modes designed for the realities of live service, deployed on robots and used in the field.

My contribution

As the UI/UX designer, I led the creation and enhancement of every interface and function of the Plato app, first on Android and then extended to a web application. I brought the design system and Material Design 3 into each screen for consistency, accessibility and an intuitive experience. On the UX side, I designed modes such as Birthday Mode, Follow-me mode and Slow Mode, crafted for scenarios with delicate and fragile items. I also worked closely with developers to resolve UX challenges and technical bugs and to keep the interface performing smoothly.

Challenge

Service staff relied on PLATO to handle multiple delivery tasks, but the existing interface made it difficult to configure routes, monitor robot status, and manage tasks efficiently. Unclear workflows and scattered controls created delays and confusion during busy service hours.

Objective

Redesign PLATO's interface to speed up task assignment, improve status visibility and simplify robot configuration. The goal was faster, more intuitive day-to-day operations for restaurant and hotel staff, with consistent workflows across every robot task.

Context

Plato is a serving robot used across restaurants, hotels, healthcare, and events. I worked closely with the product manager and developers to analyze workflows, identify usability issues, and propose scalable UI and interaction improvements aligned with technical constraints.

Meet Plato

A serving robot for people, built by Aldebaran (United Robotics Group)

Plato serving robot: labelled diagram of its screen, sensors, lidar, shelves and controls — Plato at a glance: a 10.1-inch touchscreen face, depth sensors and lidar for navigation, three weight-sensing shelves (up to 30 kg), and simple physical controls.

Two Plato serving robots in a workspace — Plato carries food and items to people across restaurants, hotels, healthcare and events.

Design Process

Building safety and efficiency into every interaction

1

Research & Discovery

Gathered user needs and business goals with the Product Manager, then mapped workflows, technical constraints, and ergonomics to understand operational pain points.

2

Information Architecture

Defined core tasks, restructured navigation and hierarchy, and mapped robot configuration and delivery flows.

3

UI Design

Designed main screens, robot status views and configuration interfaces on a scalable design system and Material Design 3, aligned with development constraints.

4

Testing & Iteration

Conducted usability tests with internal users and iterated on hierarchy, task clarity, and interaction patterns to reduce friction.

5

Handoff & Documentation

Delivered user flows, detailed specifications, a component library and a global design system for both the design and development teams.

UX modes I designed

Interaction modes for real-world, delicate service

Birthday Mode

Turns a simple drop-off into a small celebration, so staff can make a guest’s moment feel special.

Follow-me mode

Plato follows a staff member through the space for guided, hands-free transport between points.

Slow Mode

A gentler pace for delicate and fragile items, reducing the risk of spills or damage in transit.

User Personas

Who the PLATO redesign was designed for

M

Maya, Service Staff (Waiter)

Primary User

Uses PLATO during busy service to run food and drinks to tables while juggling many other tasks.

Goals

Get dishes to the right table quickly
Assign a delivery task to the robot in seconds
Keep working without stopping to troubleshoot

Pain Points

Configuring routes is slow and confusing
Hard to tell a robot's current status at a glance
Controls are scattered so simple tasks take too many steps

Needs from PLATO

A fast simple way to assign and send a delivery
Clear at-a-glance robot status
Predictable controls that are easy to learn during a shift

T

Thomas, Floor Manager (Restaurant/Hotel)

Oversight

Sets up PLATO for the venue and oversees smooth service across the floor during peak hours.

Goals

Reduce staff friction and delays during service
Keep robot workflows consistent for the whole team
Onboard new staff to PLATO quickly

Pain Points

Unclear workflows cause confusion during rushes
Deployment errors when states are miscommunicated
Time lost coordinating setup and routes

Needs from PLATO

Guided setup with sensible defaults
Consistent scalable workflows across tasks
Clear state communication to prevent errors

User Flow

Assigning and sending a delivery task to PLATO

Select mode

Select destination

Load plates (delivery mode)

Start

Delivered successfully?

Yes

Return to base

No

Flag the issue (e.g. blocked path)

Staff step in to clear it

Interface Design

The Plato mission interface, setting up and running a delivery

The Plato mission builder: Deliver and Collect actions, a grid of points of interest, and the mission sequence with a Start button

Results & Impact

Faster task setup through guided flows and sensible defaults

Fewer deployment errors through clearer state communication

Smoother service through clearer animations and more intuitive robot interactions

Key Learnings

Service-robot interfaces must reduce cognitive load for restaurant and hotel staff. Controls need to be simple, predictable, and easy to learn so teams can act quickly during busy hours.

Clear task visibility and real-time robot status help staff make faster decisions, coordinate service flow, and avoid interruptions during customer service.

Robotics UXInteraction designHCI designUI design

Interested in collaborating?

Email me and tell me what you're working on.

← All ProjectsLet's Work Together

Designing clarity into functional products

7 projects, from robotics floors to finance teams

CobiotX SaaS

Enterprise Design System

LedgerPilot: AI Finance Agent

Accessibility Mediation Platform

Plato Serving Robot

Koto Tea Space

LedgerPilot Design System

Design expertise for complex products

Human-centered design

Business mindset

AI-augmented design

Tools & technologies

Design

Data & Viz

Automation & AI

Methodologies

About Sutthikarn

Let's work together.

CobiotX SaaS Web App

My contribution

Challenge

Objective

Context

Design Process

Requirements & Discovery

User Stories & Specifications

Information Architecture

UI Design

Testing & Feedback

Handoff & Documentation

Key decisions & trade-offs

User Personas

Goals

Pain Points

Needs from CobiotX

Goals

Pain Points

Needs from CobiotX

User Flow

Dashboard Interface

Results & Impact

Key Learnings

Interested in collaborating?

Enterprise Design System

My contribution

Challenge

Objective

Context

Design Process

Audit & Research

Token Architecture

Component Library

Testing & Validation

Documentation

Key decisions & trade-offs

Who It Serves

UI Designers

UX Designers

Developers

QA Teams

How a Component Gets Used

System Components

Design Tokens & Color System

Results & Impact

Key Learnings

Interested in collaborating?

Koto Tea Space

My contribution

Challenge

Objective

Context

Design Process Roadmap

User Journey Mapping

Automation Architecture

Visual Design

Integration Testing

Launch & Analytics

Key decisions & trade-offs