Redesigning Zesty: From friction to trust Rediseñando Zesty: De fricciones a confianza

Product Designer: Javier Esquivel · 14 min read Product Designer: Javier Esquivel · 17 min de lectura

What happens when an investment app works technically but its users don't understand what they're doing?
That was Zesty: a Chilean fintech where concepts like "Dollar Wallet" or "Buying Power" went unexplained, registration dragged, and small inconsistencies quietly eroded trust. Everything worked, but nothing felt clear. This is the fintech UX case study of how that changed. I've been redesigning Zesty, a Chilean mobile-first investment app, since 2023, with a focus on trust, visual hierarchy, and a design system that scales as the product evolves. ¿Qué pasa cuando una app de inversiones funciona técnicamente pero sus usuarios no entienden lo que están haciendo?
Eso era Zesty: una fintech chilena donde conceptos como "Billetera dólares" o "Poder de compra" no se explicaban en ninguna parte, el registro se hacía largo, y pequeñas inconsistencias erosionaban la confianza en silencio. Todo funcionaba, pero nada se sentía claro. Este es el caso de estudio UX de cómo eso cambió. Vengo rediseñando Zesty, una app fintech chilena de inversiones móviles, desde 2023, con foco en confianza, jerarquía visual y un sistema de diseño que escala mientras el producto evoluciona.

ContextContexto

What is Zesty?¿Qué es Zesty?

Zesty is a Chilean fintech and mobile-first trading app that lets users buy and sell stocks in U.S. and Chilean markets, operate ETFs, and manage a full portfolio from their phone. It handles wallets in Chilean pesos (CLP) and U.S. dollars (USD) with automatic FX, aiming to democratize access to investing for first-time investors who, in many cases, had never invested before. Zesty es una fintech chilena de inversiones móviles que permite comprar y vender acciones en los mercados de Estados Unidos y Chile, operar con ETFs, y gestionar un portafolio completo desde el celular. La plataforma maneja billeteras en pesos chilenos (CLP) y dólares (USD) con conversión automática entre monedas, y busca democratizar el acceso a la inversión para personas que, en muchos casos, nunca antes habían invertido.

I joined as an external Product Designer, trusted by the founding team to lead the evolution of the user experience. Not a "make it pretty" engagement. A rethink of how the app communicated, guided, and accompanied its users. Me sumé como Product Designer externo con la confianza del equipo fundador para liderar la evolución de la experiencia de usuario. No era un encargo de "hacer pantallas bonitas". Era repensar cómo la app comunicaba, guiaba y acompañaba a sus usuarios.

The problemEl problema

The app had grown prioritizing technical functionality without an integrated design pass. The friction surfaced at both ends of the user spectrum: La app había crecido priorizando funcionalidad técnica, sin una revisión integral de diseño. Esto generaba fricciones que afectaban tanto la retención de usuarios nuevos como la eficiencia de traders activos:

• New users dropped off post-registration because they didn't understand key concepts or know where to start. Usuarios nuevos abandonaban después del registro porque no entendían conceptos clave ni sabían por dónde empezar.
• Active traders wasted time with inconsistencies (like canceling an order from the list but not from its detail) and flows requiring too many clicks. Traders activos perdían tiempo con inconsistencias (como poder cancelar una orden desde el listado pero no desde el detalle) y flujos que requerían demasiados clics.
• Wallet defaults confused new depositors. Users couldn't tell where their money landed by default; the in-app instructions either weren't read or felt too complex. Confusión con la billetera por defecto. Los usuarios no tenían claro dónde quedaba su plata al depositar; las instrucciones de la app no se leían o se sentían demasiado complejas.
• The support team fielded recurring questions the app should have answered itself: wallets, FX, pending orders. El equipo de soporte recibía consultas recurrentes sobre temas que la app debería haber explicado por sí misma: billeteras, conversión de moneda, órdenes pendientes.

How do you design for someone who's never invested without slowing down someone trading 30 times a day? ¿Cómo diseñar para alguien que nunca invirtió sin ralentizar a quien opera 30 veces al día?

ProcessProceso

My first move: investing in research Mi primer movimiento: invertir en research

The team expected a redesign sprint. I proposed something different: before designing a single screen, use the app like a real user and document everything. That exercise became the roadmap for everything that followed. El equipo esperaba un sprint de rediseño. Propuse algo distinto: antes de diseñar una sola pantalla, usar la app como un usuario real y documentar todo. Ese ejercicio se convirtió en la hoja de ruta de todo lo que vino después.

The work was structured as incremental projects, each building on the previous. Classic Design Thinking: Discovery → Define → Prototype → Follow Up. From 2025 onward, as AI tooling matured, the loop got accelerated with Claude, Notion AI, and NotebookLM for research, systems mapping, and living documentation. The foundation, especially in 2023, was old-fashioned heuristic work. El trabajo se estructuró en proyectos incrementales, cada uno construyendo sobre el anterior. Design Thinking clásico: Discovery → Define → Prototype → Follow Up. Desde 2025, con las herramientas de AI maduras, el loop se aceleró con Claude, Notion AI y NotebookLM para research, mapeo de sistemas y documentación viva. La base, sobre todo en 2023, fue puro trabajo heurístico.

