Contexto

Context

5Componentes es una aplicación chilena que centraliza el registro y el acceso a informes antropométricos, pensada para nutricionistas y sus pacientes. Distingue dos roles — paciente y profesional — pero por falta de acceso a usuarios profesionales, este ejercicio exploratorio se centró en la experiencia del paciente. Es un ejercicio personal, sin vínculo con el equipo real de la aplicación.

5Componentes is a Chilean app that centralizes the registration and access to anthropometric reports, built for nutritionists and their patients. It distinguishes two roles — patient and professional — but due to lack of access to professional users, this exploratory exercise focused on the patient experience. It's a personal exercise, with no connection to the app's actual team.

Qué tenemos

What we have

La app actual: login con selector de rol, dashboard con métricas e informes, menú lateral de navegación, comparación de informes antropométricos y una sección de video-tutoriales sin contenido.

The current app: login with role selector, dashboard with metrics and reports, side navigation menu, anthropometric report comparison, and an empty video-tutorials section.

Investigación

Research

Para entender cómo se movía una paciente dentro de la app, mapeé el user flow actual, que además usé para definir el scope de este ejercicio. A simple vista, 5Componentes no resulta muy atractiva visualmente, pero el objetivo no era quedarme ahí: quería revisar la experiencia real de uso, así que complementé el flujo con una investigación que detallo a continuación.

To understand how a patient moved through the app, I mapped the current user flow, which I also used to define the scope of this exercise. At a glance, 5Componentes isn't very visually appealing, but the goal wasn't to stop there: I wanted to look at the real usage experience, so I backed up the flow with the research detailed below.

Primera exploración

Initial walkthrough

Hice una primera revisión de la app, para detectar fricciones evidentes y levantar supuestos.

I did a first review of the app, to spot obvious friction points and surface assumptions.

Antes de salir a reclutar, necesitaba acotar a quién le iba a preguntar. Definí un proto-persona con los supuestos mínimos sobre el tipo de usuario que buscaba testear.

Before recruiting, I needed to narrow down who to ask. I defined a proto-persona with the minimum assumptions about the kind of user I wanted to test with.

Con esos supuestos como guía, recluté a una participante de 36 años que calzaba con el perfil buscado y continué con una prueba de usabilidad.

With those assumptions as a guide, I recruited a 36-year-old participant who matched the profile I was looking for, and followed up with a usability test.

El test confirmó la mayoría de los hallazgos de mi exploración inicial y reveló tres hallazgos nuevos:

The test confirmed most of the findings from my initial walkthrough and surfaced three new ones:

A partir de la prueba de usabilidad y observaciones generales, definí un usuario para el caso en estudio.

Based on the usability test and general observations, I defined a user for this case study.

User persona

User persona

Sofía Montenegro

About

• Edad: 31
• Ocupación: Community manager
• Locación: Chile
• Educación: Periodista
• Estado civil: Soltera

Estudiosa Tranquila Entusiasta Flexible Creativa Ordenada

Motivaciones

Sofía es periodista y pasa muchas horas frente al computador, lo que la llevó a inscribirse en un gimnasio. Es muy disciplinada: no le gusta dejar las cosas a medio camino y se compromete con todo lo que comienza. Además, le gusta investigar por su cuenta, así que lee artículos y ve videos en YouTube para llevar su vida fitness a otro nivel.

Pain points

• No encuentra el informe de forma directa desde el dashboard.
• La nomenclatura de las secciones ("5Componentes", "2Componentes") no le hace sentido.
• Percibe la interfaz como poco atractiva, lo que le resta confianza en la app.

Goals

• Mantener una rutina deportiva sin desmotivarse.
• Llevar registro de su avance de forma sencilla.
• Encontrar otras personas que compartan su estilo de vida.
• Estar siempre informada con fuentes fiables.

Con esos hallazgos armé un User Journey Map: los dos puntos críticos fueron el proceso de registro y el acceso al informe.

With those findings I put together a User Journey Map: the two critical points were the sign-up process and access to the report.

User Journey Map

User Journey Map

Problema

Problem

Sofía necesita acceder a su informe antropométrico sin fricción, porque cualquier obstáculo en el camino la desmotiva a seguir usando la app para mantener su rutina.

Sofía needs to access her anthropometric report without friction, because any obstacle along the way discourages her from continuing to use the app to keep up her routine.

