Rediseñando la Agencia Tributaria — VISUAL(UI)
Siguiendo la metodología Design Thinking
La Agencia Tributaria, ese sitio al que todos tenemos que recurrir tarde o temprano y que a la mayoría nos cuesta entender.
En mi artículo anterior “Rediseñando la Agencia Tributaria — RESEARCH (UX)” te mostré todo el proceso que seguí para analizar, investigar y descubrir todos aquellos puntos que dificultan la experiencia a la hora de realizar cualquier trámite online.
A continuación, te mostraré cual fue mi propuesta de diseño para mejorar la experiencia de los usuarios.
¿POR DÓNDE EMPEZAMOS?
Gracias a la investigación previa, pudimos observar que uno de los problemas principales que encontramos es que la web actual está enfocada en las necesidades estado, no en las del usuario.
Por ello, consideré que era fundamental rediseñar los siguientes puntos:
📍 Rediseño de la Home.
📍 Sede electrónica más usable y personalizada.
📍 Buscador avanzado optimizado.
🎨 WIREFRAMES
Antes de realizar el diseño final, realicé una serie de wireframes (low-fi). Gracias a ello, podemos plasmar las diferentes funcionalidades que deberá tener nuestra web y hacer el primer acercamiento al diseño de alta fidelidad (hi-fi).
HOME
Para comenzar, realicé un primer esbozo de la página principal (home).
Este nuevo diseño persigue el objetivo de mostrar la información de una manera más clara y sencilla, centrada principalmente en las necesidades de los usuarios.
Para organizar la información, he distribuido la información de la siguiente manera:
- Header, donde aparecerá el logo y los accesos directos a las páginas con mayor importancia.
- Un buscador, dado que durante la parte de Research vimos que gran parte del tráfico recurre al buscador, decidí darle una mayor importancia colocándolo en primer lugar.
- Accesos directos más destacados, donde aparecerán los accesos a los trámites más frecuentes (renta, calendario, contacto…)
- Acceso a la nueva Sede Electrónica, la cual detallaremos más adelante en profundidad.
- Accesos directos a los servicios, con una breve descripción de cada uno de ellos.
- Finalmente, aparecerán las vías a través de las cuales podemos contactar con la entidad.
SEDE ELECRÓNICA
Otro de los grandes cambios que propongo para este rediseño es la nueva Sede Electrónica, la cual será más accesible mostrando la información relevante para el usuario, según sus características, trámites disponibles, etc. Ya que no serán los mismos trámites los que tenga que realizar una entidad, a los que realice una persona física.
- Al registrarnos con Cl@ve o DNI Electrónico, aparecerá nuestro nombre, los cual ya será una puerta de bienvenida a un servicio más personalizado.
- Pestañas con las diferentes funcionalidades, las cuales ya se ofrecen en la sede actual, pero que son difíciles de encontrar y con la información desordenada.
- Dentro de cada funcionalidad, aparecerán los datos pertinentes de cada usuario y los trámites que tiene disponibles según su perfil.
- Finalmente, como pié de página, aparecerá el footer con el logo y accesos directos. Esta sección aparecerá en todas las páginas.
BUSCADOR
Por último, planteé el rediseño del buscador avanzado, ya que, en la parte del análisis, me encontré con la problemática de que muchos usuarios preferían recurrir a otros buscadores como Google dada la dificultad y poca precisión que ofrece el actual buscador de la Agencia Tributaria.
- En la primera sección aparece un pequeño buscador donde el usuario realizará su búsqueda.
- Para ofrecer una mayor precisión, las búsquedas podrán acotarse según diferentes filtros.
- Aparecerán los resultados de las búsquedas de una forma más optimizada. Primeramente aparecerá el nombre de la página, seguida de una breve descripción y con su respectiva de publicación o actualización.
🖥 PROTOTIPO
Ahora sí que sí, llegó el momento de pasar todo lo que hemos podido observar durante el research a la acción.
LOGOS
Para empezar el cambio de imagen de la Agencia Tributaria, modifiqué el actual logo, siguiendo el patrón de diseño ofrecido por el Gobierno de España.
En la parte superior la imagen encontramos el actual logo. Bajo él, aparece la nueva propuesta de logo, pero ¿por qué cambiarlo?
Pues bien, existen diferentes motivos por los cuales la modificación de este sería beneficioso.
Primeramente, el logo modificado ofrece su versión vectorizada (svg), por lo tanto, al tener mayor calidad, no aparecería la imagen pixelada y la comprensión del texto sería mucho más fácil, además de mejorar su apariencia visual.
También encontramos una mejora de sintonía en los colores, aliviando la saturación de colores general de toda la página.
Para seguir con la renovación de la imagen de la entidad, y dada la importancia de esta nueva sección en el rediseño propuesto, me decidí a modificar también el logo de Sede Electrónica.
La finalidad principal de este cambio, aparte de ofrecer la versión svg, es la de ofrecer mayor sintonía entre los logos y el resto de la página.
Además, en esta ocasión propongo dos alternativas de logo, las cuales se adaptarán según el espacio disponible para estos. La primera, más lineal, iría destinado a espacios más pequeños como botones, por ejemplo. La segunda opción aparecería en espacios de la web con mayor espacio para el logo y donde este enlace tenga mayor relevancia.
NUEVO DISEÑO
¡Es hora de ver el resultado final!
En el siguiente video, mostraré el resultado del rediseño de la página. En este podremos observar tres partes diferentes:
🏠 Nueva Home, con la nueva distribución de la información y los enlaces.
👤 Acceso/registro de la nueva Sede Electrónica y como sería la distribución de ella una vez registrados.
🔍 Rediseño del Buscador, con una optimización de la información de resultados.
- Home: En la página principal encontramos una nueva reorganización del contenido. Para empezar, aparecerá un buscador, ya que, como pudimos ver en el análisis de la web actual, es la sección a la que más recurren los usuarios. Después, se muestra una serie de enlaces a trámites o consultas que la gente mas utiliza. Seguido a este, encontramos un Call to action a la Sede Electrónica, para aportarle mayor relevancia a este servicio. Finalmente se mostrarán todos los enlaces de interés, con una breve descripción de estos mismos y, seguidamente, todas las vías de contacto existentes.
- Sede Electrónica: El primer cambio significativo de este portal es la simplificación de acceso/registro y la facilidad para obtener el código Cl@ve, ya que actualmente es un proceso muy tedioso. Una vez dentro de nuestro portal, aparecerá de una manera muy simple y visual todos nuestros datos, documentos, trámites posibles según nuestro perfil, asistencia online y una ventana para facilitar la modificación de datos de una manera más simple. Además, se mostrará una pestaña con preguntas frecuentes relacionadas con el perfil del usuario.
- Buscador: El nuevo buscador tiene la finalidad de facilitar al usuario encontrar lo que busca. En este aparecerán una serie de filtros que permitirán acotar los resultados mostrados. Además, los resultados se mostrarán de una manera más simple, con un titulo breve, descripción optimizada y la fecha de publicación/actualización.
Además, también diseñé una nueva página de error 404. Con esta incorporación, lo que buscamos es ofrecerle alguna alternativa de búsqueda al usuario cuando la página que busca no existe o ya no está disponible.
Gracias a esta nueva página, el usuario tendrá dos opciones: volver a la pantalla de inicio o bien, realizar una consulta específica a través del buscador.
SISTEMA DE DISEÑO
Para garantizar un diseño lo más optimo posible, utilicé el sistema de diseño de Atomic Design. Este método de diseñar sitios web consiste en comenzar el diseño desde lo más pequeño (átomos), agrupándolos (moléculas), hasta llegar al diseño final. Gracias a este sistema podremos modificar los elementos de manera más flexible, rápida y precisa.
En el siguiente enlace podrás ver mi diseño realizado en Figma.
Para empezar realizamos los átomos, donde disponemos cada elemento de manera independiente. Todos estos elementos están componetizados, y cualquier alteración que se realice sobre estos, modificará todos los componentes hijos que se hayan aplicado en el diseño.
Estos elementos se agrupan formado moléculas, las cuales representan un conjunto de elementos que los cuales van a estar siempre dispuestos de la misma manera. Al crear componentes en grupo, con sus respectivas variantes (variants), nos aseguramos que estas agrupaciones tengan siempre las mismas propiedades y, así, conseguir un diseño homogéneo.
Por último, establecí un estilo que deberá seguir el diseño de todas las páginas de que contenga la web. Por un lado establecí los colores, diferenciándolos entre primarios (de mayor importancia), secundarios y colores neutros.
También consideré necesario establecer la tipografía según la jerarquía del texto pertinente. Gracias a esto, garantizamos que la web tenga la misma consistencia entre las diferentes páginas, además de facilitarle el trabajo al equipo de desarrollo.
Por último, utilicé el sistema de diseño de Bootstrap, con una grid de 12 columnas, width de 65 y un gutter de 30. Este sistema nos ayuda en la disposición del contenido y su adaptación a diferentes dispositivos (responsive).
¿CÓMO PODRÍAMOS MEJORAR?
Ahora que ya hemos visto todo el proceso hasta llegar a la propuesta final del diseño, planteé una serie de futuribles que consideré necesarios dada la investigación realizada.
- Mejora de la aplicación móvil. Dado el aumento de búsquedas a través de dispositivos móviles, considero necesaria la actualización de la nueva app, ya que actualmente solo se centra en la Declaración de la Renta y, para otros trámites, te redirige a la web actual.
- Optimización de las búsquedas por voz. Como hemos visto, se estima que las búsquedas podrían llegar a alcanzar el 50% de las búsquedas totales. Por lo tanto, ofrecer una plataforma optimizada a estos nuevos sistemas podría llegar a ser necesaria para garantizar una buena experiencia de los usuarios.
- Despliegue de servicios relacionados con la ubicación. Como futura mejora de la Sede Electrónica, propongo la incorporación de un localizador que te ofrezca los servicios más cercanos. De esa manera, podríamos llegar a mejorar la atención al cliente y la rapidez ofrecida de los servicios.
Así es como concluye mi proceso de diseño. ¡Si te perdiste el artículo donde muestro todo el proceso de investigación no dudes en ir a verlo!
Si has llegado hasta aquí muchas gracias por leer este post. ¡Espero que te haya gustado a ti tanto como a mi hacerlo! 😊
