Rediseñando la web loteriasyapuestas.es
Arquitectura y leyes de la gestalt
El objetivo al que nos enfrentamos 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/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.
METODOLOGÍA
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
¡Empezamos!
1. Desk research:
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.
Sólo un 3% de los usuarios admite tener una app o web de referencia para consultar sus boletos. La mayoría lo hace en la administración de loterías física o en cualquier página que le muestre google al introducir las palabras clave en el buscador.
2.Benchmarking:
Las páginas más demandadas por los usuarios para hacer sus comprobaciones, son los buscadores de los periódicos digitales.
Estos son algunos ejemplos:
En la web de elmundo.es nos muestra los últimos resultados de los sorteos oficiales, pero no nos ofrece un buscador. El usuario tiene que navegar por toda la página hasta encontrar la información que desea. Tampoco deja ver sorteos pasados.
He observado también que aparte de la web loteriasyapuestas.es, existen otras webs oficiales destinadas a cada sorteo (euromillones, bonoloto, primitiva, etc). Creo que tener tantas opciones, habiendo una página oficial donde se aúna todo es redundante, y hace que el usuario se pierda entre tantas opciones.
3. Insight 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.
User persona
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, ya que no tiene confusión y tiene la seguridad en que está mirando el día y sorteo correctos. Si tiene que comprobar el boleto online prefiere decírselo a un hijo, sobrino o similar, ya que la página no está clara y tiene miedo de confundirse de sorteo, o día.
Con todos estos datos nos enfocaremos en simplificar y aclarar todos los datos y componentes de la página.
4. 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.
El principal problema es la confusión que aparece al tener tantos elementos tan juntos, algunos únicamente se les diferencia por el color. Uno de los principios fundamentales de la percepción es la llamada ley de la pregnancia o, como principio de la buena forma, que afirma la tendencia de la experiencia perceptiva a adoptar las formas más simples posibles. Las partes de una figura que tiene “buena forma” o que indican una dirección o destino común forman con claridad unidades autónomas en el conjunto. Esta ley permite la fácil lectura de figuras que se interfieren formando aparentes confusiones, pero en donde prevalecen sus propiedades de “buena forma” o destino común, se ven como desglosadas del conjunto.
Esto claramente no ocurre en esta web.
Las tareas que adoptaremos para mejorar la usabilidad de la página serán:
- Reagrupar los contenidos, tanto de los diferentes menús, como de las “cards” con los resultados.
- Simplificar el diseño aplicando la estética mediante el minimalismo.
5. 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.
6. Prototipo:
El resultado es esta propuesta, una página mucho más sencilla y minimalista.
7. 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.
Componentes:
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:
- Átomos:
- Moléculas:
- Organismos:
8. 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.
Nunca deja de sorprenderme que webs de la administración pública no busquen la sencillez y la simpleza para que puedan ser comprensibles por todo el mundo. Todavía queda un gran trabajo por delante.
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.
Gracias por leerme 😊
