Luis Silva
Volver a proyectos
02 Bolsa de Valores de la República Dominicana

Dashboard de Renta Variable

Evolucionando un dashboard público de renta variable alrededor de las realidades de un mercado accionario emergente.

  • Mercado de Capitales
  • Renta Variable
  • Producto de Datos
  • 2024

Estado Publicado

El mercado de renta variable de República Dominicana todavía se encontraba en una etapa de desarrollo. A medida que nuevas empresas listadas ingresaban al mercado, BVRD necesitaba evolucionar un dashboard existente hacia una experiencia más clara y escalable para comprender precios, actividad de negociación y comportamiento del mercado.

Organización
Bolsa de Valores de la República Dominicana
Año
2024
El Dashboard de Renta Variable mostrando el instrumento listado, su último precio, la profundidad del mercado, el ranking de puestos de bolsa, el histórico de precio y las operaciones recientes

01 Contexto

Un dashboard para un mercado que todavía estaba tomando forma

El primer dashboard de renta variable de BVRD surgió en el contexto de la llegada de la primera acción negociada públicamente en el mercado dominicano. La plataforma ofrecía al público un espacio dedicado para seguir el instrumento, conocer su último precio y explorar la actividad de negociación.

A medida que el mercado se expandió y se incorporaron nuevas empresas listadas, el producto necesitó evolucionar con él. Los requerimientos y comentarios recibidos por BVRD desde puestos de bolsa y usuarios finales, junto con las limitaciones de la experiencia existente, se convirtieron en el punto de partida para una segunda versión.

Evolución del mercado

  1. 01 Primera acción listada
  2. V1 Experiencia inicial de renta variable
  3. V2 Evolución de la experiencia

02 La experiencia existente

La primera versión reveló lo que el producto necesitaba después

La primera versión estableció las bases del producto, pero su uso en un entorno real hizo visibles limitaciones que cobraron mayor importancia a medida que evolucionaba el mercado de renta variable.

Algunas partes de la interfaz presentaban una jerarquía visual fragmentada o comportamientos inconsistentes. Otras dedicaban un espacio considerable a información de mercado cuyo valor podía ser limitado dependiendo de la actividad y liquidez reales. Al mismo tiempo, los requerimientos que llegaban a BVRD desde puestos de bolsa y usuarios finales generaban nuevas expectativas sobre lo que el dashboard debía comunicar.

El reto no consistía simplemente en modernizar la interfaz. Había que reconsiderar qué información del mercado merecía mayor atención, qué podía simplificarse y cómo organizar los datos financieros para una audiencia pública amplia.

¿Qué debe mostrar un dashboard cuando más datos no necesariamente significan información más útil?

[ Visual 02 ]

V1 — experiencia existente

[ 16:9 ]

[ Visual 02 ]

V1 — experiencia existente

Captura grande de la versión original del dashboard de renta variable. Esta imagen establecerá el punto de partida antes del rediseño.

Captura desktop amplia. Las cuatro notas siguientes están escritas para acompañarla cuando exista.

Lo que la primera versión hizo visible

  1. 01

    Jerarquía fragmentada

    Distintos conceptos del mercado competían por atención sin un orden de lectura suficientemente claro.

  2. 02

    Estados de bajo valor

    Algunas áreas podían ocupar una parte importante de la interfaz incluso cuando la actividad del mercado ofrecía poca información que mostrar.

  3. 03

    Densidad de información

    La información financiera estaba disponible, pero su importancia relativa no siempre era evidente de inmediato.

  4. 04

    Consistencia de interfaz

    Partes de la experiencia existente requerían ajustes visuales y de interacción a medida que el producto evolucionaba.

03 Pensamiento de producto

Diseñando para el mercado que realmente teníamos

Los productos financieros pueden convertirse fácilmente en ejercicios de mostrar cada métrica disponible. Para V2, el objetivo era distinto: la interfaz debía reflejar cómo se utilizaba realmente el mercado dominicano de renta variable.

Eso implicaba cuestionar elementos heredados de la primera versión en lugar de conservarlos automáticamente. Los requerimientos de negocio debían equilibrarse con la utilidad de la información, la frecuencia con la que realmente existirían datos significativos y la cantidad de atención que cada componente ocupaba en pantalla.

La experiencia resultante priorizó señales que ayudaran a los usuarios a responder rápidamente preguntas prácticas.

Las preguntas que la interfaz tiene que responder

  1. 01

    ¿Qué estoy viendo?

    Contexto del instrumento

  2. 02

    ¿Cuál es el último precio?

    Precio actual

  3. 03

    ¿Qué está mostrando el mercado?

    Estado del mercado

  4. 04

    ¿Quién está participando?

    Actividad de puestos de bolsa

  5. 05

    ¿Cómo se ha comportado?

    Comportamiento histórico

