¿Cómo buscamos libros?
Case Study UX/UI — Casa del Libro.
Parte 3 de 3. Arquitectura de la información y Diseño Visual
En este artículo se muestran los resultados del proyecto realizado en el Bootcamp de Neoland donde intentamos mejorar la experiencia de uso para las búsquedas de libros en casadellibro.com. El artículo ha sido dividido en tres partes. En esta tercera y última parte haremos foco en la Arquitectura de la información y el Diseño Visual.
Case Study UX/UI — Casa del Libro. Parte 1 de 3. Investigación
Case Study UX/UI — Casa del Libro. Parte 2 de 3. Ideación y Síntesis.
Case Study UX/UI — Casa del Libro. Parte 3 de 3. Arquitectura de la Información y Diseño visual.
Arquitectura de la información
A la hora de acometer la arquitectura de la información nos dimos cuenta que había que “rediseñar” el mapa del sitio para poder implementar nuestras soluciones. Queremos que casadellibro.com no sea un expositor de referencias, sino un viaje por las historias, ideas y conocimiento que se viven a través de su extenso catálogo de contenidos. Había que reformular la categorización de las materias/géneros para adaptarlos a la imagen y valores de la marca. Mediante un Card Sorting categorizamos las distintas áreas.
- Donde viven las Historias: Literatura y sus distintos géneros, las historias que nos gustan que nos cuenten y queremos leer.
- El mundo de las Ideas: Arte, gastronomía, ocio, las guías de viaje y las tendencias, todo aquello que inspira, ilumina y empuja a la creación, o a hacer la vida más rica e interesante. El paso intermedio entre la ficción y el conocimiento.
- El universo de Conocimiento: Todas las -logías. Materiales universitarios, estudios de referencia, ensayos de humanidades, textos de ciencias, informática, políticas etc.
Con este planteamiento de la información a mostrar a nuestros usuarios queremos trasladar la experiencia de la tienda física a la web como reforzar la idea de e-commerce especializada en libros frente a una e-commerce generalista.
Una vez reflejada la distribución de tienda a la propia arquitectura de la web pudimos elaborar un mapa del sitio más acorde con nuestros valores añadidos.
Diagramas de Flujo de las búsquedas
Para una correcta comprensión de las soluciones aportadas a nuestro producto elaboramos los diagramas de flujo por cada una de ellas atendiendo al perfil de usuario a la cual está orientada.
Framework Chatbot
Al introducir el concepto de Inteligencia Artificial en nuestra solución para las búsquedas, la visualización de la interacción del chatbot con nuestro usuario es más compleja que los diagramas anteriormente mostrados. Para la creación de un chatbot primero hay que responder una serie de cuestiones que nos ayudarán a diseñarlo:
- ¿De qué va nuestro chatbot? Básicamente va a ayudar a nuestros usuarios a decidir cuál va a ser su próxima lectura a partir del último libro que haya leído. Nace Borges Bot.
- Personalidad del Chatbot. Primero es conocer quién será nuestro “primer usuario” y en qué situaciones hablará con el bot alineado con los valores de la marca. Una vez que lo tenemos claro podemos fabricar una personalidad que encaje perfectamente con los usuarios. En nuestro caso queremos que sea coloquial y “moderno”, culto, ingenioso…
- Una lista priorizada de funcionalidades obligatorias.
- ¿Qué información necesita nuestro usuario del chatbot para encontrarlo útil? En nuestro caso la propia base de datos relacional de Casa del Libro donde podrá extraer las recomendaciones.
- El flujo de interacción. Donde mostramos las distintas interacciones de nuestro Bot con el usuario inclusive las distintas palabras a las que debería responder.
Diseño Visual
Adaptación de la marca al entorno digital
Casa del Libro quiere ser el punto de encuentro de las letras, en todas sus expresiones y en todos sus formatos. Es el refugio donde viven las letras. Nuestra marca refleja ese punto de encuentro enmarcando nuestra identidad dentro de un silencio visual, ( o “marco”) que ordena y da sentido a un mundo de letras (o “textura”). La meta final consiste en lograr que la marca sea capaz de recopilar muchas de las experiencias que ésta ofrece. Con una imagen cambiante y fresca, podemos representar cualquier contenido asociado a ella. Utilizaremos para ello solamente elementos tipográficos e icónicos para generar nuestras “texturas”, mediante la conceptualización de cualquier contenido asociado a la marca.
En una fase previa se realizaron ejercicios de adaptación de la marca al entorno digital. Las “marcas tradicionales” generalmente están pensadas para reproducirse en el entorno en las cuales iban a ser consumidas, es decir, un espacio físico. En la actualidad las marcas tienen que adoptar el concepto de Digital First y adaptarse a los canales de información y consumo más utilizados por su público objetivo. Hay que aprovechar esta cultura tecnológica de nuestra sociedad para dotarlas de más dinamismo y recorrido, incluyendo ideas de marcas generativas y que a su vez se adapten y den un salto de un formato a otro sin perder su identidad; de lo pequeño a lo grande, desde su mínima representación en mobile al gigantismo de una lona publicitaria.
Esbozando un nuevo sitio
Con el mapa de sitio y los diagramas de flujo podemos empezar a realizar los wireframes en baja fidelidad de las pantallas que tenemos que desarrollar para explicar correctamente nuestro producto.
A continuación elaboramos una guía de estilo donde mostramos la adaptación de la marca al entorno digital, colores, tipografías, ilustraciones y assets básicos para empezar a diseñar en alta fidelidad.
El Layout utilizado en una Grid de 12 columnas para que todos los elementos se reacomoden de 12 col. máx. (Desktop) a 4 col. min. (Mobile) en los distintos breakpoints.
A su vez la Grid de 8 puntos nos ayudará a componer el ritmo vertical para manejar los bloques y pesos visuales.
Una nueva forma de buscar y ver libros.
En la Home de nuestro sitio tenemos los dos valores añadidos de nuestro rediseño: Un Merga Search y ¿Qué quieres leer hoy?
Una Mega Search que prioriza y hace foco en la búsqueda
¿Qué libro quieres leer hoy?
Búsqueda por emociones. On Boarding
Atendemos a la necesidad de búsqueda dependiendo del estado de ánimo.
Con este diseño conseguimos
- Llevar la experiencia de búsqueda natural del usuario a la web.
- Hacer del buscador un buscador de libros de referencia.
- Priorizar la literatura.
- Reforzar e-commerce especializada frente e-commerce generalista.
Conclusiones
En este artículo tenemos la ausencia de dos “grandes actores” que tienen una importancia capital dentro del desarrollo real del proyecto. Por una parte los Stakeholders que a pesar de su buena predisposición ha sido imposible cuadrar agendas dentro del cronograma. Y por otra la validación del MVP por parte de los usuarios. Con ellos los resultados de este trabajo hubieran sido seguramente muy distintos.
Si te ha gustado puedes leer las otras fases del proyecto en…
Case Study UX/UI — Casa del Libro. Parte 1 de 3. Investigación
Case Study UX/UI — Casa del Libro. Parte 2 de 3. Ideación y Síntesis.
