PROYECTO
Craiglist (proyecto personal)
Propuesta rediseño Home UX/UI
ROL
UX/UI Designer
PROYECTO
Craiglist (proyecto personal)
Propuesta rediseño Home UX/UI
ROL
UX/UI Designer
PROYECTO
Craiglist (proyecto personal)
Propuesta rediseño Home UX/UI
ROL
UX/UI Designer
RESPONSABILIDADES
Research
Wireframes
Diseño UI
RESPONSABILIDADES
Research
User flow
Wireframes
Diseño UI
RESPONSABILIDADES
Research
Wireframes
Diseño UI
Contexto
Craigslist es uno de los sitios web más populares del mundo. Es un sitio web gratuito que permite a cualquiera ver y publicar anuncios clasificados. Además, Craigslist también permite a sus usuarios buscar trabajos, unirse a foros de discusión y encontrar una vivienda. Presta servicios a más de 450 ciudades de todo el mundo.
Contexto
Craigslist es uno de los sitios web más populares del mundo. Es un sitio web gratuito que permite a cualquiera ver y publicar anuncios clasificados. Además, Craigslist también permite a sus usuarios buscar trabajos, unirse a foros de discusión y encontrar una vivienda. Presta servicios a más de 450 ciudades de todo el mundo.
Contexto
Craigslist es uno de los sitios web más populares del mundo. Es un sitio web gratuito que permite a cualquiera ver y publicar anuncios clasificados. Además, Craigslist también permite a sus usuarios buscar trabajos, unirse a foros de discusión y encontrar una vivienda. Presta servicios a más de 450 ciudades de todo el mundo.
Reto
Craiglist tiene un diseño básico y anticuado pero funciona porque mantiene el foco en las tareas primarias del usuario: comprar y vender servicios/productos. Permite al usuario alcanzar fácilmente sus objetivos, sin importar lo bonito que sea.
Crear un diseño más atractivo y mejorar la usabilidad es muy factible, pero hacerlo manteniendo la esencia de la empresa y el sitio web no es tan fácil.
¿Cómo atacar los principales pain points que genera en los usuarios la experiencia actual, manteniendo esa esencia simplista característica de Craiglist?
Reto
Craiglist tiene un diseño básico y anticuado pero funciona porque mantiene el foco en las tareas primarias del usuario: comprar y vender servicios/productos. Permite al usuario alcanzar fácilmente sus objetivos, sin importar lo bonito que sea.
Crear un diseño más atractivo y mejorar la usabilidad es muy factible, pero hacerlo manteniendo la esencia de la empresa y el sitio web no es tan fácil.
¿Cómo atacar los principales pain points que genera en los usuarios la experiencia actual, manteniendo esa esencia simplista característica de Craiglist?
Reto
Craiglist tiene un diseño básico y anticuado pero funciona porque mantiene el foco en las tareas primarias del usuario: comprar y vender servicios/productos. Permite al usuario alcanzar fácilmente sus objetivos, sin importar lo bonito que sea.
Crear un diseño más atractivo y mejorar la usabilidad es muy factible, pero hacerlo manteniendo la esencia de la empresa y el sitio web no es tan fácil.
¿Cómo atacar los principales pain points que genera en los usuarios la experiencia actual, manteniendo esa esencia simplista característica de Craiglist?
Metodología
Metodología
Metodología
01 Inmersión
01
Inmersión
Análisis estado actual
Análisis reseñas y comentarios de usuarios
Test usabilidad diseño actual
Benchmarking
Análisis estado actual
Análisis reseñas y comentarios de usuarios
Test usabilidad diseño actual
Benchmarking
/Análisis estado actual
/Análisis estado actual
Objetivo: analizar el estado de la versión actual y detectar fortalezas y debilidades. Centramos el análisis en la home.
Tres elementos principales: usabilidad, organización de contenido y diseño visual.
Objetivo: analizar el estado de la versión actual y detectar fortalezas y debilidades. Centramos el análisis en la home.
Tres elementos principales: usabilidad, organización de contenido y diseño visual.
PROBLEMAS DETECTADOS
PROBLEMAS DETECTADOS
USABILIDAD
· AI caótica
· Experiencia más centrada en mostrar el extenso catálogo que en la usabilidad
· Falta de organización jerárquica
· Herramienta de búsqueda anticuada
· Herramientas de filtrado precarias
· Falta de personalización
· UX Writing inexistente
· Navegación inconsistente
USABILIDAD
· AI caótica
· Experiencia más centrada en mostrar el extenso catálogo que en la usabilidad
· Falta de organización jerárquica
· Herramienta de búsqueda anticuada
· Herramientas de filtrado precarias
· Falta de personalización
· UX Writing inexistente
· Navegación inconsistente
DISEÑO VISUAL
· Diseño excesivamente básico basado en listados HTML
· No hay optimización del espacio
· Sin apenas jerarquía visual
· Exceso de información a la vista
· Carga cognitiva muy alta
· UI poco humanizada
· Diseño de interacción inexistente
DISEÑO VISUAL
· Diseño excesivamente básico basado en listados HTML
· No hay optimización del espacio
· Sin apenas jerarquía visual
· Exceso de información a la vista
· Carga cognitiva muy alta
· UI poco humanizada
· Diseño de interacción inexistente
ORGANIZACIÓN DEL CONTENIDO
· Gran cantidad de contenido
· Muchas categorías
· Estructura caótica
· Sin posibilidad de personalización por frecuencia de uso
ORGANIZACIÓN DEL CONTENIDO
· Gran cantidad de contenido
· Muchas categorías
· Estructura caótica
· Sin posibilidad de personalización por frecuencia de uso
/Opiniones de los usuarios:
Reseñas y comentarios
/Opiniones de los usuarios:
/Opiniones de los usuarios:
Objetivo: conocer a los usuarios de Craiglist y entender, tanto sus problemas como aquello que valoran positivamente, para determinar el foco a la hora de introducir mejoras.
- Analizamos las reseñas que vertían en App Store, Google Play y Trustpilot sobre la versión web, así como otros muchos comentarios en distintos foros.
Objetivo: conocer a los usuarios de Craiglist y entender, tanto sus problemas como aquello que valoran positivamente, para determinar el foco a la hora de introducir mejoras.
- Analizamos las reseñas que vertían en App Store, Google Play y Trustpilot sobre la versión web, así como otros muchos comentarios en distintos foros.
Objetivo: conocer a los usuarios de Craiglist y entender, tanto sus problemas como aquello que valoran positivamente, para determinar el foco a la hora de introducir mejoras.
- Analizamos las reseñas que vertían en App Store, Google Play y Trustpilot sobre la versión web, así como otros muchos comentarios en distintos foros.
INSIGHTS
INSIGHTS
INSIGHTS
Debido a su diseño anticuado y rudimentario, la gente se siente más cómoda vendiendo sus novedades y artículos menos valiosos. No se sienten tan presionados para tener fotos de alta calidad o descripciones extensas. Perciben que su público tiene expectativas más realistas en cuanto a los artículos de segunda mano.
Debido a su diseño anticuado y rudimentario, la gente se siente más cómoda vendiendo sus novedades y artículos menos valiosos. No se sienten tan presionados para tener fotos de alta calidad o descripciones extensas. Perciben que su público tiene expectativas más realistas en cuanto a los artículos de segunda mano.
Debido a su diseño anticuado y rudimentario, la gente se siente más cómoda vendiendo sus novedades y artículos menos valiosos. No se sienten tan presionados para tener fotos de alta calidad o descripciones extensas. Perciben que su público tiene expectativas más realistas en cuanto a los artículos de segunda mano.
Craigslist se ve a menudo como una forma más "personal" y directa de comprar, vender y promover bienes y servicios. La honestidad percibida es un factor distintivo de Craigslist. Su escaso branding se valora de forma positiva, no resulta invasivo y cede el protagonismo a las publicaciones de los usuarios.
Craigslist se ve a menudo como una forma más "personal" y directa de comprar, vender y promover bienes y servicios. La honestidad percibida es un factor distintivo de Craigslist. Su escaso branding se valora de forma positiva, no resulta invasivo y cede el protagonismo a las publicaciones de los usuarios.
Craigslist se ve a menudo como una forma más "personal" y directa de comprar, vender y promover bienes y servicios. La honestidad percibida es un factor distintivo de Craigslist. Su escaso branding se valora de forma positiva, no resulta invasivo y cede el protagonismo a las publicaciones de los usuarios.
PROBLEMAS DETECTADOS
PROBLEMAS DETECTADOS
PROBLEMAS DETECTADOS
USABILIDAD
· Se demanda sección “favoritos”
· Cuesta mucho encontrar las cosas a través del buscador
· Herramientas de filtrado por localización poco optimizadas
· Filtrado de posts mejorable
· Dificultad para marcar/guardar los anuncios
· No es mobile friendly
USABILIDAD
· Se demanda sección “favoritos”
· Cuesta mucho encontrar las cosas a través del buscador
· Herramientas de filtrado por localización poco optimizadas
· Filtrado de posts mejorable
· Dificultad para marcar/guardar los anuncios
· No es mobile friendly
USABILIDAD
· Se demanda sección “favoritos”
· Cuesta mucho encontrar las cosas a través del buscador
· Herramientas de filtrado por localización poco optimizadas
· Filtrado de posts mejorable
· Dificultad para marcar/guardar los anuncios
· No es mobile friendly
UX WRITING
· Categorías con nombres confusos
· CTA´s confusos
· Numerosos fallos sin un mensaje concreto
· Falta de guía durante los procesos
· El usuario no sabe qué está pasando
UX WRITING
· Categorías con nombres confusos
· CTA´s confusos
· Numerosos fallos sin un mensaje concreto
· Falta de guía durante los procesos
· El usuario no sabe qué está pasando
UX WRITING
· Categorías con nombres confusos
· CTA´s confusos
· Numerosos fallos sin un mensaje concreto
· Falta de guía durante los procesos
· El usuario no sabe qué está pasando
/Test de usabilidad
/Test de usabilidad
/Test de usabilidad
Objetivo: conocer como interactúan con la interfaz usuarios que entran por primera vez en la web.
Nos basamos en el test de usabilidad de Craiglist realizado por Wendi Bravo para Uxdesign.cc
Objetivo: conocer como interactúan con la interfaz usuarios que entran por primera vez en la web.
Nos basamos en el test de usabilidad de Craiglist realizado por Wendi Bravo para Uxdesign.cc
PROBLEMAS DETECTADOS
PROBLEMAS DETECTADOS
LANDING
El usuario comenta:
"La parte más difícil fue que al principio no pude averiguar para qué era el sitio. Se parece a un diccionario o algo así"
LANDING
El usuario comenta:
"La parte más difícil fue que al principio no pude averiguar para qué era el sitio. Se parece a un diccionario o algo así"
BOTÓN "CREAR POST"
El usuario comenta:
"Siento que el botón “crear un post” debería ser mucho más visible, es pequeño y difícil de encontrar"
BOTÓN "CREAR POST"
El usuario comenta:
"Siento que el botón “crear un post” debería ser mucho más visible, es pequeño y difícil de encontrar"
CATEGORÍAS CONFUSAS
El usuario comenta:
"Deberían poner más descripciones dentro de las categorías para saber a qué se refieren exactamente"
CATEGORÍAS CONFUSAS
El usuario comenta:
"Deberían poner más descripciones dentro de las categorías para saber a qué se refieren exactamente"
/Definición de Personas,
elaboración de Proto Journeys
y Mapas de Empatía
/Personas, Proto Journeys
y Mapas de Empatía
/Personas, Protojourneys y Mapas de Empatía
Objetivo: empatizar con los usuarios, comprender en profundidad sus necesidades y fricciones para poder plantear soluciones que optimicen su experiencia.
Objetivo: empatizar con los usuarios, comprender en profundidad sus necesidades y fricciones para poder plantear soluciones que optimicen su experiencia.
USER INSIGHTS
USER INSIGHTS
Erik Saunderman
38 años
Objetivo: vender su bicicleta
“Me siento confiado vendiendo en Craiglist porque es de toda la vida y aunque suba fotos feas no desentonan”
Erik Saunderman
38 años
Objetivo: vender su bicicleta
“Me siento confiado vendiendo en Craiglist porque es de toda la vida y aunque suba fotos feas no desentonan”
John Orange
25 años
Objetivo: ofrecer sus servicios de diseño
“Todos los días entro y navego siguiendo la misma ruta, para ver si hay alguna oportunidad de realizar un trabajo como freelance”
John Orange
25 años
Objetivo: ofrecer sus servicios de diseño
“Todos los días entro y navego siguiendo la misma ruta, para ver si hay alguna oportunidad de realizar un trabajo como freelance”
Mery Phillips
30 años
Objetivo: encontrar piso
“Me gustaría poder guardar pisos que me gustan, para no volver a tener que buscarlos cada vez que vuelto a entrar en la página”
Mery Phillips
30 años
Objetivo: encontrar piso
“Me gustaría poder guardar pisos que me gustan, para no volver a tener que buscarlos cada vez que vuelto a entrar en la página”
/Bechmarking
/Bechmarking
/Bechmarking
Objetivo: analizar los sitios web de la competencia o relacionados para encontrar buenas prácticas que nos sirvan para encontrar las mejores soluciones para nuestra experiencia. Analizamos las versiones desktop y mobile de: OfferUp, Letgo, Wallapop, Ebay, Vibbo y Páginas Amarillas.
Objetivo: analizar los sitios web de la competencia o relacionados para encontrar buenas prácticas que nos sirvan para encontrar las mejores soluciones para nuestra experiencia. Analizamos las versiones desktop y mobile de: OfferUp, Letgo, Wallapop, Ebay, Vibbo y Páginas Amarillas.
HIGHLIGHTS
HIGHLIGHTS
· La importancia de megabuscadores predictivos en los casos de Wallapop y Páginas Amarillas y la herramienta de filtrado avanzado de PA y Letgo.
· La importancia de megabuscadores predictivos en los casos de Wallapop y Páginas Amarillas y la herramienta de filtrado avanzado de PA y Letgo.
· Importancia del área “Mi cuenta” con productos favoritos guardados en Wallapop.
· Importancia del área “Mi cuenta” con productos favoritos guardados en Wallapop.
· Empleo de iconografía para reforzar visualmente el título de la categoría en Wallapop y Letgo.
· Empleo de iconografía para reforzar visualmente el título de la categoría en Wallapop y Letgo.
02 Ideación
02
Ideación
Solución conceptual
Funcionalidades para una mejor experiencia
Prototipado
Diseño visual
Solución conceptual
Funcionalidades para una mejor experiencia
Prototipado
Diseño visual
/Solución conceptual
“La esencia de siempre, experimentada cómo nunca”
/Soluciones para una mejor experiencia
Con todo lo aprendido en la fase de investigación, nuestra propuesta de rediseño es evolutiva y busca mantener la esencia de Craiglist para generar la mínima fricción, solucionando los principales problemas de los usuarios para generar una experiencia enriquecida basada en: la sencillez, la facilidad y la rapidez.
HERRAMIENTAS DE BÚSQUEDA
· Megabuscador predictivo, que me permite buscar en todas las categorías y en cualquier ubicación
· Búsqueda avanzada: Proceso guiado para filtrar resultados pormenorizadamente
· Selector de ubicación en posición destacada (header)
HERRAMIENTAS DE BÚSQUEDA
· Megabuscador predictivo, que me permite buscar en todas las categorías y en cualquier ubicación
· Búsqueda avanzada: Proceso guiado para filtrar resultados pormenorizadamente
· Selector de ubicación en posición destacada (header)
PERSONALIZACIÓN
Una vez el usuario accede mediante login, obtiene una experiencia personalizada en base al su uso del sitio:
· Sección categorías más visitadas
· Sección favoritos
· Sección post guardados
· Orden de las categorías principales en base a frecuencia de visita
· Sección Mi Cuenta destacada
HUMANIZACIÓN Y ORDEN VISUAL
· Las funcionalidades que facilitan tareas y accesos directos a primer nivel
· Armonia espacial ajustada al espacio de la pantalla. Diseño modular
· Jerarquía visual: Titulares y CTA´s claros y fácilmente localizables
· Empleo de iconografía para reforzar visualmente los conceptos sin perder agilidad y rapidez
· Tootips con descripción de la categoría al pulsar sobre el título
/Wireframes
En la fase de prototipado tomamos las decisiones sobre la disposición de los elementos, las principales iteraciones surgieron en torno a la ubicación de los elementos del header.
/Diseño Visual
A pesar de las constantes tentaciones de organizar las categorías mediante cards durante toda la fase de prototipado, en la fase de diseño finalmente decidimos iterar en la versión desktop hacia un modelo visual basado en listados para no perder esa esencia característica de Craiglist. Para contrarrestar esto, era fundamental generar armonía visual mediante el orden, la jerarquización tipográfica, la iconografía y el empleo del color.
En la versión mobile, sí que emplearemos un sistema de cards para así poder generar una experiencia mobile friendly. Muchas de las funcionalidades pasan al menú, para que las principales sean las protagonistas: Buscar y crear.
El buscador predictivo y el filtro avanzado aparecen plegados de inicio para ahorrar espacio vertical.
En esta versión las descripciones cambian su funcionamiento, al no poder funcionar en rollover, pasan a ser un tooltip.
/Aprendizajes
Muchos de los principios del diseño aplicados comúnmente por los diseñadores UX -como la creación de interfaces perfectamente pulidas y el empleo de patrones de diseño- no siempre son ingredientes necesarios para proporcionar un verdadero valor a la experiencia. Hay ocasiones, como en Craigslist, donde los diseñadores deben considerar permitir que las experiencias de los usuarios se desarrollen en interfaces estéticamente alejadas de los canones visuales de tendencia.
Otros trabajos
