Mi participación
Lideré el diseño UX/UI y la implementación frontend de las interfaces de acceso y cambio de clave. Mi participación incluyó revisión de referentes, diseño de estados e interacciones y construcción de interfaces con Vue.js y Ant Design Vue.
Colaboré con el equipo en el análisis del problema, la ideación y la definición de alternativas. Ese trabajo compartido permitió discutir el contenido, la interacción y las consideraciones de implementación desde distintas disciplinas.
Revisión de referentes
Como parte de mi trabajo revisé experiencias de acceso de otras AFP. La lectura de referentes permite comparar cómo se presentan los campos, qué vocabulario utiliza cada interfaz y dónde se sitúa la alternativa para recuperar una cuenta.
La tabla compara elementos visibles en capturas históricas de entrada de Cuprum, Capital y Habitat con campos vacíos. Los diseños pertenecen a sus respectivas entidades. Esta síntesis editorial no reproduce puntuaciones ni conclusiones internas y no valida las versiones actuales de esos servicios. «No visible en esta captura» no significa que una función no exista en el servicio.
Comparación descriptiva de referentes de acceso
| Criterio | Cuprum | Capital | Habitat |
|---|---|---|---|
| Campos visibles | RUT y clave | RUT y clave | RUT y clave |
| Perfiles visibles | No visibles en esta captura | Personas y Beneficiarios | No visibles en esta captura |
| Texto de recuperación | Recuperar clave de acceso | Solicita o recupera tu clave | ¿Olvidaste tu clave? |
| Acción principal | Ingresar | Iniciar sesión | Ingresar |
| Ayuda adicional visible | No visible en esta captura | No visible en esta captura | Consejos de seguridad |
Las pruebas moderadas fueron realizadas por el equipo UX. Mi responsabilidad fue incorporar los ajustes de diseño derivados de ese trabajo y trasladarlos a la interfaz. La tabla siguiente distingue mi contribución directa de las actividades realizadas en colaboración.
Mi contribución en acceso digital
| Ámbito | Mi contribución |
|---|---|
| Diseño UX/UI | Diseño de interfaces e interacciones. |
| Frontend | Implementación de las interfaces trabajadas. |
| Colaboración | Participación en la definición de alternativas. |
| Iteración | Incorporación de ajustes derivados del trabajo del equipo UX. |
Claridad en cada interacción
En la pantalla inicial revisé la relación entre el formulario y los contenidos de orientación: qué se lee primero, cómo se identifica el acceso y dónde aparece la alternativa de recuperación. El diseño de esa primera pantalla debe permitir reconocer la tarea antes de introducir información.
Recuperación y continuidad visual
Mi participación también abarcó el diseño de la experiencia de cambio de clave. En este tipo de tarea presto atención a la continuidad entre pantallas: mantener un vocabulario reconocible, distinguir las instrucciones de las acciones y dar contexto a la información solicitada.
El acceso y la recuperación deben poder leerse como partes relacionadas de una misma experiencia. La alternativa para recuperar la cuenta necesita ser reconocible desde la pantalla inicial, mientras que las ayudas deben acompañar la tarea sin competir con el formulario.
En las capturas de las pantallas públicas se puede observar cómo se distribuyen el formulario, la alternativa de recuperación y el contenido de apoyo. Utilizo estas vistas para explicar jerarquía y composición, sin atribuir a la comparación visual resultados de satisfacción o desempeño.
Del diseño al frontend
Diseñar el comportamiento, además de la pantalla
Mi trabajo frontend incluyó trasladar las interfaces a componentes y comportamientos de interacción. Esto requiere revisar cómo se relacionan las etiquetas, las ayudas, los controles y los mensajes, y cómo se expresa cada estado en pantalla.
Considero la consistencia entre lo diseñado y lo construido como parte del trabajo de producto: un componente debe conservar una relación clara entre su función, su apariencia y su respuesta a la interacción. Esta perspectiva me permitió acompañar la definición visual y su implementación.
El siguiente mapa resume dimensiones generales que considero al revisar un formulario: etiquetas, ayudas, acciones y estados. No representa hallazgos, prioridades ni puntuaciones del proyecto.
Lectura conceptual de una interfaz
La vista completa siguiente sitúa el formulario dentro de la página pública. El encabezado de acceso, los perfiles disponibles, la alternativa de recuperación y el pie de página forman parte del contexto de lectura antes de que la persona introduzca información.
Relación conceptual entre diseño, implementación y revisión
Alcance y reflexión
El proyecto fue implementado. Las ideas de evolución exploradas durante el trabajo no se presentan como funcionalidades lanzadas.
Del trabajo del equipo UX a la iteración
Participé en el ajuste del diseño a partir de pruebas moderadas realizadas por el equipo UX. Mi aporte estuvo en convertir ese trabajo en cambios de interfaz y acompañar su implementación; la conducción de las sesiones correspondió al equipo.
Esta relación entre revisión y construcción forma parte de mi enfoque: comunicar el comportamiento esperado, contrastarlo con la interfaz y revisar los ajustes necesarios. El diagrama anterior representa esa relación conceptual entre disciplinas, no una reconstrucción del proceso interno ni evidencia de resultados.
Esta experiencia consolidó mi forma de trabajar entre diseño e implementación: especificar el comportamiento, revisar su expresión en pantalla e incorporar los ajustes del equipo UX.
El siguiente ciclo explica una relación general entre observación y diseño. Es un esquema conceptual: no reconstruye el guion, las tareas ni el calendario del estudio realizado por la organización y no representa resultados medidos.
Ciclo conceptual de revisión e iteración
Alcance del caso
Por acuerdos de confidencialidad, este caso presenta una selección acotada del trabajo realizado. Se omiten datos, documentación y detalles internos.