When the project warranted it: heuristic evaluation, documented findings, low- and high-fidelity proposals, and iteration on real feedback. Other times the cycle was much faster. Direct conversations with the team and live Figma jams. Cuando el proyecto lo ameritaba: evaluación heurística, documentación de hallazgos, propuestas en baja y alta fidelidad, e iteración basada en feedback real. Otras veces el ciclo era mucho más rápido. Conversación directa con el equipo y Figma en vivo.

Collaboration as a lever Colaboración como palanca

Every design review was a collaborative work session, not a presentation. In Figma, live, with product and engineering challenging decisions and surfacing technical edge cases in real time. That avoided weeks of async back-and-forth. Cada revisión de diseño fue una sesión de trabajo colaborativo, no una presentación. En Figma, en vivo, con producto e ingeniería desafiando decisiones y descubriendo edge cases técnicos en tiempo real. Eso evitó semanas de ida y vuelta asíncrono.

• Living documentation with Notion AI. Meeting notes and transcripts kept follow-ups visible between meetings; nothing got lost between conversations. Documentación viva con Notion AI. Meeting notes y transcripts mantuvieron el seguimiento entre reuniones; nada se perdió entre conversaciones.
• Support feedback as direct input. The most frequent user inquiries set redesign priorities. Feedback del soporte como input directo. Las consultas más frecuentes de los usuarios marcaron prioridades del rediseño.

Discovery & ResearchDiscovery & Research

Complete heuristic evaluation Evaluación heurística completa

I signed up, deposited money, bought stocks, switched currencies, explored instruments. I followed the full first-time-user path and documented 40+ findings across 16 categories, from onboarding to visual design. Me registré, deposité plata, compré acciones, cambié moneda, exploré instrumentos. Seguí el camino que seguiría alguien que descarga la app por primera vez y no sabe nada de inversiones. Documenté más de 40 hallazgos organizados en 16 categorías, desde onboarding hasta diseño visual.

Key findingsHallazgos clave

From findings to strategy De hallazgos a estrategia

Presenting the full audit could have paralyzed the team. I translated it into three workstreams that anchored every subsequent decision: Presenté el análisis completo al equipo. El volumen de hallazgos podría haberlos paralizado, pero lo traduje en tres ejes de trabajo claros que guiaron todas las decisiones posteriores:

• Narrative. Better product storytelling to reduce uncertainty. Users who understand what and why trust more. Narrative. Mejorar el storytelling del producto para reducir incertidumbre. Si el usuario entiende qué está pasando y por qué, confía más.
• Step-by-Step. Clear sequential processes. One task per screen, one obvious next step. Step-by-Step. Crear procesos claros y secuenciales. Una tarea por pantalla, un siguiente paso obvio.
• One task. Concise information and clear actions. Each screen solves one thing well. One task. Información concisa y acciones claras. Cada pantalla resuelve una cosa bien.

Iterations, iterations, iterationsIterations, iterations, iterations

Stage 1: Registration flow Etapa 1: Flujo de Registro

The first project, shipped in 2023. The one that built trust for everything after. El primer proyecto, lanzado en 2023. El que generó la confianza para todo lo demás.

The original registration asked for too much upfront, blocking discovery. A user who just wanted to see what Zesty offered had to fill a long form before exploring anything. El registro original pedía demasiada información por adelantado, interrumpiendo el descubrimiento de la app. Un usuario que solo quería ver qué ofrecía Zesty debía completar un formulario extenso antes de poder explorar.

The deeper proposal: turn onboarding into part of the app, not a barrier in front of it. Instead of asking for everything at sign-up, we let users explore the app first. Instruments, market, value prop. And complete onboarding at their own pace, with progress saved. Only the essentials at start (name, email, phone) via Auth0; the rest comes when the user is ready to trade. Full flowchart, redesigned screens, coherent storytelling. La propuesta más profunda: convertir el onboarding en parte de la app, no en una barrera previa. En lugar de pedir todos los datos al inicio, dejamos que el usuario descubra la app primero. Explorando instrumentos, viendo el mercado, entendiendo qué ofrecía Zesty. Y continúe el onboarding a su tiempo, con progreso guardado. Solo lo esencial al inicio (nombre, correo, teléfono) mediante Auth0; el resto se completa cuando el usuario está listo para operar. Se trabajó un flowchart completo y se rediseñaron las pantallas asegurando coherencia en el storytelling.

The trade-off: less data upfront meant the commercial team would have incomplete profiles longer. But a user who abandons at step 2 yields no useful data either. Better a user inside the app, exploring, than an abandoned form. El trade-off: menos datos al inicio significaba que el equipo comercial tendría perfiles incompletos por más tiempo. Pero al discutirlo, concluimos que un usuario que abandona en el paso 2 no genera ningún dato útil. Mejor tener un usuario dentro de la app, explorando, que un formulario abandonado.

