TodosTusLibros

TodosTusLibros

TodosTusLibros

Caso de estudio

Caso de estudio

Caso de estudio

ROL

ROL

UX/UI Designer

UX/UI Designer

DURACIÓN

DURACIÓN

4 semanas

4 semanas

PROYECTO

PROYECTO

Individual

Individual

Scroll ↓

Acerca de

Acerca de

Acerca de

TodosTusLibros es una plataforma que conecta a los amantes de la lectura con librerías independientes de toda España. Aunque es una idea genial para apoyar el comercio local, su experiencia de usuario estaba lejos de ser ideal. El objetivo era claro: mejorar la plataforma para que no solo fuera útil, sino también fácil y placentera de usar.

Desafío

Desafío

Desafío

1- Mejorar la Usabilidad, simplificar la navegación y la estructura.

2- Crear una experiencia de compra más intuitiva y agradable.

3- Asegurar que el sitio sea accesible para todos los usuarios.

Meta

Meta

Meta

Transformar TodosTusLibros en una plataforma intuitiva, accesible y agradable, con el fin de mantener su relevancia y competitividad en el mercado digital.

Análisis de la plataforma

Análisis de la plataforma

Análisis de la plataforma

Para empezar, hice una auditoría exhaustiva de Todostuslibros, utilizando varias herramientas y métodos para comprender los problemas actuales:


  • Análisis de reseñas

  • Análisis SEO

  • Análisis del rendimiento

  • Análisis de la competencia

  • Análisis heurístico

  • Análisis de tipografías

  • Análisis de accesibilidad


Tras esta investigación, descubrí varios problemas, siendo los más graves:

  • Incidencias en devoluciones.

  • Contraste insuficiente del color naranja.

  • Uso de cuatro tipografías diferentes, ¡Unificar era una prioridad! ⚡

Playground Image
Playground Image

Desarrollo

Desarrollo

Desarrollo

Fases del proyecto

Fases del proyecto

Referencias
Benchmarking

Analicé varias webs de referencia con el objetivo de identificar y extraer buenas prácticas aplicables al rediseño de la web de Todostuslibros. Me pareció importante comprender como funcionaban otras webs similares, como era el contenido y como estaba estructurado.

Referencias
Benchmarking

Analicé varias webs de referencia con el objetivo de identificar y extraer buenas prácticas aplicables al rediseño de la web de Todostuslibros. Me pareció importante comprender como funcionaban otras webs similares, como era el contenido y como estaba estructurado.

Referencias
Benchmarking

Analicé varias webs de referencia con el objetivo de identificar y extraer buenas prácticas aplicables al rediseño de la web de Todostuslibros. Me pareció importante comprender como funcionaban otras webs similares, como era el contenido y como estaba estructurado.

Referencias
Benchmarking

Analicé varias webs de referencia con el objetivo de identificar y extraer buenas prácticas aplicables al rediseño de la web de Todostuslibros. Me pareció importante comprender como funcionaban otras webs similares, como era el contenido y como estaba estructurado.

Definir
Entendiendo a los Usuarios

Para entender las necesidades reales de los usuarios, llevé a cabo un conjunto de entrevistas y encuestas. Insights Clave: 1-Valoran la participación de librerías locales. 2-Esperan una experiencia de usuario más fluida, con un diseño visual más moderno y limpio. 3-Una gran parte de los usuarios percibe que la plataforma carece de información, como: *Falta de recomendaciones personalizadas. *Falta de claridad en las políticas de devolución. *Falta un apartado de ayuda o FAQ. A partir de esta investigación, creé una user persona llamada Laura, profesora de 32 años, que utiliza la plataforma para descubrir libros para sus clases y lectura personal.

Definir
UI / UX Designer

Para entender las necesidades reales de los usuarios, llevé a cabo un conjunto de entrevistas y encuestas. Insights Clave: 1-Valoran la participación de librerías locales. 2-Esperan una experiencia de usuario más fluida, con un diseño visual más moderno y limpio. 3-Una gran parte de los usuarios percibe que la plataforma carece de información, como: *Falta de recomendaciones personalizadas. *Falta de claridad en las políticas de devolución. *Falta un apartado de ayuda o FAQ. A partir de esta investigación, creé una user persona llamada Laura, profesora de 32 años, que utiliza la plataforma para descubrir libros para sus clases y lectura personal.

