Case study · Workflow platform · B2B SaaS · 2025

XertiFlow — complex workflows, simple to send.

A B2B platform that helps organizations — from universities to banks — run document processes with many participants and approvals. I redesigned its structure so it could scale across industries without getting harder to use.

Role
UX/UI Designer
Duration
2 months
Scope
Information architecture, UX flows, role system
Clients
Universities, banks and more
XertiFlow on a laptop: the list of workflows with their blocks and dates

2 months

from discovery to final interface

Task-based

navigation, grouped by what users need to do

3 participant types

with clear roles behind each one

3 steps

to send a workflow once it's set up

01 · The problem

One product, many industries, and processes that kept getting more complex.

XertiFlow is organized around two key processes: creating a workflow and sending it. It had to work for very different organizations and support complex flows with approvals and blockers — but as it grew, the structure stopped making sense to the people using it.

  • Users struggled to understand how workflows were created
  • Roles and responsibilities were unclear
  • Naming across the system caused confusion
  • Workflow configuration was fragmented
  • The system was difficult to scale to new industries

02 · Key insight

The core issue wasn't just UI complexity — it was unclear role definitions and system terminology that didn't match how organizations think about their processes.

03 · Strategy

Fix the structure, not just the surface.

Instead of focusing only on visual improvements, the goal was to simplify the structure of the system.

To keep the interface consistent and speed up development, we built it with a component-based approach on top of a UI library (shadcn/ui).

That kept the visual system consistent while the platform kept evolving.

From a system-based menu to a task-based one.

The old navigation listed everything the system had. The new one is organized around what users actually need to do: create workflows, send them, manage participants and set up their company.

Navigation before and after: a long fragmented menu becomes four grouped sections

04 · Key decision

Add complexity where it happens once — remove it where it happens every day.

Creating a workflow happens once; sending it happens over and over. So we moved the hard part to setup: admins define participant types and roles when they build the workflow. Sending it then becomes as simple as choosing the people for each role.

Role system: participants split into external recipients, internal recipients and reviewers, each with roles and people
The new role system: participants → roles → people.
Workflow creation in eight steps compared with sending a workflow in three steps
Creating a workflow takes eight steps. Sending one takes three.
Participant system as nested circles: participants contain recipients and reviewers, which contain roles, which contain people
How participants are built: recipients and reviewers hold roles, and roles hold people.

05 · Final design

A builder for complex processes, made easy to read.

Process builder with document, form and attachment blocks and a panel of available elements
Process builderWorkflows are built from configurable blocks — documents, forms, attachments — so complex processes stay easy to follow.
Two screens configuring a workflow step and its document content
Step configurationEach block is configured on its own: content, settings and notifications for that stage.
Side panel to create the workflow's participants: external recipients, internal recipients and reviewer
Role assignmentParticipants and roles are assigned during setup, so responsibilities are explicit before anything is sent.

06 · Outcome

A structure that can grow with every new industry.

The redesign introduced a clearer and more scalable workflow structure, improving how administrators create and manage processes — and making it possible to support new kinds of organizations without redesigning the product each time.

What I learned

  • Naming is designMuch of the confusion came from words, not screens. Aligning terminology with how organizations talk did as much as any layout change.
  • Put complexity where it's paid onceMoving roles to setup made the everyday task — sending — almost effortless.
Next project This portfolio — from Figma to production →

Got a tangled problem? Let's untangle it together.

floren.garcia1216@gmail.com

Designed in Figma · Built with Claude Code · © 2026 Florencia García

Caso de estudio · Plataforma de workflows · B2B SaaS · 2025

XertiFlow — workflows complejos, simples de enviar.

Una plataforma B2B que ayuda a organizaciones, desde universidades hasta bancos, a gestionar procesos de documentos con muchos participantes y aprobaciones. Rediseñé su estructura para que pudiera escalar a distintos rubros sin volverse más difícil de usar.

Rol
UX/UI Designer
Duración
2 meses
Alcance
Arquitectura de información, flujos UX, sistema de roles
Clientes
Universidades, bancos y más
XertiFlow on a laptop: the list of workflows with their blocks and dates