04 Jerarquía de información

Reconstruyendo la jerarquía de información

V2 reorganizó la experiencia alrededor de una progresión más clara, desde la identidad del instrumento hasta el estado actual del mercado y su comportamiento histórico.

En lugar de tratar cada conjunto de datos con la misma importancia, la interfaz establece diferentes niveles: la información del valor proporciona contexto, los precios actuales comunican el estado inmediato del mercado, la actividad de los puestos de bolsa añade contexto sobre la participación y los datos históricos ayudan a comprender el comportamiento a través del tiempo.

[ Visual 03 ]

V2 — anatomía de la información

[ 16:9 ]

[ Visual 03 ]

V2 — anatomía de la información

Captura anotada de V2. Utilizar cinco marcadores numéricos discretos para identificar las principales capas de información. No colocar flechas ni párrafos explicativos sobre la interfaz.

Leyenda de marcadores debajo.

Leyenda de marcadores

  1. 01 Contexto del instrumento
  2. 02 Estado actual del mercado
  3. 03 Participación del mercado
  4. 04 Comportamiento del mercado
  5. 05 Actividad de negociación

05 V1 → V2

Evolución, no un rediseño cosmético

La segunda versión no se abordó como un simple cambio visual. Fue una oportunidad para reconsiderar el producto después de su primera etapa de uso real y preparar la experiencia para un mercado de renta variable más amplio.

[ Visual 04 ]

Evolución del producto V1 → V2 · V1

[ 4:3 ]

[ Visual 04 ]

Evolución del producto V1 → V2 · V2

[ 4:3 ]

[ Visual 04 ]

Evolución del producto V1 → V2

Comparación lado a lado utilizando la captura original de V1 y la versión final V2. Alinear regiones equivalentes cuando sea posible para que la evolución de la jerarquía y composición pueda comprenderse rápidamente.

Dos columnas estáticas por ahora — sin comparador deslizante.

  1. Jerarquía más clara

    Las señales más importantes del mercado se volvieron más fáciles de identificar y recorrer.

  2. Información con propósito

    Los componentes fueron reconsiderados de acuerdo con la utilidad de la información que proporcionaban dentro del contexto del mercado local.

  3. Un sistema capaz de evolucionar

    La experiencia pasó del contexto de la primera acción listada hacia una estructura capaz de acompañar el crecimiento del mercado de renta variable.

06 Del diseño al código

Decisiones de diseño informadas por la implementación

Mi rol fue más allá de definir la experiencia. Trabajé entre la coordinación de producto, el diseño de interfaz y la implementación front-end, llevando partes de la experiencia rediseñada hacia una interfaz productiva y responsive.

Construir partes del producto también implicó enfrentar las decisiones de diseño con restricciones técnicas reales. Se exploraron y evaluaron librerías de gráficos de acuerdo con la información que el producto necesitaba comunicar, y los enfoques seleccionados se integraron dentro de la experiencia responsive.

Trabajar entre diseño, producto e implementación redujo la distancia entre lo que se proponía y lo que realmente podía entregarse.

Cómo se movió el trabajo

  1. Requerimientos de producto
  2. Experiencia
  3. Front-end

Lo que la implementación tenía que sostener

  • Datos de mercado
  • Comportamiento responsive
  • Librerías de gráficos
  • Restricciones de producción

[ Visual 05 ]

Experiencia responsive · Desktop

[ 16:10 ]

[ Visual 05 ]

Experiencia responsive · Mobile

[ 9:16 ]

[ Visual 05 ]

Experiencia responsive

Vistas desktop y mobile del producto mostrando cómo la jerarquía de información se adapta entre diferentes tamaños de pantalla. Agregar aquí las capturas responsive reales cuando estén disponibles.

Mantener el espacio reservado hasta que exista una captura mobile real.

07 Resultado

Un producto que evolucionó junto a su mercado

La segunda versión se convirtió en la evolución de la experiencia pública de renta variable de BVRD, incorporando lo aprendido a partir de la primera versión y respondiendo a un contexto de mercado más amplio.

El proyecto reforzó un principio que se volvió cada vez más importante en mi trabajo: las interfaces financieras no mejoran simplemente mostrando más datos, sino tomando decisiones deliberadas sobre qué información ayuda a las personas a comprender lo que está ocurriendo.

  1. Producto

    Evolución de un producto público existente a medida que se expandía el mercado de renta variable.

  2. Diseño

    Reconsideración de la jerarquía y el valor de la información alrededor del comportamiento real del mercado.

  3. Entrega

    Trabajo entre coordinación de equipo, diseño de producto e implementación front-end responsive.