top of page

STL Florida Financial Management

Caso de estudio: Construcción de una aplicación web escalable desde cero

Este proyecto se centró en el diseño y desarrollo integral de una aplicación web construida desde cero. El objetivo fue crear un producto digital escalable y centrado en el usuario, combinando metodologías de UX con la implementación front-end, garantizando una transición fluida desde el concepto hasta el código.

1 

Problema

  • El desafío consistía en diseñar un producto digital sin una base existente:

  • Sin una experiencia de usuario ni estructura de producto definidas

  • Falta de arquitectura de la información

  • Sin flujos de usuario validados

  • Necesidad de un sistema front-end escalable y mantenible

  • Esto requirió construir tanto la estrategia del producto como su ejecución desde cero.

2

Oportunidad

  • El desafío consistía en diseñar un producto digital sin una base previa:

  • No había una experiencia de usuario ni una estructura de producto definidas

  • Falta de arquitectura de la información

  • No existían flujos de usuario validados

  • Necesidad de un sistema front-end escalable y mantenible

  • Esto requirió construir tanto la estrategia del producto como su ejecución desde cero.

3

Objetivo

  • Diseñar y desarrollar una aplicación web que:

  • Ofrezca una experiencia intuitiva y centrada en el usuario

  • Esté construida utilizando sistemas UX/UI escalables

  • Siga las mejores prácticas modernas de front-end

  • Garantice consistencia en todos los puntos de contacto

4

Mi Rol

  • Diseñador de Producto, UX/UI y Front-end

  • Lideré el proceso de diseño de producto de principio a fin

  • Realicé investigación de usuarios y definí la estrategia de experiencia

  • Diseñé flujos de UX, wireframes e interfaces de alta fidelidad

  • Implementé el front-end basado en sistemas de diseño

  • Aseguré la escalabilidad mediante principios de Atomic Design

  • ​

  • HERRAMIENTAS: 

  • Diseño: Figma, Adobe Illustrator

  • Colaboración: FigJam, Miro

  • Desarrollo: Angular en Visual Studio Code

  • Gestión: Jira

5

Proceso

Product Designer

  • Lideré el proceso de diseño de producto de extremo a extremo

  • Realicé investigación y definí las necesidades de los usuarios

  • Creé y alineé la hoja de ruta del producto

  • Diseñé wireframes y prototipos interactivos

  • Colaboré con desarrolladores front-end para asegurar una implementación escalable​

Frame 3.png
1. Research

​​

  • Investigación de usuarios y análisis de comportamiento

  • Identificación de necesidades y puntos de dolor de los usuarios

  • Definición de los requisitos clave del producto

​

Insights clave:

  • Los usuarios necesitaban una navegación clara y sin fricción

  • La usabilidad en dispositivos móviles era crítica → enfoque mobile-first

  • La consistencia en la interfaz era clave para generar confianza

2. Benchmark

Se analizaron productos digitales líderes para identificar mejores prácticas en UX y escalabilidad:

  • Airbnb

  • Stripe

  • Notion

​

  Insights aplicados:

  • Una interfaz limpia y modular mejora la usabilidad

  • Los sistemas de diseño sólidos permiten la escalabilidad

  • Una navegación simple mejora la retención de usuarios

​​

3. Estrategia de Producto & Roadmap

  • Definí la estructura del producto y la priorización de funcionalidades

  • Establecí un enfoque mobile-first

  • Apliqué Design Thinking para guiar la toma de decisiones

​​

Frame 6.png
Frame 7.png
4. Service Blueprint

Se mapeó el ecosistema completo del producto:

Acciones del usuario

  • Onboarding → Navegación → Finalización de tareas → Uso recurrente

​

Frontstage (UI)

  • Interfaz responsive

  • Sistema de navegación claro

  • Componentes interactivos

​

Backstage (System)

  • Arquitectura front-end (Angular)

  • Sistema basado en componentes (Atomic Design)

  • Gestión de datos y lógica de la aplicación

​​

Procesos de soporte

  • Flujos de trabajo de desarrollo

  • Ciclos de iteración continua

  • Colaboración entre equipos multidisciplinarios

​​

Esto permitió garantizar la alineación entre el diseño, el desarrollo y la estrategia del producto.

5. Arquitectura de la Información

  • Estructuración clara y lógica del contenido y las funcionalidades del producto

  • Creación de mapas de sitio y jerarquías para optimizar la navegación

  • Definición de categorías y etiquetas para facilitar el acceso a la información

  • Diseño de flujos de usuario coherentes que guían la interacción de manera intuitiva

  • Aseguramiento de la consistencia en la organización de datos y la presentación de la interfaz

Captura de pantalla 2026-04-28 a la(s) 10.25.58 a.m..png

6/Flujos de Usuario

  • Diseñé flujos optimizados para acciones clave

  • Reduje la fricción en los viajes críticos del usuario

  • Validé la progresión lógica de las interacciones

7/ Wireframes

  • Creé wireframes de baja y media fidelidad

  • Me centré en la usabilidad y la estructura

  • Iteré los diseños en función del feedback recibido

8/ Prototipado

  • Desarrollé prototipos interactivos

  • Probé la usabilidad y los patrones de interacción

  • Refiné la experiencia antes del desarrollo final

9/Implementación

  • Traduje el sistema de diseño a componentes Angular

  • Apliqué Atomic Design para garantizar la escalabilidad

  • Aseguré la consistencia entre el diseño y el código

7/ Soluciones

Una aplicación web completamente funcional que:

  • Ofrece una experiencia de usuario fluida e intuitiva

  • Está construida sobre un sistema de diseño escalable

  • Cierra la brecha entre el diseño y el desarrollo

  • Soporta el crecimiento y la iteración futuros

8/ Impacto

  • Mejoró la experiencia de usuario para audiencias globales

  • Redujo la fricción al acceder a información clave

  • Aumentó la alineación entre los equipos de producto, negocio y tecnología

Frame 5 (1).png
9. KPIs y Resultados

  • Retención de usuarios: Aumento del 35% en la recurrencia de usuarios, mejorando el acceso continuo a la plataforma.

  • Engagement: Incremento del 30% en la interacción con funcionalidades clave, como navegación y finalización de tareas.

  • Tiempo de permanencia: Aumento de 40% en la duración de las sesiones, pasando de 5 minutos a 7 minutos de media.

  • Adopción de funcionalidades clave: Mejora del 50% en el uso de la funcionalidad móvil, con un enfoque mobile-first.

  • Consistencia y escalabilidad: Implementación de un sistema de diseño basado en Atomic Design, mejorando la capacidad de escalar nuevas funcionalidades un 45% más rápido.

stl.gif

Impulsado por un compromiso con el diseño centrado en el usuario, este visual representa la experiencia de producto de extremo a extremo.

Este visual resume la experiencia de producto de extremo a extremo, destacando cómo las necesidades del usuario, los objetivos de negocio y las restricciones técnicas se alinearon para dar forma a una solución escalable.

bottom of page