OriginalOriginal TransitionTransición LatestÚltimo

It shipped in 2023 and conversion improved noticeably. The app kept growing on those guidelines until 2025, when they reached out again: the features they'd shipped on their own weren't landing clearly and post-onboarding had become a thicket of doubts again. Se lanzó el 2023 y la conversión mejoró notoriamente. La app siguió creciendo sobre esos lineamientos hasta que el 2025 me volvieron a contactar: las funcionalidades que habían lanzado no se entendían bien y el post-onboarding se había llenado de dudas otra vez.

Stage 2: Post-onboarding experience and CLP vs USD Etapa 2: Experiencia Post-Onboarding y CLP vs USD

From 2025 onward, the redesign cycle that drives everything that follows. The project that changed the app's tone. Desde 2025 en adelante, el ciclo de rediseño que empuja todo lo que viene. El proyecto que cambió el tono de la app.

The most ambitious of the early phase. It started with the heuristic audit and focused on the most critical moment: what happens after sign-up when you don't know where to start? El más ambicioso de la primera fase. Partió con la auditoría heurística y se enfocó en el momento más crítico: ¿qué pasa después de registrarte cuando no sabes por dónde empezar?

Until then, nothing. A dashboard at $0, an empty state with a truck illustration loosely inviting you to invest, and a "Deposit now" button with zero context for what would happen next. Hasta ese momento, nada. Un dashboard en $0, un empty state con un camión que vagamente invitaba a invertir, y un botón "Depositar ahora" sin contexto de qué pasaría después.

The main tension: the team pushed for fast paths and quick alerts. I argued the opposite. These were exactly the kinds of decisions that needed more context, not less. A new user seeing "Dollar Wallet" vs "Peso Wallet" without explanation doesn't decide: they pick at random and later wonder why their deposit landed in USD. La tensión principal: el equipo apostaba por caminos rápidos y alerts breves. Argumenté lo opuesto. Esas eran exactamente las decisiones que necesitaban más contexto, no menos. Un usuario nuevo viendo "Billetera dólares" vs "Billetera pesos" sin explicación no decide: elige al azar y después no entiende por qué su depósito quedó en USD.

Key design decisions: Decisiones de diseño clave:

• Bottom sheet instead of alert for currency selection. Real context, no alarm, clear implications. The most debated decision of the project. Modal view en lugar de alert para selección de moneda. Con contexto real, sin alertar o preocupar al usuario, y explicación de las implicaciones de cada opción. Esta fue probablemente la decisión más debatida del proyecto.
• Contextual tutorials explaining deposits and withdrawals at the right moment, reinforcing that transfers must come from personal accounts per regulation. Tutoriales contextuales que explican depósitos y retiros en el momento justo, reforzando que las transferencias deben ser desde cuentas personales por normativa.
• Home redesign. Visual separation of "Buying Power" and investments. Help icons (?) deploying clear explanations. Support had identified "buying power" as one of the most frequent questions. Rediseño del Home. Separación visual de "Poder de compra" e inversiones. Íconos de ayuda (?) que despliegan explicaciones claras. El equipo de soporte había identificado que "poder de compra" era una de las consultas más frecuentes.
• Educational empty states. Every content-less screen turned from dead space into invitation to act. Empty states educativos. Cada pantalla sin contenido pasó de espacio muerto a invitación a actuar.
• Visual modernization. Typography, illustrations, tabs, and visual weights updated. Modernización visual. Tipografía, ilustraciones, tabs y pesos visuales actualizados.

Stage 3: Orders, dividends, and movements Etapa 3: Órdenes, Dividendos y Movimientos

The stage that gave depth to the experience. La etapa que le dio profundidad a la experiencia.

With the post-onboarding base solid, next came the screens active users hit hardest. This is where the audience tension peaked. Con la base sólida del post-onboarding, el siguiente paso fue atacar las pantallas que los usuarios activos más utilizan. Y fue aquí donde la tensión entre audiencias se hizo más evidente.

The moment that redefined the approach: we entered the review thinking the movements screen needed a visual refresh. But once we mapped how an active trader running 20–30 daily orders used it, we saw the real problem was information architecture. Orders, dividends, transfers, and FX all mixed without hierarchy. El momento que redefinió el approach: entramos a la revisión pensando que la pantalla de movimientos necesitaba un refresh visual. Pero al mapear cómo un trader activo con 20–30 órdenes al día la usaba, vimos que el problema real era arquitectura de información. Órdenes, dividendos, transferencias y cambios mezclados sin jerarquía.

