Diseño UX - Biblored

Caso: La BibloRed – Red Distrital de Bibliotecas Públicas de la ciudad de Bogotá, en su proceso de mejora continua de su sitio web requiere realizar el diseño de experiencia de usuario de secciones especificas de www.biblored.gov.co

ObjetivoRealizar el diseño de experiencia de usuario para las secciones de programate y servicios del sitio web de la BibloRed – Red Distrital de Bibliotecas Públicas.

Técnicas utilizadas: Design Sprint, Investigación con usuarios, Card Sorting, Auditoria de Contenido, Prototipado, Test de usabilidad y accesibilidad.

Mi rol en el proyecto: Diseñador UX

Prototipos BibloRed

PROCESO

PERSONAJES Y ESCENARIOS

UX EMPATHIZE

Basados en la información obtenida de la herramienta de Google Analytics y la información proporcionada por el cliente se construyen los personajes y escenarios de uso del sitio web de la BibloRed.

EVALUACIÓN DE HEURISTICAS

UX TESTING

Usando un recorrido cognitivo con juicio de expertos se realiza la evaluación de heurísticas de usabilidad de Jackob Nielsen y de interacción de Bruce Toganazzini determinando oportunidades de mejora e hipotesis de diseño.

VALIDACIÓN DE ACCESIBILIDAD

UX TESTING

Se realiza la validación de los criterios de accesibilidad de la WCAG 2.1 utilizando herramientas como Headings map, AXe, Contrast Checker, entre otros y técnicas como recorrido cognitivo y navegación con herramientas de asistencia.

MOCKUPS

UX PROTOTYPING

Con las estructuras definidas se realiza el prototipado en mediana y alta fidelidad utilizando como software de prototipado Adobe XD, así mismo para garantizar el diseño responsive se realiza el prototipado teniendo en cuenta los break-point definidos en bootstrap 5.

ARQUITECTURA DE NAVEGACIÓN Y BUSQUEDA

UX DEFINE

Se realiza la auditoria de contenidos del sitio web actual y se implementa un ejercicio de card Sorting con el objetivo de conocer el modelo mental de los usuarios.

pRUEBAS DE USABILIDAD

UX RESEARCH

Se realiza pruebas con usuarios para validar la usabilidad y accesibilidad del sitio web, para realizarlas se genera el respectivo plan de pruebas con usuarios, guión del moderador, protocolo de pruebas y consentimientos informados.

WIREFRAMES

UX PROTOTYPING

Se generan prototipos de baja fidelidad (wireframes) en donde se determinan estructuras base, distribución de regiones, y armonía de las estructuras. 

Para garantizar el diseño responsive se toma como base para las estructuras base el framework front-end bootstrap 5

SOLUCIONES Y PRODUCTOS

Empatizar, Idear y Definir

Prototipar y testear

Contactame