Definir
Entendiendo a los Usuarios

Para entender las necesidades reales de los usuarios, llevé a cabo un conjunto de entrevistas y encuestas. Insights Clave: 1-Valoran la participación de librerías locales. 2-Esperan una experiencia de usuario más fluida, con un diseño visual más moderno y limpio. 3-Una gran parte de los usuarios percibe que la plataforma carece de información, como: *Falta de recomendaciones personalizadas. *Falta de claridad en las políticas de devolución. *Falta un apartado de ayuda o FAQ. A partir de esta investigación, creé una user persona llamada Laura, profesora de 32 años, que utiliza la plataforma para descubrir libros para sus clases y lectura personal.

Definir
Entendiendo a los Usuarios

Para entender las necesidades reales de los usuarios, llevé a cabo un conjunto de entrevistas y encuestas. Insights Clave: 1-Valoran la participación de librerías locales. 2-Esperan una experiencia de usuario más fluida, con un diseño visual más moderno y limpio. 3-Una gran parte de los usuarios percibe que la plataforma carece de información, como: *Falta de recomendaciones personalizadas. *Falta de claridad en las políticas de devolución. *Falta un apartado de ayuda o FAQ. A partir de esta investigación, creé una user persona llamada Laura, profesora de 32 años, que utiliza la plataforma para descubrir libros para sus clases y lectura personal.

Estructura
Arquitectura & Wireframes

Durante el análisis de la arquitectura, me encontré con una verdadera jungla de enlaces rotos, ¿Resultado? Los usuarios perdían tiempo intentando encontrar información básica. Un ejemplo claro fue el enlace de la sección de Preguntas Frecuentes, que no llevaba a ningún lado. Con el objetivo de mejorar la experiencia, simplifiqué la estructura de la plataforma. El nuevo navbar se redujo a cuatro opciones: Buscar, Librerías, Log in y Cesta. En este punto, comencé a desarrollar wireframes de baja fidelidad en papel que mostraban una interfaz más limpia y optimizada. Luego, pasé a prototipos interactivos de alta fidelidad usando Figma.

Estructura
Arquitectura & Wireframes

Durante el análisis de la arquitectura, me encontré con una verdadera jungla de enlaces rotos, ¿Resultado? Los usuarios perdían tiempo intentando encontrar información básica. Un ejemplo claro fue el enlace de la sección de Preguntas Frecuentes, que no llevaba a ningún lado. Con el objetivo de mejorar la experiencia, simplifiqué la estructura de la plataforma. El nuevo navbar se redujo a cuatro opciones: Buscar, Librerías, Log in y Cesta. En este punto, comencé a desarrollar wireframes de baja fidelidad en papel que mostraban una interfaz más limpia y optimizada. Luego, pasé a prototipos interactivos de alta fidelidad usando Figma.

Estructura
Arquitectura & Wireframes

Durante el análisis de la arquitectura, me encontré con una verdadera jungla de enlaces rotos, ¿Resultado? Los usuarios perdían tiempo intentando encontrar información básica. Un ejemplo claro fue el enlace de la sección de Preguntas Frecuentes, que no llevaba a ningún lado. Con el objetivo de mejorar la experiencia, simplifiqué la estructura de la plataforma. El nuevo navbar se redujo a cuatro opciones: Buscar, Librerías, Log in y Cesta. En este punto, comencé a desarrollar wireframes de baja fidelidad en papel que mostraban una interfaz más limpia y optimizada. Luego, pasé a prototipos interactivos de alta fidelidad usando Figma.

Estructura
Arquitectura & Wireframes

Durante el análisis de la arquitectura, me encontré con una verdadera jungla de enlaces rotos, ¿Resultado? Los usuarios perdían tiempo intentando encontrar información básica. Un ejemplo claro fue el enlace de la sección de Preguntas Frecuentes, que no llevaba a ningún lado. Con el objetivo de mejorar la experiencia, simplifiqué la estructura de la plataforma. El nuevo navbar se redujo a cuatro opciones: Buscar, Librerías, Log in y Cesta. En este punto, comencé a desarrollar wireframes de baja fidelidad en papel que mostraban una interfaz más limpia y optimizada. Luego, pasé a prototipos interactivos de alta fidelidad usando Figma.

