## Contexto

**TIMining Aware** es un gemelo digital de la mina diseñado para proporcionar conciencia situacional a sus usuarios. A través de una investigación de usuarios, identificamos la necesidad de optimizar el proceso de actualización. Actualmente, este requiere instalar un ejecutable cada vez que se libera una nueva versión, lo que resulta en una experiencia menos ágil de lo esperado.

## Investigación

### Entrevistas

Nos propusimos realizar **3 horas semanales de entrevistas con usuarios**, siguiendo las recomendaciones del libro *Inspired* de [Marty Cagan](https://www.google.com/search?q=Marty+Cagan&stick=H4sIAAAAAAAAAOPgE-LRT9c3NEoqKrLMS05W4gXxDNPMi_OyjcxTtGSyk630k_Lzs_XLizJLSlLz4svzi7KtEktLMvKLFrFy-yYWlVQqOCemJ-btYGUEAHhXvQlOAAAA&sa=X&ved=2ahUKEwjG76K9p-71AhVlrpUCHfn2D8QQmxMoAXoECB4QAw). Esto se tradujo en 6 entrevistas de 30 minutos cada una.

El objetivo principal fue levantar impresiones generales y entender el valor que los usuarios perciben del producto, utilizando preguntas basadas en el [Test de Sean Ellis](https://www.emprendeaconciencia.com/herramienta-test-de-sean-ellis).

En cada entrevista participó al menos un miembro de los equipos clave: **el Product Manager, un UX/UI Designer y un Desarrollador.**

## Definición

A partir de una muestra significativa de entrevistas, identificamos oportunidades de mejora y problemas clave. Estas ideas se plasmaron en una matriz de **Valor/Costo**, lo que nos permitió definir líneas de trabajo con alto potencial de impacto para nuestros usuarios.

Uno de los problemas recurrentes fue *la dificultad para actualizar el software*, una barrera percibida debido a la dependencia del área de TI en las organizaciones.

Como solución, decidimos diseñar y construir un sistema **Launcher** que facilite actualizaciones más automatizadas. Además, definimos las hipótesis, el alcance, los equipos involucrados y los plazos de trabajo.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F6M1LKqOPB0dKmQPezOWapMORvHp1%2F1vsizSp8zTnbZoIkzLfR%2F124ead0c-4ff7-4e4c-aad2-ea4e29e8fd38.png?alt=media&token=b2fe4790-6a7c-4a26-88b6-d751d853b2dd","id":"124ead0c-4ff7-4e4c-aad2-ea4e29e8fd38","width":868,"height":811,"filename":"matriz.png","type":"image/png","caption":"","border":false}]}
```

## Diseño de la solución

### Flujo

En colaboración con el equipo de desarrollo, se revisó la arquitectura del código para comprender detalladamente cómo se construiría este lanzador, cómo funcionaría y en qué momentos se ejecutaría y cerraría.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F6M1LKqOPB0dKmQPezOWapMORvHp1%2F1vsizSp8zTnbZoIkzLfR%2Fadbf0664-f518-404f-ac11-bf86c991ac3a.png?alt=media&token=c5ec2268-f2aa-4382-b747-87d2bd317ab4","id":"adbf0664-f518-404f-ac11-bf86c991ac3a","width":1000,"height":406,"filename":"flujo.png","type":"image/png","caption":"","border":false}]}
```

### Diseño UI

**Referentes**

Finalmente se comenzó con el diseño del launcher. Lo primero fue revisar **referentes** y entender el comportamiento de ellos

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F6M1LKqOPB0dKmQPezOWapMORvHp1%2F1vsizSp8zTnbZoIkzLfR%2Fc62f165e-1014-4ae5-855b-b3543cb25e10.png?alt=media&token=17b1b69c-699f-4f29-98c0-00017ea037a0","id":"c62f165e-1014-4ae5-855b-b3543cb25e10","width":2000,"height":811,"filename":"referentes.png","type":"image/png","caption":"","border":false}]}
```

**User Flow**

Luego definimos el alcance y objetivos para poder definir qué debía contener y qué no. Identificamos casos de borde para complementar el flujo del usuario el que se graficó en un **User Flow**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F6M1LKqOPB0dKmQPezOWapMORvHp1%2F1vsizSp8zTnbZoIkzLfR%2Fc55fdfd0-b398-4a28-9137-e8a6f7313bbc.png?alt=media&token=9d97b545-72e1-4df0-a53c-ff4475342b50","id":"c55fdfd0-b398-4a28-9137-e8a6f7313bbc","width":2000,"height":811,"filename":"userflow.png","type":"image/png","caption":"","border":false}]}
```

**Mockups**

Finalmente se diseñaron las instancias del *launcher* siguiendo el estilo gráfico del Software

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F6M1LKqOPB0dKmQPezOWapMORvHp1%2F1vsizSp8zTnbZoIkzLfR%2Fb1a7712c-089d-4eeb-92d7-b9e5505e3916.png?alt=media&token=c9fb59aa-7647-4100-8bc6-e4e6e7226560","id":"b1a7712c-089d-4eeb-92d7-b9e5505e3916","width":2000,"height":2557,"filename":"finales.png","type":"image/png","caption":"","border":false}]}
```

### Equipo

🏋️‍♀️Product Manager

👨‍💻 Software Engineer

🕵️‍♀️ UI / UX Designer

## Herramientas

[Miro.com](http://Miro.com)

Adobe XD

TIMining Aware Launcher

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F6M1LKqOPB0dKmQPezOWapMORvHp1%2FJhxrKPMicx9y5vBNDcB2%2F21fe6899-63ac-4889-a3f5-a82351cd0897.png?alt=media&token=f8bfff6f-503f-4fce-8456-e15984fb2728","id":"21fe6899-63ac-4889-a3f5-a82351cd0897","width":2000,"height":811,"filename":"portada.png","type":"image/png","caption":"","border":false}]}
```

## Contexto

**5Componentes** es una aplicación chilena diseñada para simplificar el proceso de registro y acceso a informes antropométricos, **dirigida a profesionales de la nutrición, como nutricionistas y nutriólogos, así como a sus pacientes**

5Componentes es una aplicación que distingue claramente entre dos roles de usuario: Paciente y Profesional. Debido a la falta de usuarios profesionales disponibles para la investigación, nos centraremos exclusivamente en las necesidades y experiencias de los pacientes. Esto implica que algunos aspectos, especialmente aquellos relacionados con la visualización de datos y la arquitectura de la información, no serán objeto de rediseño.

Cabe destacar que este breve estudio se trata simplemente de un ejercicio exploratorio y no implica ningún compromiso por parte de los creadores de la aplicación.

## ¿Qué tenemos?

### UI Actual

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F6M1LKqOPB0dKmQPezOWapMORvHp1%2FJhxrKPMicx9y5vBNDcB2%2Fa248d0ba-bdeb-4aec-ad52-d0f39f682abf.png?alt=media&token=d62614fa-748d-46a5-92f6-95eae1f274ec","id":"a248d0ba-bdeb-4aec-ad52-d0f39f682abf","width":1612,"height":789,"filename":"ui anterior.png","type":"image/png","caption":"","border":false}]}
```

### User Flow

Elaboré un flujo de usuario para obtener una comprensión más completa del contenido de la aplicación, al mismo tiempo que definí el alcance del proceso de rediseño

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F6M1LKqOPB0dKmQPezOWapMORvHp1%2FJhxrKPMicx9y5vBNDcB2%2F8ee8880c-aa6f-42ac-9e85-501784082c2c.png?alt=media&token=ddc36764-b834-4a16-9e65-f68ee969eed6","id":"8ee8880c-aa6f-42ac-9e85-501784082c2c","width":3560,"height":2301,"filename":"Untitled (1).png","type":"image/png","caption":"","border":false}]}
```

## Investigación

### ¿Por qué debemos mejorar la aplicación? - Prueba de Usabilidad

A simple vista, esta aplicación puede no resultar estéticamente atractiva, sin embargo, con el objetivo de realizar mejoras que no se centren exclusivamente en el diseño visual, se llevó a cabo una breve investigación de la experiencia del producto, por lo que se realizó una prueba de usabilidad.

***Información del Test de Usabilidad para la Aplicación "5Componentes"\
Participante: Mujer, 36 años***

> **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](mailto: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.
>
> **Observaciones:**
>
> * 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.

### ¿Quiénes son los usuarios? User Persona

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

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F6M1LKqOPB0dKmQPezOWapMORvHp1%2FJhxrKPMicx9y5vBNDcB2%2Fe1942ffd-cf16-4fb4-a0a2-d77f6e6d4194.png?alt=media&token=34bdbbdc-12e6-45aa-b0cf-fe1131565894","id":"e1942ffd-cf16-4fb4-a0a2-d77f6e6d4194","width":3080,"height":1514,"filename":"Untitled (2).png","type":"image/png","caption":"","border":false}]}
```

### La experiencia, User Journey

Después de definir al usuario, procedí a revisar y representar en este User Journey Map cuáles son las etapas necesarias para que el usuario logre su objetivo de visualizar su informe antropométrico. Este ejercicio permite identificar los puntos problemáticos en la experiencia del usuario, aquellos que generan molestias o dificultades.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F6M1LKqOPB0dKmQPezOWapMORvHp1%2FJhxrKPMicx9y5vBNDcB2%2Fb76a2fbc-2398-4996-ab4f-a42db7f36ea9.png?alt=media&token=32b72dca-d009-4167-a381-03efd71d3174","id":"b76a2fbc-2398-4996-ab4f-a42db7f36ea9","width":6304,"height":2693,"filename":"Untitled (3).png","type":"image/png","caption":"","border":false}]}
```

Basándome en este User Journey Map, existen dos puntos críticos para mejorar la experiencia de usuario:

1. El proceso de registro

2. Acceso al informe

### Recapitulemos

Después de una acotada investigación de la experiencia del usuario, identifiqué las áreas clave que requieren mejoras significativas en la aplicación. La prioridad principal es satisfacer la necesidad fundamental del usuario de acceder de manera fácil y clara a sus informes y comprenderlos de forma sencilla. A continuación, destacamos los puntos críticos que deben abordarse:

1. **Claridad en el Registro de Nuevos Usuarios:** Hemos observado que el proceso de registro como nuevo usuario no es lo suficientemente claro y directo. Para garantizar una experiencia más fluida, se requerirá una revisión integral de este proceso, haciendo hincapié en la simplicidad y la claridad de las instrucciones.

2. **Flujo de Usuarios Óptimos:** El camino que los usuarios deben seguir para acceder a la información valiosa en la aplicación necesita una optimización. Abogando por un flujo de usuarios más intuitivo que les permita llegar de manera eficiente a los datos que buscan, minimizando pasos innecesarios y obstáculos.

3. **Estética General de la Aplicación:** La estética de la aplicación es un aspecto importante para la satisfacción del usuario. Se buscará mejorar la apariencia general de la aplicación, creando un entorno agradable y atractivo que mejore la experiencia del usuario.

## Nueva experiencia

### Wireframes

Los siguientes wireframes presentan una propuesta de modificación en el flujo de la aplicación, donde se enfatizan las tres opciones disponibles: 'Soy paciente', 'Soy evaluador' o 'No tengo cuenta'. De esta manera, se resalta la importancia de la creación de una cuenta y se elimina la confusión que solía generarse al mostrar el inicio de sesión de inmediato.

Adicionalmente, se introduce una alternativa de navegación que incluye un menú más amplio y de fácil acceso, mejorando así la experiencia del usuario en la aplicación.

No se incluyen todas las pantallas que conforman la aplicación en su totalidad, en su lugar, he seleccionado las más representativas para su rediseño.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F6M1LKqOPB0dKmQPezOWapMORvHp1%2FJhxrKPMicx9y5vBNDcB2%2Fa54901aa-e99e-468f-a1db-2774e25ea9aa.png?alt=media&token=cdce38da-7842-43b3-8d88-3b5a5e1491df","id":"a54901aa-e99e-468f-a1db-2774e25ea9aa","width":2992,"height":4118,"filename":"Untitled (4).png","type":"image/png","caption":"","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F6M1LKqOPB0dKmQPezOWapMORvHp1%2FJhxrKPMicx9y5vBNDcB2%2Fb3d4cf2f-75a7-4adb-8a48-fad322e4c174.png?alt=media&token=7256f9d8-1d74-4f1f-b0e7-d5736ca2daaa","id":"b3d4cf2f-75a7-4adb-8a48-fad322e4c174","width":2992,"height":4120,"filename":"Untitled (5).png","type":"image/png","caption":"","border":false}]}
```

### Style Guide

Se propone desarrollar una **guía de estilos** que establezca una nueva línea gráfica más atractiva y coherente, con el objetivo de fortalecer la identidad visual

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F6M1LKqOPB0dKmQPezOWapMORvHp1%2FJhxrKPMicx9y5vBNDcB2%2F734904d0-d31e-4fcb-bb40-12f306d8e4cc.png?alt=media&token=6eaff567-3036-450f-9435-c3e8dc2fd6ee","id":"734904d0-d31e-4fcb-bb40-12f306d8e4cc","width":1287,"height":2384,"filename":"Untitled (6).png","type":"image/png","caption":"","border":false}]}
```

### Mockups

**On boarding**

Se implementó un cambio estético principal que redefine su apariencia de manera contemporánea y llamativa.

En el proceso de onboarding, se introdujo un paso adicional utilizando el principio de Progressive Disclosure, donde el usuario ahora tiene la tarea de seleccionar el tipo de sesión que desea iniciar. Este enfoque progresivo garantiza una experiencia más intuitiva y personalizada, al presentar la información de manera gradual, de acuerdo con las necesidades del usuario.

Además, se ha mejorado la claridad en la posibilidad de crear una cuenta, facilitando aún más el proceso para los usuarios. Ahora, la opción de registro se presenta de manera más destacada, permitiendo a los usuarios descubrir y aprovechar esta funcionalidad de manera más efectiva

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F6M1LKqOPB0dKmQPezOWapMORvHp1%2FJhxrKPMicx9y5vBNDcB2%2Fb7732cbb-b461-4710-b5ae-b368791827e8.png?alt=media&token=dd68fc67-457d-4f97-bd5e-7e1c1c0fd8f5","id":"b7732cbb-b461-4710-b5ae-b368791827e8","width":1259,"height":789,"filename":"Untitled (7).png","type":"image/png","caption":"","border":false}]}
```

**Logged in**

mejoras significativas para una experiencia de usuario más intuitiva y agradable. El cambio más destacado se refiere a la implementación de un menú inferior que no solo es más claro, sino también más accesible, facilitando la navegación y el acceso a las funciones principales de manera más eficiente. A demás se añadió la posibilidad de ingresar a una configuración donde se puede cambiar la contraseña de la cuenta, posibilidad que no ofrece la aplicación original.

Además, se ha priorizado la legibilidad y la comprensión al aumentar el tamaño y claridad de los textos en toda la interfaz. Esta mejora no solo beneficia a aquellos usuarios que prefieren una visualización más grande, sino que también contribuye a una experiencia más cómoda y sin esfuerzo para todos.

La interfaz en su conjunto ha sido refinada para ofrecer un diseño más atractivo. La combinación de colores, la disposición de elementos y la atención al detalle en el diseño global han sido optimizados para lograr una estética más agradable y moderna.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F6M1LKqOPB0dKmQPezOWapMORvHp1%2FJhxrKPMicx9y5vBNDcB2%2F02c2490d-223b-4749-93b6-c3bf74788e98.png?alt=media&token=6830397f-de97-4fda-807d-eb841d389105","id":"02c2490d-223b-4749-93b6-c3bf74788e98","width":981,"height":1339,"filename":"Untitled (8).png","type":"image/png","caption":"","border":false}]}
```

### Herramientas

## Conclusiones

Ejercicio personal - 5Componentes

Aquí podrás ver una muestra de diseños que buscan reflejar la identidad y esencia de cada marca. Cada proyecto ha sido trabajado con cuidado para lograr soluciones simples y efectivas.

### **Agora Reciclada**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F6M1LKqOPB0dKmQPezOWapMORvHp1%2FOQXMNEiGs8WOYAkNyPI2%2F3b1950e5-f8ab-4e1f-a753-33466345c301.png?alt=media&token=84897798-dbcb-4238-a414-1fc59f5a8942","id":"3b1950e5-f8ab-4e1f-a753-33466345c301","width":1000,"height":638,"filename":"logo.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F6M1LKqOPB0dKmQPezOWapMORvHp1%2FOQXMNEiGs8WOYAkNyPI2%2Fb9dc2edf-76f5-466e-be2c-0295349d57b1.png?alt=media&token=ba9901bb-a775-41a0-b2f7-9ecd52480e46","id":"b9dc2edf-76f5-466e-be2c-0295349d57b1","width":557,"height":516,"filename":"Untitled (1).png","type":"image/png","caption":"","border":false}]}
```

Se diseñó un logotipo para una tienda de ropa usada ubicada en el barrio Patronato, reflejando su estilo único y su compromiso con la moda sostenible en un entorno vibrante y culturalmente diverso.

### **Boabó**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F6M1LKqOPB0dKmQPezOWapMORvHp1%2FOQXMNEiGs8WOYAkNyPI2%2Fd88c2750-7591-44d6-a505-b47b35c9039c.png?alt=media&token=31b614e5-05a7-44ad-a503-14761f42202a","id":"d88c2750-7591-44d6-a505-b47b35c9039c","width":2160,"height":1324,"filename":"boabo_Mesa de trabajo 1.png","type":"image/png","caption":"","border":false}]}
```

**Boabo** es un programa de beneficios diseñado para propietarios de vehículos, tanto particulares como comerciales, que ofrece una variedad de productos y servicios adaptados a las necesidades específicas de cada vehículo.

### **Fundación Fau**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F6M1LKqOPB0dKmQPezOWapMORvHp1%2FOQXMNEiGs8WOYAkNyPI2%2F180e5fa2-40a1-480b-b6d0-6a69b2cb5653.png?alt=media&token=97687c75-cf7c-4370-adc3-bf220317f172","id":"180e5fa2-40a1-480b-b6d0-6a69b2cb5653","width":856,"height":811,"filename":"ffau.png","type":"image/png","caption":"","border":false}]}
```

Diseño de un logotipo para la Fundación de la Facultad de Arquitectura y Urbanismo de la Universidad de Chile, desarrollado como parte de mi pasantía.

Logotipos

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F6M1LKqOPB0dKmQPezOWapMORvHp1%2Fbupa%2F9e8912b2-e45e-49fb-ad46-e2ef8d579340.png?alt=media&token=3bfe6356-8d12-401e-8ae1-dce58462f581","id":"9e8912b2-e45e-49fb-ad46-e2ef8d579340","width":2000,"height":811,"filename":"portada.png","type":"image/png","caption":"","border":false}]}
```

### Contexto

Con el cambio de proveedor de seguros, se nos presentó como ventaja la incorporación de una aplicación móvil para facilitar la gestión de nuestros servicios. Sin embargo, durante su uso, se observó que la experiencia no era la óptima, ya que se identificaron varios aspectos que dificultaban una interacción eficiente y fluida. Esto dejó en evidencia áreas de mejora importantes para que la herramienta cumpla con las expectativas y necesidades de los usuarios.

### Caso de estudio

Bupa Seguros es una app que permite realizar distintos trámites. Durante su uso se identificaron algunas oportunidades de mejora que para este caso se enmarcarán en el Onboarding:

* Textos sobre fondos que no garantizan un contraste óptimo para su lectura.

* Inconsistencia de colores y tamaños tipográficos

* Uso deficiente de márgenes

* Mal aprovechamiento de la instancia para potenciar la identidad de marca

## Pantallas actuales

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F6M1LKqOPB0dKmQPezOWapMORvHp1%2Fli9CaZAMhEZ8y8c8iO84%2Ff2e698de-e584-401a-b4eb-54b3e2cf28ba.png?alt=media&token=b87379b8-23ce-4a3b-8275-5b039fd87864","id":"f2e698de-e584-401a-b4eb-54b3e2cf28ba","width":1259,"height":789,"filename":"actuales.png","type":"image/png","caption":"","border":false}]}
```

### User flow

Para lograr mayor claridad, se elaboró un **user flow** que permitió identificar todas las pantallas involucradas en el proceso de **onboarding**, incluyendo el login. Esto ayudó a delimitar el alcance del proyecto de manera precisa, asegurando que todos los elementos clave fueran considerados.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F6M1LKqOPB0dKmQPezOWapMORvHp1%2Fli9CaZAMhEZ8y8c8iO84%2F8391f5ed-82cc-4643-b653-832eaf415e7e.png?alt=media&token=aded08e9-b078-4de6-8a25-776f7c0f36a0","id":"8391f5ed-82cc-4643-b653-832eaf415e7e","width":1287,"height":546,"filename":"userflow.png","type":"image/png","caption":"","border":false}]}
```

### Style Guide

Se documentaron los aspectos gráficos en una **guía de estilo** con el objetivo de estandarizar elementos visuales y facilitar el proceso de desarrollo de mockups. Esto permitió agilizar la creación de prototipos, asegurando coherencia y eficiencia en el diseño.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F6M1LKqOPB0dKmQPezOWapMORvHp1%2Fbupa%2F066e7d1c-bd31-4d60-9194-5c16a9170f05.png?alt=media&token=2c5d3bdc-2876-44a6-aecc-a7c8a4556186","id":"066e7d1c-bd31-4d60-9194-5c16a9170f05","width":1287,"height":1806,"filename":"styleguide.png","type":"image/png","caption":"","border":false}]}
```

## Prototipos

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F6M1LKqOPB0dKmQPezOWapMORvHp1%2Fli9CaZAMhEZ8y8c8iO84%2F06a70398-13f6-4426-9f41-ea93f4210551.png?alt=media&token=86730434-daa9-4804-acb7-a61b3ea3491e","id":"06a70398-13f6-4426-9f41-ea93f4210551","width":2000,"height":2126,"filename":"MOckups.png","type":"image/png","caption":"","border":false}]}
```

### Conclusiones

### Herramientas

Ejercicio Personal - Bupa Seguros

En ocasiones, los flujos de trabajo no son los ideales y no es posible implementar un proceso completo de experiencia de usuario. En estos casos, las pautas de usabilidad se vuelven esenciales. Aquí presento ejemplos de proyectos en los que tuve que pasar directamente al diseño de la interfaz de usuario.

### **Tabalí**

En 2019, mientras trabajaba en *Intelimedia*, uno de nuestros clientes fue Tabalí. Junto a su equipo de marketing, realizamos mejoras en la presentación de sus productos y optimizamos la experiencia de compra. Entre los ajustes destacados, implementamos sugerencias en el checkout que recomendaban cajas de vinos acordes a los productos seleccionados por los usuarios en su carrito, a demás de presentar la sugerencia en la página de descripción de cada producto. Estos cambios apuntaban principalmente a los objetivos de negocio de aumentar ventas.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F6M1LKqOPB0dKmQPezOWapMORvHp1%2FrejXERTNnCF5mL93MCcb%2F91c0395b-2f68-4066-b376-c434e2a5c686.png?alt=media&token=38790dca-4b0d-4e38-a888-9306a27f4807","id":"91c0395b-2f68-4066-b376-c434e2a5c686","width":9501,"height":7178,"filename":"Portafolio_2019-5.png","type":"image/png","caption":"","border":false}]}
```

### **Pionono**

En 2019, mientras trabajaba en *Intelimedia*, colaboramos con Pionono en una propuesta de mejora para la presentación de sus productos. El proyecto buscó optimizar la forma en que se exhibían.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F6M1LKqOPB0dKmQPezOWapMORvHp1%2FrejXERTNnCF5mL93MCcb%2F6313e016-31dc-436d-bb0d-39f3f0edaad4.png?alt=media&token=077509e6-9235-48b8-b8d3-7857df9cb575","id":"6313e016-31dc-436d-bb0d-39f3f0edaad4","width":9690,"height":6581,"filename":"Portafolio_2019-3.png","type":"image/png","caption":"","border":false}]}
```