Bupa Seguros — rediseño de onboarding
Bupa Seguros — onboarding redesign
Contexto
Context
Con el cambio de proveedor de seguros llegó una app nueva, y el onboarding se sintió mal resuelto desde el primer uso: bajo contraste, jerarquías poco claras. Era la puerta de entrada a la confianza del usuario, así que decidí intervenirla.
With the change of insurance provider came a new app, and the onboarding felt poorly resolved from the very first use: low contrast, unclear hierarchy. It was the gateway to the user's trust, so I decided to step in.
Problemas detectados
Problems found
- Bajo contraste en textos sobre fondos poco adecuados.
- Inconsistencias visuales en color y jerarquías tipográficas.
- Márgenes desproporcionados que afectaban la legibilidad.
- El onboarding no aprovechaba la oportunidad de reforzar la identidad de marca.
- Low contrast in text over poorly suited backgrounds.
- Visual inconsistencies in color and typographic hierarchy.
- Disproportionate margins that hurt readability.
- The onboarding missed the opportunity to reinforce brand identity.
Qué hice
What I did
Dividí el trabajo en tres partes: primero acotar el alcance real del rediseño, luego resolver la base visual, y recién ahí construir los componentes sobre esa base.
I split the work into three parts: first bound the redesign's real scope, then solved the visual foundation, and only then built the components on top of it.
1. Estudio de flujo
1. Flow study
Mapeé el flujo de login de la app para definir qué quedaba dentro del alcance de este rediseño y qué no. A nivel de navegación la app ya estaba suficientemente resuelta, así que este estudio sirvió más para acotar el scope que para rediseñar la lógica del flujo.
I mapped the app's login flow to define what fell inside this redesign's scope and what didn't. Navigation-wise the app was already reasonably solid, so this study served more to bound the scope than to redesign the flow's logic.
2. UI kit
2. UI kit
Un estudio visual de la app actual — color y tipografía — para estandarizar antes de construir los prototipos de alta fidelidad. A nivel de navegación la app estaba resuelta, así que el foco estuvo en mejorar la apariencia sin tocar la estructura.
A visual study of the current app — color and typography — to standardize before building the high-fidelity prototypes. Navigation-wise the app was already solid, so the focus was on improving the look without touching the structure.
| EstiloStyle | MuestraSample | TamañoSize | PesoWeight |
|---|---|---|---|
| H1 | Aa | 36px | Semibold |
| H2 | Aa | 29px | Semibold |
| H2 | Aa | 29px | Bold |
| H3 | Aa | 23px | Semibold |
| H3 | Aa | 18px | Semibold |
| Body 1 | Aa | 15px | Regular |
| Body 1 | Aa | 12px | Regular |
| Body 1 | Aa | 12px | Semibold |
Tipografía: Montserrat.
Typeface: Montserrat.
3. Diseño de componentes
3. Component design
Con el alcance acotado y el UI kit definido, diseñé los componentes de las pantallas de login y recuperación de contraseña — buscando un aspecto visual coherente con la marca pero claro, sin sobrecargar de información una experiencia que debía sentirse simple.
With the scope bound and the UI kit defined, I designed the components for the login and password-recovery screens — aiming for a look coherent with the brand but clear, without overloading with information an experience that needed to feel simple.
Conclusión
Conclusion
La propuesta resuelve el problema de marca con una paleta alineada a su identidad, corrige el contraste y la jerarquía, y deja una interfaz más contemporánea.
The proposal resolves the brand problem with a palette aligned to its identity, fixes contrast and hierarchy, and leaves a more contemporary interface.
Herramientas
Tools
Figma