B2B SaaS AI-Augmented Product Design 2024

ESL — AI-Powered
Task Management

A B2B platform redesigned around intelligence. How we built a task management system that thinks alongside teams — reducing cognitive load, surfacing priorities, and giving operations teams back the hours they were losing to process.

Role Lead UX/UI Designer
Scope End-to-end Product
Type B2B SaaS
Deliverable Design System + Hi-fi
Year 2024
Process AI-Augmented
🔒

All sensitive data related to this project is handled under NDA. Visuals shown are reconstructed versions based on the original work. Client name has been changed.

TL;DR

Goal

Redesign a B2B task management platform with AI as a first-class feature — cutting decision fatigue for operations teams drowning in process.

Process

Discovery interviews → AI-assisted journey mapping → IA restructure → rapid wireframing → 3-round usability testing → hi-fi + design system build.

My Role

Lead UX/UI Designer — end-to-end ownership from research brief through stakeholder alignment, UX strategy, UI design, motion specs & developer handoff.

Outcome

Full design system + production-ready prototype. AI features reduced team lead daily overhead by 40 minutes — recovered from manual status chasing.

Act 01

The Brief

Operations were
drowning in process.

ESL's operations team managed hundreds of concurrent tasks across departments. The existing tooling was generic — built for individuals, not teams running at scale. Tasks fell through the gaps. Priorities shifted without notice. Nobody had a clear view of what was on fire.

The ask was ambitious: redesign the task management experience from scratch, with AI embedded as a first-class feature — not a bolt-on. The platform needed to surface what mattered, predict bottlenecks, and reduce the daily decision fatigue of team leads.

Lead Designer UX Strategy UI Design Design System Motion Handoff

The Real Problem

"The team wasn't missing information — they were drowning in it. The job was triage, not creation."

Act 02

The Discovery

Listening before
designing.

The discovery phase combined stakeholder interviews with contextual inquiry — watching team leads actually use the existing system in real operational conditions. This wasn't a lab study. It was Tuesday morning, three things were overdue, and Slack was on fire.

Key patterns emerged fast. Task ownership was ambiguous — items were assigned but nobody felt accountable. Priority was invisible — everything looked equally urgent on a flat list. And status updates were manual — team leads were spending 40 minutes a day just chasing progress.

01 — Research

Stakeholder Interviews

5 team leads · 3 departments

02 — Analysis

Journey Mapping

NotebookLM synthesis

03 — Define

JTBD + Pain Points

AI-assisted clustering

04 — Frame

How Might We

Workshop facilitation

Research Insight

"People don't want more features. They want the right thing to appear at the right moment."

Act 03

The Approach

AI as a
thinking partner.

The design principle was simple: the system should reduce decisions, not multiply them. Every AI feature was designed around removing friction — auto-prioritisation based on deadline proximity and team load, intelligent status suggestions, and smart grouping that evolves with usage patterns.

Wireframing happened fast and dirty — low-fidelity flows in Figma, tested against real task data. The IA went through three major restructures before it felt right. The breakthrough was separating "what's mine" from "what's the team's" — two distinct mental models that the original system forced into one view.

Design Decision

"One dashboard doesn't fit all contexts. We gave people a personal view and a team view — and let the AI bridge them."

Motion design played a key role in communicating AI actions. When the system reprioritised tasks, it needed to feel considered — not chaotic. Subtle transitions and a clear visual grammar for AI-suggested changes (vs human-made changes) built trust over time.

Act 04

The System

Built to scale.
Built to hand off.

The design system was built in Figma with a dark-first, purple-accented visual language that felt modern but professional. Token-based — every colour, spacing, and type decision was abstracted so the engineering team could implement without constant designer involvement.

Component architecture followed atomic design principles. Every interactive state, every edge case, every empty state was designed. The handoff documentation included animation specs, interaction logic notes, and AI behaviour guidelines — what the system should do when confidence is low, when data is missing, when a user overrides a suggestion.

Design Tokens Component Library Dark UI System Motion Specs AI Interaction Guidelines Hi-fi Prototype Dev Handoff Docs IA Map User Flows

Outcome

"A system the development team could build from independently — and a product team leads actually wanted to use."

Portfolio

Back to all work

← View all case studies