The hardest trade-off: I proposed a Notion-style customizable filter system. The team loved it; we parked it. Too ambitious for the stage, backlog already huge. Knowing what not to build mattered as much as knowing what to build. El trade-off más difícil: propuse un sistema de filtros personalizables tipo Notion. El equipo lo encontró excelente pero lo descartamos para esta etapa. Era demasiado ambicioso y el backlog era enorme. Saber qué no hacer fue tan importante como saber qué hacer.

Pending orders. The most reported pain: Órdenes pendientes. El dolor más reportado:

• Direct cancellation from the order detail and the movements list. Implementamos cancelación directa desde el detalle de la orden y del listado de movimientos.
• Contextual explanation of why an order is pending. Incluimos una explicación contextual de por qué una orden está pendiente.

Dividends. The invisible feature: Dividendos. La funcionalidad invisible:

• Chilean dividends weren't surfaced anywhere. We added complete history per stock and total received. Los dividendos de Chile no aparecían en ninguna vista clave. Agregamos historial completo por acción y suma total de dividendos recibidos.

Movements. The full redesign: Movimientos. El rediseño completo:

• Reorganized with clear hierarchy: Orders first, then Dividends, then Transfers and FX. Reorganizamos con jerarquía clara: Órdenes primero, luego Dividendos, después Transferencias y Cambios.
• Designed a date filter inspired by Spotify's concert navigation. Diseñamos un filtro de fecha inspirado en la navegación de conciertos de Spotify.
• New default filters, with the option to layer in custom ones, so the screen surfaces what the user actually needs. Filtros nuevos por defecto, con la opción de sumar otros, para que la pantalla muestre la información que el usuario realmente necesita.
• Standardized the detail screen for every movement type, and built a matrix to ensure scalability. Estandarizamos la pantalla de detalle para todos los tipos de movimiento y creé una matriz para asegurar escalabilidad.

Portfolio Summary view: Vista Resumen de Portafolio:

• New view with key metrics: total deposited, withdrawn, returns in USD and CLP, variation, and total dividends. Each metric is interactive. Tap to see how it was calculated. Diseñamos una nueva vista con métricas clave: total depositado, retirado, rentabilidad en USD y CLP, variación, y total de dividendos. Cada métrica es interactiva. Al tocarla, se despliega cómo se calculó.

Stage 3.5: Explore and asset discovery Etapa 3.5: Explorar y descubrimiento de activos

The redesign that opened the instrument universe. El rediseño que abrió el universo de instrumentos.

Before jumping into advanced trading, we tackled a discovery problem: the Explore page showed stocks without clear hierarchy or hints on how to navigate the available universe. Not a redesign from scratch. Just a hardening of an existing experience, with discovery as the focus. Antes de saltar al rediseño de trading avanzado, atacamos un problema de descubrimiento: la página Explorar mostraba acciones sin jerarquía clara y no daba pistas sobre cómo navegar el universo de instrumentos disponibles. No fue un rediseño desde cero. Fue volver más robusta una experiencia que ya existía, con foco en descubrimiento.

Key decisions: Decisiones clave:

• More visibility for stock collections. Categories, curated lists, and groupings to help users discover beyond what they already knew. Más visibilidad de conjuntos de acciones. Categorías, listas curadas y agrupaciones que ayudaban al usuario a descubrir más allá de lo que ya conocía.
• Filter by asset type. Stocks, ETFs, and the new addition: crypto. Filtro por tipo de activo. Acciones, ETFs y la nueva incorporación: criptomonedas.
• Educational bottom sheet on the color system. Each asset type carries a distinctive color across the app. We designed a bottom sheet that invited exploration and explained why each asset has a different color. A detail repeated throughout the product that reinforces the user's mental model. Bottom sheet educativo sobre el sistema de colores. Cada tipo de activo tiene un color distintivo en toda la app. Diseñamos un bottom sheet que invitaba a explorar y explicaba por qué cada asset tiene un color diferente. Un detalle clave que se repite a lo largo de todo el producto y refuerza el modelo mental del usuario.

Stage 4: Advanced trading, brackets, and real-time Etapa 4: Trading avanzado, Brackets y tiempo real

The most ambitious redesign. The one that took the app from "functional" to "trading-grade." El rediseño más ambicioso. El que llevó la app de "funcional" a "trading-grade".

Scope grew: not adjusting screens, but rebuilding how Zesty represents the market, executes orders, and protects users. Three parallel fronts, one shipped delivery. El alcance creció: no era ajustar pantallas, era reconstruir cómo Zesty representa el mercado, ejecuta órdenes y protege a sus usuarios. Tres frentes en paralelo, una sola entrega.

1. Charts and real-time data 1. Charts y datos en tiempo real

