5Componentes — rediseño de informes antropométricos
5Componentes — anthropometric report redesign
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.
Continué con una prueba de usabilidad con una participante de 36 años.
I followed up with a usability test with a 36-year-old participant.
Información del Test de Usabilidad para la Aplicación "5Componentes"
Usability Test Information for the "5Componentes" Application
Participante: Mujer, 36 años
Participant: Woman, 36 years old
Introducción: Antes de iniciar el test de usabilidad, proporcionamos una breve introducción al participante, explicándole que había recibido un correo en su dirección de correo electrónico de prueba (test@mail.com) con un informe enviado por su nutricionista. Le informamos que tenía la opción de aceptar o rechazar este informe, y que al aceptarlo estaría disponible en la aplicación "5Componentes". Luego, solicitamos al participante que comenzara a interactuar con la aplicación.
Introduction: Before starting the usability test, we gave the participant a brief introduction, explaining that she had received an email at her test email address (test@mail.com) with a report sent by her nutritionist. We told her she could accept or decline this report, and that accepting it would make it available in the "5Componentes" application. We then asked the participant to start interacting with the app.
Observaciones:
Observations:
- Al evaluar la pantalla de inicio, el participante expresó confusión acerca de si se requería un inicio de sesión, dado que no disponía de una cuenta preexistente.
- La participante identificó y utilizó con éxito la opción "Crear una cuenta" en la interfaz.
- Durante el proceso de registro, la participante expresó dudas: "¿Para registrarme, debo usar el mismo correo donde me llegó el correo del nutricionista?" Le aclaramos que su razonamiento era correcto y le ofrecimos una credencial para agilizar el proceso de inicio de sesión.
- La fase de inicio de sesión se completó sin contratiempos.
- Se solicitó al participante que analizara en voz alta los elementos del "Dashboard": "Hay unos bloques de colores, pero al hacer clic en ellos, no ocurre nada. Quiero ver los informes". Además, expresó: "No me parece útil ver la cantidad de informes en este gráfico; creo que está de más o podría mostrarse de otra forma". También comentó sobre la estética general de la aplicación: "En general, la app no me parece atractiva; es muy fea".
- A continuación, se le pidió al participante que realizara una tarea específica: "Ve al último informe antropométrico de tu profesional". La participante hizo scroll hacia abajo sin éxito y señaló: "Me parece que podría entrar desde aquí (bloques de colores), pero estos botones no funcionan". Finalmente, decidió explorar el menú hamburguesa y encontró el submenú "Informes Antropométricos". Comentó su elección: "Decidí entrar en '5Componentes' porque suena a algo con más variables y más completo".
- Al no encontrar la información que buscaba, el participante se dirigió a la sección "2Componentes", donde finalmente encontró su informe. Al completar la tarea, expresó: "Me hubiese gustado encontrar el informe más fácilmente, quizás a través de un acceso directo en la pantalla principal".
- Posteriormente, se solicitó al participante que continuara explorando otras secciones de la aplicación.
- Se observaron secciones de la aplicación con contenido incompleto o vacío en varias instancias, lo que podría llevar a la percepción de una experiencia deficiente.
- La sección relacionada con los profesionales de salud presentó dificultades debido a la necesidad de realizar un desplazamiento horizontal en la interfaz, lo que resultó en una experiencia de usuario menos que óptima.
- La navegación para regresar al panel principal, también conocido como "dashboard", se identificó como no intuitiva y generó frustración por parte del participante.
- When looking at the home screen, the participant expressed confusion about whether a login was required, since she didn't have an existing account.
- The participant successfully identified and used the "Create an account" option in the interface.
- During sign-up, the participant had doubts: "To register, do I need to use the same email where I received the nutritionist's message?" We confirmed her reasoning was correct and gave her a credential to speed up the login process.
- The login phase was completed without issues.
- The participant was asked to think aloud about the "Dashboard" elements: "There are some colored blocks, but clicking them doesn't do anything. I want to see the reports." She also said: "I don't find it useful to see the number of reports in this chart; I think it's unnecessary or could be shown differently." She also commented on the app's overall look: "Overall, the app doesn't feel appealing; it's pretty ugly."
- Next, the participant was given a specific task: "Go to your professional's latest anthropometric report." She scrolled down with no success and noted: "I think I could get in from here (the colored blocks), but these buttons don't work." She eventually explored the hamburger menu and found the "Anthropometric Reports" submenu. She explained her choice: "I decided to go into '5Componentes' because it sounds like something with more variables and more complete."
- Not finding the information she was looking for, the participant went to the "2Componentes" section, where she finally found her report. On completing the task, she said: "I would have liked to find the report more easily, maybe through a shortcut on the main screen."
- She was then asked to keep exploring other sections of the app.
- Several sections of the app were observed with incomplete or empty content, which could contribute to a perception of a subpar experience.
- The section related to health professionals presented difficulties due to the need for horizontal scrolling in the interface, resulting in a less-than-optimal user experience.
- Navigation back to the main panel, also known as the "dashboard", was identified as unintuitive and caused frustration for the participant.
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
- Edad: 31
- Ocupación: Community manager
- Locación: Chile
- Educación: Periodista
- Estado civil: Soltera
- Age: 31
- Occupation: Community manager
- Location: Chile
- Education: Journalist
- Marital status: Single
Motivaciones
Motivations
Sofía es periodista y pasa muchas horas frente al computador, por esta razón decidió inscribirse en un gimnasio. Es muy disciplinada por lo que no le gusta dejar las cosas a medio camino, es por esta razón que se compromete con las cosas que comienza. También le gusta estudiar de distintos temas, por lo que le ha interesado leer y ver videos en YouTube para llevar su vida fitness a otro nivel.
Sofía is a journalist who spends many hours in front of the computer, which is why she decided to join a gym. She's very disciplined and doesn't like leaving things half-done, so she commits to whatever she starts. She also enjoys studying different topics, which has led her to read and watch YouTube videos to take her fitness routine to the next level.
Pain points
- Los informes que obtiene de los entrenadores o nutricionistas vienen en archivos adjuntos que se pierden.
- No es fácil comparar una evaluación con otra.
- Compartir sus evaluaciones no es fácil, ya que tiene que buscar en cada correo.
- The reports she gets from trainers or nutritionists arrive as attachments that get lost.
- It's not easy to compare one assessment with another.
- Sharing her assessments isn't easy, since she has to dig through each email.
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.
- Keep up a workout routine without losing motivation.
- Track her progress easily.
- Find other people who share her lifestyle.
- Stay informed through reliable sources.
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. 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. 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— y agregué una sección de Configuración con cambio de contraseña, ausente en la versión original.
The second critical point was reaching the report. I redesigned the bottom menu with three direct shortcuts — Reports, Summary, and My Professionals — and added a Settings section with password change, absent from the original version.
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.
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, algo que la versión original no ofrecía.
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, something the original version didn't offer.
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
- v0.app