Rediseñando la web loteriasyapuestas.es
Arquitectura y leyes de la Gestalt
Metodología
Design thinking a pequeña escala.
Rol
UX Design, UI Design.
Herramientas
Figma, Miro, Whimsical, Octopus, Canva, Google trends.
Timeline
48 horas.
Descripción:
El objetivo es mejorar la jerarquía y organización visual de la página de resultados de Loterías y Apuestas del Estado. https://www.loteriasyapuestas.es/es/resultado
Solución:
Mejorar la usabilidad de la web a través del análisis de fallos, tanto de arquitectura como de interfaz.
El briefing
Se nos pide mejorar la jerarquía y organización visual de la página:
https://www.loteriasyapuestas.es/es/resultados
La página de la que partimos es esta 👇🏼
Para mejorarla vamos a tener en cuenta los siguientes puntos:
- Mejorar la usabilidad.
- Analizar qué falla según las leyes de la Gestalt.
- Mejorar la jerarquía y distribución de los contenidos.
El proceso
Cualquier proyecto requiere de una estructura y clasificación del tiempo y tareas. En este caso opté por los siguientes pasos para desarrollar la nueva imagen de la web:
- Desk research
- Benchmark
- insigths y user persona
- Análisis heurístico y leyes de la gestalt
- Arquitectura y wireframes
- Prototipo
- Design System
- Conclusiones y futuribles
Desk research y benchmark:
En España el gasto en compra de Lotería Nacional a través de Internet en 2016 fue de 8,8 millones de euros de los casi 5.000 millones que se desembolsaron en total, es decir, menos del 0,2% del la cantidad invertida (0,18%, para ser exactos).
Aún así con estos datos, cada vez es mayor el número de usuarios que comprueba los resultados online ya sea en una web o app. Estando esta opción en alza, pero no precisamente en la página oficial de loterías, si no en buscadores de páginas no oficiales como periódicos digitales o similares.
Quizás esto es debido a la gran confusión que crea la página de resultados de la web.
Durante la investigación descubrí que las páginas más demandadas por los usuarios para obtener los resultados son las de los periódicos online.
Insights y user-persona:
Recopilando todos los datos anteriores obtenemos una serie de insights:
- El usuario que quiere comprobar sus boletos introduce las palabras clave en el buscador de google, y accede a la primera página de resultados o SERP.
- La mayoría de usuarios comprueba sus boletos al ir a canjear, o comprar uno nuevo a la administración de loterías física.
He supuesto en base a hipótesis informadas, que tendríamos dos tipos de arquetipo, dividiendo de forma muy general sobre todo en base a rango de edad.
El target más joven no tiene problema en el uso de las nuevas tecnologías y está acostumbrado a las búsquedas en internet, siendo todo más intuitivo para este tipo de usuario.
El usuario de mayor edad, y no acostumbrado del uso de las nuevas tecnologías, prefiere la seguridad de la administración de lotería física.
Con todos estos datos nos enfocaremos en simplificar y aclarar todos los datos y componentes de la página.
Análisis y leyes de la Gestalt:
Volvemos a la web original y empezamos a recorrer los pain points que resultan más visibles y sobre los que aplicaremos posteriormente la mejora.
Resulta necesario aplicar una simplificación de elementos y hacer una mejor jerarquización, y tomaremos como referencia las leyes de la Gestalt.
Arquitectura y wireframes:
La mejor opción en un caso como este, en el que tenemos que reorganizar tantos elementos e información, es realizar un mapa de sitio para poder aclararnos y decidir con qué elementos o funcionalidades nos quedamos o no.
Traducimos todo eso en wireframes para colocar según las leyes del diseño y la arquitectura. Estudiaremos también una guía de estilo y sistema de diseño.
Prototipo:
El resultado es esta propuesta, una página mucho más sencilla y minimalista.
Sistema de diseño:
- Colores: he querido mantener la esencia del color de cada juego de lotería, ya que así es también una forma de facilitar al usuario su identificación y búsqueda de cada juego en la página.
- Tipografía: introducimos la tipografía source sans pro, que es clara, limpia y algo redondeada.
- Grid: utilizamos la grid de bootstrap de 12 columnas, y gutter de 30px.
He trabajado siguiendo los conceptos del atomic design. Componetizando los elementos con los que vamos a trabajar, haciendo todo más fácil y ordenado.
Este ha sido el resultado:
Conclusiones y futuribles:
El objetivo era mejorar la usabilidad de la web y creo que se ha logrado con creces.
Tras el research inicial la clave fue simplificar todo el proceso de búsqueda de resultados, para poder llegar a todos los usuarios.
En cuanto a los futuribles obviamente sería interesante trasladar este diseño a toda la página web y poder unificar todas las páginas de loterías del estado en una sola, evitando faltas de consistencia como ocurre actualmente.
También el hecho de mejorar la app y adaptarla al diseño propuesto.