• Migration from polling to websockets for prices and portfolio. Migración de polling a websockets para precios y portafolio.
• Ticker animation with digits rotating up or down, animating only the last two decimals. Enough to convey movement without visual overload. Animación de ticker con dígitos que rotan hacia arriba o abajo, animando solo los últimos dos decimales. Suficiente para transmitir movimiento sin sobrecargar visualmente.
• Complete redesign of the instrument chart, with session-differentiated colors: pre-market, regular, after-market, and overnight. Rediseño completo del gráfico del instrumento, con colores diferenciados por sesión: pre-market, regular, after-market y overnight.
• Events calendar (dividends and earnings) per stock, with 5-quarter history and reported vs. Expected EPS. Calendario de eventos (dividendos y earnings) por acción, con histórico de 5 trimestres y EPS reportado vs. esperado.

2. Buy/sell flow and order types redesign 2. Rediseño completo de compra/venta y tipos de Órdenes

Alongside the order-type expansion, we fully redesigned the buy/sell flow. Simplified and standardized so each order type felt familiar. Inspired by Robinhood's clarity, but with Zesty's identity and the depth both new and advanced users need. Without losing flow, without overwhelming. En paralelo a la expansión de tipos de orden, rediseñamos completamente el flujo de compra y venta. Lo simplificamos y estandarizamos para que cada tipo de orden se sintiera familiar. Inspirados en la claridad de Robinhood, pero con la identidad de Zesty y el detalle que necesitan tanto usuarios nuevos como avanzados. Sin perder el flow, sin abrumar.

We also added an option to save the order configuration: if the user wants to repeat the same operation type, next time it's pre-loaded. A seemingly minor decision that opened the conceptual door to Quick Actions later. Sumamos además una opción de guardar la configuración de la orden: si el usuario quiere repetir el mismo tipo de operación, la próxima vez ya está pre-cargada. Esa decisión, aparentemente menor, abrió la puerta conceptual a Quick Actions más adelante.

We went from 2 types (market, limit) to 6: market, limit, stop, stop-limit, trailing-stop, and bracket. Each with a distinctive icon designed so an experienced trader recognizes them without reading the label. Pasamos de 2 tipos (mercado, límite) a 6: mercado, límite, stop, stop-limit, trailing-stop y bracket. Cada uno con un ícono distintivo diseñado para que un trader experimentado los reconozca sin leer la etiqueta.

For the Chilean market the logic is different: limit only, whole shares only. In extended hours (US), only limit orders are allowed, with an automatic 2% margin to protect users from unfavorable executions. I also designed an automatic market → limit conversion when the session is pre/after-market, inspired by Robinhood, but making the applied margin explicit so the user never feels deceived. Para mercado chileno la lógica es distinta: solo límite y solo acciones enteras. En horario extendido (US) solo se permiten limit orders, con margen automático del 2% para proteger al usuario de ejecuciones desfavorables. Diseñé además una conversión automática mercado → límite cuando la sesión está en pre/after-market. Inspirado en Robinhood, pero explicitando el margen aplicado para que el usuario nunca se sienta engañado.

3. Bracket Orders (OTO, OCO, OTOCO) 3. Bracket Orders (OTO, OCO, OTOCO)

The most sophisticated order type of the stage. Brackets allow chained orders: you execute an entry and pre-configure the exits (take-profit and stop-loss). Three types: El tipo de orden más sofisticado de toda la etapa. Brackets permiten encadenar órdenes: ejecutar una entrada y dejar pre-configuradas las salidas (take-profit y stop-loss). Tres tipos:

• OTO (One Triggers Other). One order activates the next. OTO (One Triggers Other). Una orden activa la siguiente.
• OCO (One Cancels Other). Two exits; the one that executes cancels the other. Labeled as "if it goes up" (green) and "if it goes down" (red) instead of financial jargon. OCO (One Cancels Other). Dos salidas; la que se ejecuta cancela a la otra. Etiquetadas como "si sube" (verde) y "si baja" (rojo) en lugar de jerga financiera.
• OTOCO. An entry that triggers an OCO. The most useful, designed as the featured case, with a commission discount proposal to drive adoption. OTOCO. Una entrada que dispara un OCO. La más útil, y la que diseñamos como el caso destacado, con propuesta de descuento de comisión para incentivar adopción.

I designed the flow with confirmation cards that visually map how the orders are linked. A chain icon for chained orders (OTO), a branch icon for alternative orders (OCO), and the combination of both for OTOCO. I also replaced the "buy leg/sell leg" jargon with entry/exit, and the two branches of an OCO with "if it goes up" (green) and "if it goes down" (red) pills. The goal: any user could pick which bracket to start with and configure it without needing to master financial terminology. Validated with non-technical users in internal reviews. Diseñé el flujo con cards de confirmación que muestran visualmente cómo se vinculan las órdenes. Un ícono de eslabón para órdenes encadenadas (OTO), uno de bifurcación para órdenes alternativas (OCO), y la combinación de ambos para OTOCO. Reemplacé además la jerga de "buy leg/sell leg" por entrada/salida, y las dos ramas de un OCO por las pills "si sube" (verde) y "si baja" (rojo). El objetivo: que cualquier usuario pudiera elegir con qué tipo de bracket partir y configurarlo sin necesitar dominar terminología financiera. Probado con usuarios no técnicos en revisiones internas.