El mayor quiebre en la experiencia de 5Componentes ocurre en los dos extremos del flujo: el registro y el acceso al informe. Sofía llega a la app sabiendo que su nutricionista ya le envió un informe, pero la pantalla de login no le indica que primero debe crear una cuenta, así que duda si necesita iniciar sesión o no. Una vez dentro, el dashboard muestra "bloques de colores" con las métricas del informe, pero no son clicables; la ruta real hacia el informe está escondida en un menú lateral, bajo un nombre poco intuitivo. A esto se suma una interfaz que la propia usuaria calificó como poco atractiva, con secciones vacías y una navegación de regreso al dashboard que no es evidente.

The biggest breakdown in the 5Componentes experience happens at the two ends of the flow: sign-up and access to the report. Sofía arrives at the app knowing her nutritionist already sent her a report, but the login screen doesn't tell her she needs to create an account first, so she's unsure whether she needs to log in at all. Once inside, the dashboard shows "colored blocks" with the report's metrics, but they aren't clickable; the actual path to the report is hidden in a side menu, under an unintuitive name. On top of that, the interface itself was rated as unappealing by the user, with empty sections and navigation back to the dashboard that isn't obvious.

Rediseño

Redesign

Con el problema definido, pasé a bocetar soluciones para los dos puntos críticos: el ingreso/registro y el acceso al informe. Empecé por wireframes de baja fidelidad para validar la estructura antes de entrar en detalle visual.

With the problem defined, I moved on to sketching solutions for the two critical points: login/sign-up and access to the report. I started with low-fidelity wireframes to validate the structure before getting into visual detail.

• Wireframes con tres opciones claras al ingresar: "soy paciente", "soy evaluador" o "no tengo cuenta".
• Menú inferior más amplio y accesible, reemplazando la navegación original.

• Wireframes with three clear options on entry: "I'm a patient", "I'm an evaluator", or "I don't have an account".
• A wider, more accessible bottom menu, replacing the original navigation.

Log in / Sign up

Log in / Sign up

El primer punto crítico era el ingreso: en el test, la participante dudó si necesitaba iniciar sesión al no tener una cuenta. Separé con claridad el flujo de inicio de sesión del de registro, y agregué un paso explícito para elegir el rol (evaluador o paciente) antes de crear la cuenta, algo que la app original no contemplaba.

The first critical point was entry: in testing, the participant was unsure whether she needed to log in without an existing account. I clearly separated the login flow from sign-up, and added an explicit step to choose a role (evaluator or patient) before creating the account, something the original app didn't have.

Navegación

Navigation

El segundo punto crítico era llegar al informe. Rediseñé el menú inferior con tres accesos directos —Informes, Resumen y Mis profesionales— resolviendo la falta de acceso directo y la nomenclatura confusa que había detectado en mi exploración inicial. También agregué una sección de Configuración con cambio de contraseña, otra carencia de esa misma exploración, aunque esta no llegó a validarse con la participante del test.

The second critical point was reaching the report. I redesigned the bottom menu with three direct shortcuts — Reports, Summary, and My Professionals — fixing the missing direct access and the confusing naming I had flagged in my initial walkthrough. I also added a Settings section with password change, another gap from that same walkthrough, though this one was never validated with the test participant.

Referentes

References

Antes de definir la paleta y el sistema visual, revisé referentes de fitness y nutrición: Gymshark, Training, Apple Fitness y Fitia. El patrón que se repite en las primeras tres es fondo oscuro con acentos en alto contraste o colores neón, de esta forma las métricas resaltan y transmiten actividad, fuerza y energía. Fitia, en cambio, aportó otra mirada: una interfaz clara y ordenada, pensada para que los datos nutricionales se lean sin esfuerzo.

Before defining the palette and visual system, I looked at fitness and nutrition references: Gymshark, Training, Apple Fitness, and Fitia. The pattern that repeats across the first three is a dark background with high-contrast or neon accents, so the metrics stand out and convey activity, strength, and energy. Fitia, on the other hand, offered a different angle: a clear, orderly interface built so nutritional data reads effortlessly.

Gymshark

Cards oscuras con overlays de texto en blanco y tabs en píldora — la base para el tono energético y la tipografía bold de las pantallas.

Training

Fondo negro con iconos y botones en colores (naranjo, cian) que marcan estados y acciones dentro de una rutina — referencia directa para los acentos de color.