2 meses

del discovery a la interfaz final

Por tareas

navegación agrupada según lo que el usuario necesita hacer

3 tipos de participantes

con roles claros detrás de cada uno

3 pasos

para enviar un workflow una vez configurado

01 · El problema

Un producto, muchos rubros y procesos cada vez más complejos.

XertiFlow se organiza en dos procesos clave: crear un workflow y enviarlo. Tenía que servir para organizaciones muy distintas y soportar flujos complejos con aprobaciones y bloqueos, pero a medida que creció, la estructura dejó de tener sentido para quienes la usaban.

  • A los usuarios les costaba entender cómo se creaban los workflows
  • Los roles y responsabilidades no eran claros
  • Los nombres dentro del sistema generaban confusión
  • La configuración de los workflows estaba fragmentada
  • El sistema era difícil de escalar a nuevos rubros

02 · Insight clave

El problema de fondo no era solo la complejidad de la interfaz: eran roles mal definidos y una terminología que no coincidía con cómo las organizaciones piensan sus procesos.

03 · Estrategia

Arreglar la estructura, no solo la superficie.

En lugar de enfocarnos solo en mejoras visuales, el objetivo fue simplificar la estructura del sistema.

Para mantener la interfaz consistente y acelerar el desarrollo, la construimos con un enfoque basado en componentes sobre una librería de UI (shadcn/ui).

Eso mantuvo el sistema visual consistente mientras la plataforma seguía evolucionando.

De un menú pensado desde el sistema a uno pensado desde las tareas.

La navegación anterior listaba todo lo que tenía el sistema. La nueva se organiza según lo que el usuario realmente necesita hacer: crear workflows, enviarlos, gestionar participantes y configurar su empresa.

Navigation before and after: a long fragmented menu becomes four grouped sections

04 · Decisión clave

Sumar complejidad donde pasa una vez, sacarla donde pasa todos los días.

Crear un workflow pasa una vez; enviarlo pasa una y otra vez. Por eso llevamos la parte difícil a la configuración: los administradores definen tipos de participantes y roles al armar el workflow. Así, enviarlo se vuelve tan simple como elegir a las personas para cada rol.

Role system: participants split into external recipients, internal recipients and reviewers, each with roles and people
El nuevo sistema de roles: participantes → roles → personas.
Workflow creation in eight steps compared with sending a workflow in three steps
Crear un workflow lleva ocho pasos. Enviarlo, tres.
Participant system as nested circles: participants contain recipients and reviewers, which contain roles, which contain people
Cómo se conforman los participantes: destinatarios y revisores tienen roles, y los roles tienen personas.

05 · Diseño final

Un constructor de procesos complejos, fácil de leer.

Constructor de procesos con bloques de documento, formulario y adjuntos y un panel de elementos
Constructor de procesosLos workflows se arman con bloques configurables, como documentos, formularios y adjuntos, para que los procesos complejos sigan siendo fáciles de seguir.
Dos pantallas configurando un paso del workflow y su documento
Configuración de pasosCada bloque se configura por separado: contenido, ajustes y notificaciones de esa etapa.
Panel lateral para crear los participantes del flujo: destinatarios externos, internos y revisor
Asignación de rolesLos participantes y roles se asignan en la configuración, así las responsabilidades quedan claras antes de enviar nada.

06 · Resultado

Una estructura que puede crecer con cada rubro nuevo.

El rediseño introdujo una estructura de workflows más clara y escalable, mejorando cómo los administradores crean y gestionan procesos, y permitiendo sumar nuevos tipos de organizaciones sin rediseñar el producto cada vez.

Lo que aprendí

  • Nombrar también es diseñarGran parte de la confusión venía de las palabras, no de las pantallas. Alinear la terminología con cómo hablan las organizaciones sumó tanto como cualquier cambio de layout.
  • Poner la complejidad donde se paga una vezLlevar los roles a la configuración hizo que la tarea de todos los días, enviar, fuera casi automática.
Siguiente proyecto Este portfolio — de Figma a producción →