Quick Actions: The boldest bet Quick Actions. La apuesta más rupturista

The most novel pattern of the project. As far as we looked, it didn't exist in any other broker. El patrón más novedoso del proyecto. Hasta donde mirábamos, no existía igual en ningún otro broker.

Quick Actions deserves its own section because it wasn't a UX adjustment. It was a bet on how mobile trading should work when you already know the asset. Quick Actions merece su propia sección porque no fue un ajuste de UX: fue una apuesta sobre cómo se debería operar desde el celular cuando ya conoces el activo.

HypothesisHipótesis

Active traders generate the bulk of order volume but are a fraction of total users. Forcing them through 4–5 screens for a $50 trade is unnecessary friction. But a poorly designed shortcut in an investment app is a recipe for costly errors. Los traders activos generan la mayor parte del volumen de órdenes pero son una fracción de los usuarios totales. Forzarlos a navegar 4–5 pantallas para una operación de $50 es fricción innecesaria. Pero un atajo mal diseñado en una app de inversiones es una receta para errores costosos.

The question wasn't "should there be a shortcut?" but "how do you design a shortcut that's faster without being more dangerous?" La pregunta no era "¿debería existir un atajo?" sino "¿cómo diseñar un atajo que sea más rápido sin ser más peligroso?"

DesignDiseño

I designed a slide-to-buy/sell pattern that lives on the home, layered over the user's holdings list, in two steps: Diseñé un patrón de slide-to-buy/sell que vive en el home, sobre el listado de inversiones del usuario, en dos pasos:

1. Intent. A horizontal slide defines amount (in $ or share count), accessible directly from the asset card on home. Intención. Un slide horizontal define la cantidad (en $ o en cantidad de acciones), accesible directamente desde la card del activo en el home.
2. Confirmation. A bottom sheet summarizes the operation before execution. Confirmación. Un bottom sheet resume la operación antes de ejecutar.

Differentiated from the traditional flow by three intentional design decisions: Diferenciando el flujo tradicional por tres decisiones de diseño intencionales:

• Market and limit, simplified with pre-configured pills. Quick Actions covers the two most common types (market and limit). The trick: pills with pre-set prices and configurations make execution take two taps. If you've placed an order before, the saved configuration speeds it up further. For more complex orders (stop, stop-limit, trailing-stop, bracket) or custom configs, the long flow remains the path. Mercado y límite, simplificadas con pills pre-configuradas. Quick Actions cubre los dos tipos más comunes (mercado y límite). La gracia para simplificarlo son las pills con precios y configuraciones pre-hechas que hacen que ejecutar tome dos toques. Si ya hiciste una orden antes, la configuración guardada acelera aún más el proceso. Para órdenes más complejas (stop, stop-limit, trailing-stop, bracket) o configuraciones personalizadas, el flujo largo sigue siendo el camino.
• Accessible from home, over your holdings list. Quick Actions lives where the user already has context: the holdings list on home. It enables fast action on assets you already know, without entering the instrument detail. Accesible desde el home, sobre el listado de tus inversiones. Quick Actions vive donde el usuario ya tiene contexto: el listado de inversiones en el home. Permite tomar una acción rápida sobre activos que ya conoces, sin tener que entrar al detalle del instrumento.
• Physical gesture (slide) instead of tap. Adds intentional friction to prevent accidental executions. A swipe is a committed gesture; a tap, less so. Gesto físico (slide) en lugar de tap. Añade una fricción intencional para evitar ejecuciones accidentales. El swipe es un gesto comprometido; el tap, no.

DebateDebate

From the start, both flows were going to coexist. The real question was different: how do we make buying and selling as fast and easy as possible without forcing the user into the full flow? Speed for assets you already know; depth and calm when you need to think it through. Quick Actions doesn't replace the traditional flow. It complements it. Each path answers a different user moment. Desde el inicio quedó claro que ambos caminos iban a convivir. La pregunta real era otra: ¿cómo hacemos que comprar y vender sea lo más rápido y fácil posible sin entrar al flujo completo? Velocidad para activos que ya conoces; profundidad y calma cuando necesitas pensarlo. Quick Actions no reemplaza al flujo tradicional. Lo complementa. Cada camino responde a un momento distinto del usuario.

"I think Robinhood is going to copy this feature." "Siento que Robinhood nos va a copiar esta funcionalidad."

Vicente Rotman, Zesty CTO Vicente Rotman, CTO de Zesty

Said half in jest, it set the bar: if what you're designing feels solid enough to imagine a major broker eyeing it, you're on the right track. And even in that scenario, what doesn't copy is the coherence with the rest of the product. Dicha medio en broma, fijó la vara: si lo que diseñas se siente lo suficientemente sólido como para imaginar que un broker grande quisiera replicarlo, vas por buen camino. E incluso en ese escenario, lo que no se copia es la coherencia con el resto del producto.

DecisionDecisión