Diseño Visual: Coherencia y Accesibilidad

Diseño Visual: Coherencia y Accesibilidad

Diseño Visual: Coherencia y Accesibilidad

Ahora, pasemos a la parte estética, que no es menos importante. Decidí mantener las tipografías actuales, pero opté por reducirlas a dos: Lora para los títulos y Open Sans para los textos.


También me enfoqué en la accesibilidad. Revisé los contrastes de color según las pautas WCAG y ajusté los botones y enlaces para que cumplieran con los estándares mínimos. Decidí utilizar un gris oscuro para los botones, y el naranja como hover.


Otros detalles de diseño:

  • Protagonismo del buscador en la home.

  • Tonalidad naranja en los fondos, inspirado en las hojas de los libros antiguos.

Ahora, pasemos a la parte estética, que no es menos importante. Decidí mantener las tipografías actuales, pero opté por reducirlas a dos: Lora para los títulos y Open Sans para los textos.


También me enfoqué en la accesibilidad. Revisé los contrastes de color según las pautas WCAG y ajusté los botones y enlaces para que cumplieran con los estándares mínimos. Decidí utilizar un gris oscuro para los botones, y el naranja como hover.


Otros detalles de diseño:

  • Protagonismo del buscador en la home.

  • Tonalidad naranja en los fondos, inspirado en las hojas de los libros antiguos.


Playground Image
Playground Image
Playground Image
Playground Image

Diseño final de la web

Diseño final de la web

Diseño final de la web

Resultados: Impacto Potencial 🚀

Resultados: Impacto Potencial 🚀

Resultados: Impacto Potencial 🚀

  • Tasa de conversión: Una navegación más intuitiva y un flujo de compra simplificado habrían aumentado el número de usuarios completando compras.

  • Fidelización: Mejorar la claridad de la información y la eficiencia de la navegación habría incentivado a los usuarios a regresar y recomendar la plataforma.

  • Accesibilidad: Ajustes en el contraste y la tipografía habrían facilitado el uso de la plataforma para personas con discapacidades visuales, ampliando la base de usuarios.

Conclusión y aprendizaje

Conclusión y aprendizaje

Conclusión y aprendizaje

Realizar una auditoría detallada de la plataforma actual, me permitió identificar áreas clave de mejora antes de siquiera comenzar a diseñar.


El análisis de tipografías y accesibilidad me enseñó que pequeños detalles, como el contraste de colores o la coherencia tipográfica, pueden afectar enormemente la usabilidad.


Por último, con la investigación cualitativa y cuantitativa, pude descubrir qué frustraba a los usuarios y cómo podíamos mejorar su experiencia.

Como diría Jared Spool

Como diría Jared Spool

Como diría Jared Spool

"El diseño es el acto de solucionar problemas, y la experiencia de compra debe resolver los del usuario antes de que se dé cuenta de que los tiene".

Quizás te interese . .

Quizás te interese . .

Quizás te interese . .

Auditoría - Clínicas REM

Auditoría - Clínicas REM

Auditoría - Clínicas REM

Auditoría - Clínicas REM

Auditoría - Clínicas REM

Auditoría - Clínicas REM

Auditoría - Clínicas REM

Auditoría - Clínicas REM

Auditoría - Clínicas REM

Auditoría - Clínicas REM

Auditoría - Clínicas REM

Auditoría - Clínicas REM

Nueva funcionalidad - Wallapop

Nueva funcionalidad - Wallapop

Nueva funcionalidad - Wallapop

Nueva funcionalidad - Wallapop

Nueva funcionalidad - Wallapop

Nueva funcionalidad - Wallapop

Nueva funcionalidad - Wallapop

Nueva funcionalidad - Wallapop

Nueva funcionalidad - Wallapop

Nueva funcionalidad - Wallapop

Nueva funcionalidad - Wallapop

Nueva funcionalidad - Wallapop

Auditoría - Duzama

Auditoría - Duzama

Auditoría - Duzama

Auditoría - Duzama

Auditoría - Duzama

Auditoría - Duzama

Auditoría - Duzama

Auditoría - Duzama

Auditoría - Duzama

Auditoría - Duzama

Auditoría - Duzama

Auditoría - Duzama