Apple Fitness

Los anillos de actividad en verde lima, magenta y cian sobre negro son el ejemplo más claro de cómo el neón hace que una métrica se sienta viva.

Fitia

Interfaz clara, con jerarquía simple entre macros y calorías — tomé esa claridad para organizar las cards de informes, aunque el tono de color no aplicara acá.

Gymshark

Dark cards with white text overlays and pill-shaped tabs — the base for the energetic tone and bold typography across the screens.

Training

Black background with icons and buttons in color (orange, cyan) marking states and actions within a routine — the direct reference for the color accents.

Apple Fitness

The activity rings in lime green, magenta, and cyan on black are the clearest example of how neon makes a metric feel alive.

Fitia

A clear interface with a simple hierarchy between macros and calories — I borrowed that clarity to organize the report cards, even though the color tone didn't apply there.

UI Kit

UI Kit

Con los wireframes validados, definí un sistema visual acotado para dar consistencia a las pantallas de alta fidelidad: paleta de color con roles claros (marca, métricas, fondos, texto), dos familias tipográficas (DM Sans y Space Grotesk) en sus distintos pesos y tamaños, e iconografía de Material Design.

With the wireframes validated, I defined a focused visual system to bring consistency to the high-fidelity screens: a color palette with clear roles (brand, metrics, backgrounds, text), two type families (DM Sans and Space Grotesk) across their various weights and sizes, and Material Design iconography.

Tokens de diseño

Design tokens

Estos son los valores que dejé definidos como variables en Figma (colección "Lime-Sport"), para que un cambio de color, radio o color de ícono se propague de forma consistente en vez de aplicarse a mano pantalla por pantalla.

These are the values I defined as Figma variables (the "Lime-Sport" collection), so a change to color, radius, or icon color would propagate consistently instead of being applied by hand screen by screen.

Con esos fundamentos, armé los componentes reutilizables para las pantallas: botones, inputs, ítems de menú y de navegación, toggle y las cards de informes, profesionales y KPIs que se repiten en toda la app.

With those foundations in place, I put together the reusable components for the screens: buttons, inputs, menu and navigation items, a toggle, and the report / professional / KPI cards that repeat throughout the app.

Propuestas de alta fidelidad

High-fidelity proposals

Con el UI Kit definido, llevé los wireframes a alta fidelidad. El flujo de ingreso y registro se mantuvo igual de simple, ahora con la identidad visual completa; y en el resto de la app agregué una pantalla de perfil y configuraciones con cambio de contraseña, la carencia identificada en mi exploración inicial de la app.

With the UI Kit defined, I brought the wireframes to high fidelity. The login and sign-up flow stayed just as simple, now with the full visual identity; and in the rest of the app I added a profile screen and settings with password change, the gap identified during my initial walkthrough of the app.

Impacto esperado

Expected impact

Al resolver el registro y dar acceso directo al informe, la expectativa es reducir el abandono justo en los dos puntos donde cae el ánimo de Sofía en el User Journey Map, y aumentar la probabilidad de que vuelva a abrir la app para revisar su progreso — que es el valor central que la aplicación promete. Confirmar esto requiere el testing de usabilidad que quedó fuera de scope de este ejercicio.

By fixing sign-up and giving direct access to the report, the expectation is to reduce drop-off right at the two points where Sofía's mood dips in the User Journey Map, and increase the odds she comes back to check her progress — which is the app's core value proposition. Confirming this requires the usability testing that was out of scope for this exercise.

Conclusión

Conclusion

El rediseño responde directamente a los dos puntos críticos que surgieron en la investigación y la definición del problema: el ingreso/registro y el acceso al informe. Dicho esto, prefiero no dar por resuelto el problema solo porque la propuesta visual está lista — eso solo se confirma testeando con usuarios reales, y ese testing de usabilidad quedó fuera del alcance de este ejercicio. Es el paso natural que falta para cerrar el ciclo completo de diseño.

The redesign directly addresses the two critical points that came out of the research and problem definition: login/sign-up and access to the report. That said, I'd rather not call the problem solved just because the visual proposal is ready — that can only be confirmed by testing with real users, and that usability testing was out of scope for this exercise. It's the natural next step to close the full design loop.

Herramientas

Tools

• Figma
• FigJam
• Claude