We're shipping both paths in parallel. Quick Actions and the traditional flow will coexist from day one. Neither replaces the other; each answers a different user moment. Metrics to watch once in production: Lanzamos ambos caminos en simultáneo. Quick Actions y el flujo tradicional convivirán desde el día uno. Uno no reemplaza al otro, cada uno responde a un momento distinto del usuario. Métricas a observar una vez en producción:

• Execution rate per flow (Quick Actions vs traditional). Tasa de ejecución por flujo (Quick Actions vs tradicional).
• Immediate post-execution cancellation rate (signal of involuntary error). Tasa de cancelación inmediata post-ejecución (señal de error involuntario).
• Distribution by user profile (new vs active). Distribución por perfil de usuario (nuevo vs activo).
• Average volume per order on each flow. Volumen promedio por orden en cada flujo.

Systems Thinking: The granular cancellation matrix Systems Thinking. La matriz de cancelación granular

The most challenging piece of the project, both to understand and to execute, without breaking the ecosystem we'd already designed and keeping it simple for the end user. La pieza más desafiante del proyecto, tanto de entender como de ejecutar, sin romper el ecosistema que ya teníamos diseñado y manteniéndolo simple para el usuario final.

Brackets introduced two invisible but huge problems. The first was systems-level: what happens when you cancel one leg of a chained order? Does everything cancel? Just that leg? And if the entry already executed, does cancellation leave the user exposed without protection? Alpaca's API exposes each order_id separately, so the call was 100% design. The second was narrative: how do you explain all this to a first-time user without overwhelming them? A whole new visual and language system had to be built around bracket orders so they could be read at a glance. Los brackets introdujeron dos problemas invisibles pero enormes. El primero era de sistema: ¿qué pasa cuando cancelas una pata de una orden encadenada? ¿Se cancela todo? ¿Solo esa pata? Si la entrada ya se ejecutó, ¿la cancelación deja al usuario expuesto sin protección? La API de Alpaca expone cada order_id por separado, así que la decisión era 100% de diseño. El segundo era narrativo: ¿cómo le explicas todo esto a un usuario que recién está empezando sin abrumarlo? Hubo que crear todo un sistema visual y de lenguaje nuevo alrededor de bracket orders para que se pudieran leer de un vistazo.

Instead of inventing new states, I mapped bracket flows to the existing Movements taxonomy (Pending, Incomplete, Canceling, Canceled, Expired, Rejected, Completed). That single decision kept the implementation consistent with the rest of the product and, more importantly, kept the user's mental model intact. En lugar de inventar nuevos estados, mapeé los flujos de bracket a la taxonomía de Movimientos que ya existía (Pendiente, Incompleta, Cancelando, Cancelada, Expirada, Rechazada, Completada). Esa decisión sola mantuvo la coherencia con el resto del producto y, más importante, conservó intacto el modelo mental del usuario.

From there, I documented complete matrices for OTO, OCO, and OTOCO with every possible combination: what cancels, what stays active, what message the user sees, and which bottom sheet pattern applies. A partir de ahí, documenté matrices completas para OTO, OCO y OTOCO con cada combinación posible: qué se cancela, qué queda activo, qué mensaje ve el usuario y qué patrón de bottom sheet aplica.

AI's role in this process: mapping these matrices by hand would have been painfully slow and error-prone. I fed Claude the full Alpaca documentation and we iterated together: proposing combinations, validating states, discarding paths that didn't make sense. The AI got things wrong too (multiple times, everything had to be reviewed), but the iteration cycle was much faster than going solo. Final judgment was mine; the speed to get there, shared. El rol de la AI en este proceso: mapear estas matrices a mano habría sido lentísimo y propenso a errores. Alimenté a Claude con la documentación completa de Alpaca y fuimos iterando juntos. Proponiendo combinaciones, validando estados, descartando los caminos que no hacían sentido. La AI también se equivocaba (varias veces, había que revisar todo), pero el ciclo de iteración fue mucho más rápido que hacerlo en solitario. El criterio final fue mío; la velocidad para llegar ahí, compartida.

Three bottom sheet patterns based on the action's ambiguity level: Tres patrones de bottom sheet según el nivel de ambigüedad de la acción:

• 2 CTA. Clear binary action (cancel all / keep). 2 CTA. Acción binaria clara (cancelar todo / mantener).
• 3 CTA in a list. Multiple equivalent options. 3 CTA en lista. Múltiples opciones equivalentes.
• 3 CTA with ambiguous case. When one option leaves the user in a risky state, it's visually isolated from the rest. 3 CTA con caso ambiguo. Cuando una opción puede dejar al usuario en un estado riesgoso, se aísla visualmente del resto.

Typographic warning system: Sistema de warnings tipográficos:

• Ambiguous case. The cancellation has implications the user should understand, but isn't critical. Caso ambiguo. La cancelación tiene implicaciones que el usuario debería entender, pero no es crítica.
• Critical case. The most important: canceling both exits of an OCO after the entry executed leaves the position unprotected. That warning isn't decorative. It's the last line of defense before the user loses money on a decision they didn't understand. Caso crítico. El más importante: cancelar ambas salidas de un OCO después de que la entrada se ejecutó deja la posición desprotegida. Ese warning no es decorativo. Es la última línea de defensa antes de que el usuario pierda dinero por una decisión que no entendió.

I also designed a system of tags in the list view (OCO partial, OTOCO · 3 orders) so each bracket's state is scannable without entering the detail. También diseñé un sistema de tags en el listado (OCO parcial, OTOCO · 3 órdenes) para que el estado de cada bracket fuera escaneable sin entrar al detalle.

ImpactImpacto

The early signal from Stage 2 suggests the hypothesis is holding. Full production metrics across the rest of the product are pending, but the impact on experience, product, and storytelling is already notable: a complete shift in how Zesty communicates with its users, and today no other app in the Chilean market does anything like it. La señal temprana de la Etapa 2 sugiere que la hipótesis se sostiene. Las métricas completas en producción para el resto del producto siguen pendientes, pero el impacto en la experiencia, el producto y el storytelling ya es notorio: un cambio completo de cómo Zesty se comunica con sus usuarios, y hoy no hay otra app en el mercado chileno que haga algo parecido.

What's nextLo que viene

What design solved Lo que el diseño resolvió

What I learnedLo que aprendí

Zesty isn't a closed chapter. The product keeps evolving, and I'm still designing alongside the team. I'm proud of what's been built since 2023 and grateful to keep shaping what comes next. This is what I've learned along the way. Zesty no es un capítulo cerrado. El producto sigue evolucionando, y yo sigo diseñando con el equipo. Me enorgullece lo que se ha construido desde 2023 y agradezco poder seguir dándole forma a lo que viene. Esto es lo que aprendí en el camino.

INSIGHT Alignment as a design lever Alineación como palanca de diseño

In a small team with limited resources, involving engineering, product, and ops from the first heuristic finding avoided costly rework. Every decision arrived at development already validated by all parties, accelerating implementation. En un equipo pequeño con recursos limitados, involucrar a ingeniería, producto y operaciones desde el primer hallazgo heurístico evitó retrabajos costosos. Cada decisión llegaba a desarrollo ya validada por todas las partes, acelerando la implementación.

CONCLUSION Design for complexity, not against it Diseñar para la complejidad, no en su contra

The challenge wasn't to simplify. It was to preserve control without overwhelming. The solution: optional layers. The same movements screen works for someone reviewing one order a month and for someone executing 30 trades a day. Knowing what to postpone was as valuable as knowing what to design. El desafío no era simplificar. Era preservar el control sin abrumar. La solución: capas opcionales. La misma pantalla de movimientos funciona para quien revisa una orden al mes y para quien ejecuta 30 al día. Saber qué postponer fue tan valioso como saber qué diseñar.

HIGHLIGHT Reuse the taxonomy you already built Reusa la taxonomía que ya construiste

When brackets arrived, the obvious temptation was to invent new states. Mapping OTO/OCO/OTOCO to the existing Movements taxonomy (Pending, Incomplete, Canceling…) kept the implementation consistent with the rest of the product and, more importantly, kept the user's mental model intact. The best systems thinking is often the kind nobody notices. Cuando llegaron los brackets, la tentación obvia era inventar estados nuevos. Mapear OTO/OCO/OTOCO a la taxonomía de Movimientos existente (Pendiente, Incompleta, Cancelando…) mantuvo la coherencia con el resto del producto y, más importante, conservó intacto el modelo mental del usuario. El mejor systems thinking suele ser el que no se nota.

RISK DESIGN Make the worst case loud Haz que el peor caso sea ruidoso

The cancellation matrix has dozens of combinations, but only one earns a hard warning: canceling both exits of an OCO with the entry already executed leaves the position unprotected. Designing for risk isn't about spreading warnings. It's about making sure the one that matters doesn't blend in with the rest. La matriz de cancelación tiene decenas de combinaciones, pero solo una merece un warning fuerte: cancelar las dos salidas de un OCO con entrada ya ejecutada deja la posición desprotegida. Diseñar para riesgo no es repartir advertencias. Es asegurar que la única que importa no se confunda con las demás.

What's coming? ¿Qué viene?

So, what's next? Maybe new icons. Maybe a more robust design system. Maybe even (please) a proper dark mode 👀. Hard to say from here. The honest answer: ship, review, validate. The rest reveals itself as the product evolves. Y ahora, ¿qué viene? Quizás iconos nuevos. Quizás un sistema de diseño más robusto. Quizás incluso (please) un dark mode como corresponde 👀. Difícil decirlo desde acá. La respuesta honesta: implementar, revisar, validar. El resto se revela mientras el producto sigue evolucionando.

Case study by Javier Esquivel · Product Designer Caso de estudio de Javier Esquivel · Product Designer