Skip to main content

01

Critical screen redesign

Fewer screens, fewer steps, same goal — redesigned from the ground up.

  • UX Research
  • UI Design
  • Mobile
  • Tablet

El problema

A module that had grown with its own logic on every screen.

The order module had grown organically, accumulating multiple screens — each with its own representation of the product and its own navigation rules. The same object could be viewed and edited in different ways depending on where you came from: the information available and the actions possible varied based on the path taken.

The result was a network of destinations where the agent had to know by memory what each screen showed, which actions were available from each point, and how to get back to the right place. The experience relied on accumulated knowledge of the system more than on the logic of the task itself.

6/3
distinct destinations in the module
11%46%
click improvement per action

El proceso

  1. 01DiagnosisThe combination of heuristic analysis and direct user feedback revealed that the problem wasn't visual: the information architecture didn't reflect how sales agents actually think when they work
  2. 02Flow mappingDocumenting the existing flow screen by screen exposed the real fragmentation: 6 screens for a basic task, duplicated actions, information repeated in different formats
  3. 03The central decisionBefore designing anything new, there was an architecture question to answer: what is a product in this system? The answer — a single entity with different views — unlocked everything else
  4. 04Unified product sheetOne product sheet, accessible from both catalogue and order. Same structure, same actions, quantities and discounts built in. No nested dialogs, no interruptions to the main flow.
  5. 05Validation & productionPrototype validated with real users before launch. In production, every critical action improved: a minimum 11% and maximum 46% reduction in clicks

La solución

Unified product sheet

A single product representation, shared between catalogue and order. Same structure, same actions, no context switching.

Integrated discount calculation

Quantities and discounts are managed directly on the sheet, at the moment and place where they're relevant.

Coherent navigation

Catalogue and order are views of the same flow, not separate destinations. The user can move between them without breaking context.

Contextual history

The client's purchase history is accessible from the active order without leaving the context.

Tecnología

  • FigmaInterface design and interactive prototyping
  • FigJamFlow mapping, information architecture and team workshops

Reflexión

The interface was a mirror of the data model

The excess of steps wasn't a design failure — it was the result of surfacing a model inconsistency in the interface: catalogue and order operated on different representations of the same product, and the user had to compensate for that inconsistency every time they navigated between them.

Resolving the information architecture before touching the visual design was what made it possible to simplify the flow. Once catalogue and order shared the same product model, reducing screens, eliminating redundant steps and measuring the improvement were direct consequences of that decision.