Compra Gamer | Caso UX/UI

Compra Gamer

25 minutos de lectura

UX/UI

E-Commerce

Rediseño

Responsive

Índice


  1. Contexto

  2. Benchmarking

  3. Lean Canvas

  4. Análisis de Tendencias

  5. Entrevistas

  6. Mapa de Trayectoria

  7. Mapa de Necesidades

  8. Brainstorming

  9. Matriz de Factibilidad, Viabilidad y Deseabilidad

  1. Tree Testing

  1. Cardsorting

  2. UX Writing

  3. Taskflow y Userflow

  4. Evaluación Heurística

  5. Wireframes

  6. Prueba de Usabilidad

1/16: Contexto

Compra Gamer se volvió la tienda más popular de Argentina en el mundo del hardware y gaming.


Buenas recomendaciones en redes sociales y canales de YouTube.

Precios competitivos.

Herramienta "Armá tu PC", que facilita la selección de componentes.

Motivo de la investigación: Evaluar la experiencia de los usuarios en la plataforma.


Altamente recomendada, pero con problemas de atención y logística.

Navegación confusa para usuarios sin experiencia en hardware.

YouTubers resaltan los precios, pero omiten fallas en el servicio.

"Los mejores productos, la mejor calidad y ni hablar del precio, el mejor del mercado, feliz con mi compra."

"Excelente compra, no me arrepiento. Precio y calidad. Los recomiendo."


"Mi pedido lleva una semana y nunca llegó. No responden los mensajes."

"Me asesoraron mal sobre la compatibilidad de los productos. Desastre."


Fuente: Google y blogs de tecnología.

Nuevas necesidades después del 2020:


  • Trabajo y estudio remoto: Más compra de PC y accesorios.

  • Entretenimiento en casa: Mayor inversión en hardware gamer.

  • Streaming y creación de contenido: Aumento en la compra de micrófonos y cámaras.


Compra Gamer se volvió clave, pero la demanda expuso fallas en su servicio.

Link al prototipo mobile

Link al prototipo desktop

Proyecto Académico: Curso de Diseño UX/UI Avanzado en Coderhouse.

Rol: Diseñadora de Experiencia de usuario y de Interfaces.

Tiempo: 3 meses | octubre 2021 - enero 2022

Más de 40 pantallas

Metodología: Diseño centrado en el usuario basandose en los 5 Elementos de James Garrett.

Estrategia: Objetivos y necesidades del usuario.
Requerimientos: Funcionalidades y requisitos del producto.
Estructura: Organización de la información y navegación.
Esqueleto: Distribución visual y wireframes.
Superficie: Diseño final con colores y estética.

Sobre el caso

Objetivo: Mejorar la experiencia con asesoría personalizada, navegación ágil y más reseñas positivas, abordando envíos y verificación de identidad.

Problema: Los usuarios desconfiaban del proceso de compra y exigían un canal de comunicación rápido. El inicio de sesión era confuso e inseguro, y la verificación de identidad, percibida como innecesaria, demoraba días en aprobarse.

Solución: Se añadirá un bot con opción de “atención personalizada” para contacto directo con soporte. El inicio de sesión incluirá contraseña y acceso mediante plataformas populares. La verificación de identidad se hará una sola vez al registrarse, de forma rápida e integrada.

2/16: Benchmarking


Para hacer el análisis a nuestra competencia se hizo un Benchmarking profundo. Estudiamos su paso por el mercado, también sus fortalezas (beneficios) y debilidades que tuvimos en cuenta en qué hacer y qué no en nuestro proyecto. También comparamos sus páginas web y/o aplicaciones de competidores directos e indirectos, para ello tuvimos en cuenta los siguientes factores: Vocabulario, Diseño, Navegación y Funcionalidades.

Vocabulario

Diseño

Funcionalidades

Fortalezas

Debilidades

Navegación

¿Cuántos clicks hay que hacer para un objetivo?

Buscar un producto

Agregar un producto al carrito

Comprar un producto

Guía de armado y compra de PC sencilla.

Experiencia, popularidad en redes y premios.

Problemas con turnos en la tienda, calidad, garantías y atención al cliente.

Mexx

Competidor directo

1

2

7

Página clara, categorizada, beneficiosa para empresas.

Competencia con precios similares, asesoramiento y similar influencia.

Página sobrecargada, problemas con garantías y productos dañados.

Venex

Competidor directo

1

2

5

Categorización impecable y opciones de PC personalizadas.

Página ordenada, navegación práctica y PCs prearmadas para principiantes.

Restricciones en tienda física, chat sin asesoramiento.

Maximus

Competidor directo

1

2

3

Mercado Libre

Competidor indirecto

1

2

5

Información del vendedor, calificación y comentarios.

E-commerce de confianza, atención rápida y calificaciones de productos y vendedores.

Variedad de productos, pero problemas con atención y entrega.

  1. Estrategia

3/16: Lean Canvas


Herramienta de visualización que nos ayudó a posicionarnos en el contexto actual de la empresa Compra Gamer luego de una profunda investigación de su mercado. Nos dejó datos interesantes como su propuesta de valor y sus métricas claves, entre otros.

Problema


Demoras en envíos, mala atención al cliente y compra engorrosa.

Alternativas Actuales


1) Maximus Gaming Hardware

2) Mexx

3) Venex

4) Mercado Libre (competencia indirecta)

Propuesta de valor


Precios bajos, productos importados sin trámites aduaneros, y beneficios con GamerCoins para descuentos.

Canales


Comunicación: Publicidad en redes sociales, eventos, e-mail marketing.
Ventas: Página web, envíos a domicilio o sucursal.

Soluciones


Seguimiento del producto.

Implementar chat en vivo para dudas.

Mejorar filtros y botón de compra.

Métricas


Compradores mensuales

Calificaciones/Quejas en Google

Ventaja especial


Buenos precios y respaldo de expertos en gaming y hardware.

Público Objetivo


Usuarios que necesitan PC o mejorar sus componentes.

Early Adopters


Personas que buscan el mejor precio-calidad del mercado.

Costos


Costos operativos (alquiler de depósito).

Diseño y Desarrollo de la web.

Marketing.

Pago a proveedores.

Ingresos


Ingreso variable de la venta de productos.

4/16: Análisis de Tendencias


Este análisis nos mostrará como evolucionó con el tiempo (pasado, presente y futuro cercano) el target de los usuarios, el consumo de estos productos y la cultura de la empresa, entre otros. Con esto en mente, nos ayudará a generar nuevas ideas valiosas para incorporar o mejorar.

Objetivo: Experiencia comprando productos tecnológicos.

GamerCoins

Las compras son 100% online mediante la página web, pago con transferencia o pago gamer (en coutas). La página te ayuda a comprar los componentes y ver su compatibilidad, pero a veces no es factible. Descuentos con GamerCoins.

Tecnología - Actual

Home Office

Nuestros clientes actuales incluyen trabajadores argentinos que necesitan una computadora para trabajar, estudiantes, amantes de los videojuegos y personas que nos prefieren por los bajos precios de los productos.

Personas - Actual

Gaming

Hubo un aumento de compras online impulsado por plataformas de streaming como Twitch y YouTube, que fomentan la actividad en videojuegos y la creación de contenido para convertirse en "Streamers" o subir "Gameplays".

Mercado - Actual

Nuevos clientes

Volviendo al tema de la pandemia y que a muchos los obligó a entender sobre estos productos, se tuvo que expandir la franja de edad y dar recursos para que estos puedan tener en cuenta ciertos aspectos a la hora de comprar.

Negocios - Actual

5/16: Entrevistas


Para poder entender al usuario y analizar sus puntos de dolor hicimos 5 entrevistas semiestructuradas cualitativas en profundidad (4 remotas y 1 presencial) y 19 Encuestas online cuantitativas.


Objetivo: Analizar experiencias de usuarios con Compra Gamer y otras páginas tecnológicas, identificando ventajas, desventajas y puntos de mejora para optimizar el proyecto y futuras investigaciones.


Target: Usuarios de 19 a 30 años interesados en tecnología, que buscan mejorar o adquirir nuevos productos tecnológicos.

¿Qué tanto sabes sobre productos tecnológicos?

68,4% Poco

5,3% Me defiendo

5,3% Lo suficiente

21,1% Bastante

¿Tuviste que actualizar tu PC para poder correr programas pesados o videojuegos?

63,2% Si

36,9% No

¿Te sentís más segurx cuándo hay asesoría en la compra de un producto?

97,7% Si

5,3% No

Algunos de los comentarios durante la entrevista fueron:


  • “Deberían de prestarle más atención a los envíos, en especial sí hubo un problema”

  • “Quise hacer una devolución y estuve meses esperando por mi dinero”

  • “Con solo ver su página me dan ganas de cerrarla y comprar en Mercado Libre”

  • “La recomiendo... sí tenes paciencia y no te desesperas por algo que pagaste mucho”

4/5

Tuvieron problemas con el retraso de sus pedidos

3/5

No recomiendan la página y prefieren comprar en un lugar más caro solamente por la tardanza de los envíos

60%

Investigaron antes de la compra y se asesoraron sobre el producto

4/5

Descubrieron la página por sponsors de Compra Gamer con youtubers

6/16: Mapa de Trayectoria


Gracias a la información que obtuvimos en las entrevistas y encuestas pudimos crear dos arquetipos, para enfocarnos en ellos como representantes. Conozcamos a Natalia y Matías y, veamos su recorrido así también como sus emociones en el mapa de trayectoria con un escenario hipotético.

Natalia es una estudiante de Ciencias de la Comunicación y streamer en sus tiempos libres


Balvanera, CABA | 22 años

“Los fines de semana me la paso en la computadora, jugando con mis amigos mientras hago stream“

Aplicaciones que más usa:

Aspectos generales

Le gustan los juegos cooperativos porque siempre puede jugar con sus amigos.

A sus seguidores le gusta que ella juegue juegos de terror.

Le gusta actualizar sus componentes cada 2 años.

Relación con el producto

Natalia le gustaría mejorar su PC, pero no tiene mucho conocimiento, tampoco tiene presupuesto y busca una web/app que le ayude asesorándola.

Sobre su entorno

Siempre está en contacto con su computadora, ya sea para estudiar o para divertirse un rato con sus amigos y sus seguidores en Twitch.

Metas

Compartir buenos momentos con sus seguidores y amigos.

Poder terminar la carrera.

Le gustaría entrar a un equipo de videojuegos profesional.

Frustaciones

Quiere entrar a un equipo de videojuegos profesional, pero no siente que tenga el nivel.

A veces la ve muy poca gente y la estresa.

Actualizar su PC puede ser muy caro, por lo tanto, está mucho tiempo ahorrando.

Mapa de empatía: nos permite analizar al usuario y entenderlo más allá que su opinión, con esto entendemos su comportamiento, sus pensamientos, sus aspiraciones y puntos de dolor.

Dice

“Me gustaría poder terminar mi PC”

“No me gustan que mis pedidos tarde más de dos días”

“Me gusta compartir mi vida en las redes sociales”

Piensa

Necesita una nueva cámara

Quiere aprender computación y sus componentes para poder comprar bien

Los programas andan muy lento para editar videos

Hace

Estudia y busca los mejores componentes para su computadora

Natalia juega juegos los fines de semana con sus amigos

Siente

Siente que pierde su tiempo con los envíos retrasados

Se pone feliz cuando habla de terminar la carrera y poder trabajar

Se estresa cuando se retrasa con sus planes del día

Puntos de dolor

Su computadora no le funciona muy bien para sus pasatiempos

No le gustan los retrasos en los envíos

Quisiera aprender para poder entender lo que compra

Aspira

Le emociona la gente que tiene alrededor: su comunidad y sus amigos

Le gustaría poder terminar su PC, sus estudios y tener un trabajo

Escenario Hipótetico

Es la primera vez que Natalia entra a la página web para comprar unos auriculares con micrófono

Objetivo y Expectativas de Éxito del Usuario

Navegar por la página web sin problemas

Armar la PC, poder usar la página sin complicaciones y entender los productos sin esfuerzo.

Canales

Oportunidades

Acciones

Elección de uso

Registro y Navegación

Armado de PC

Pago

08. Entra a la categoría de “Armá tu PC”

09. Armado de PC por componentes y periféricos

10. Poner método de pago

11. Corroborar identidad.

04. Registro/ Ingreso

05. Navegación por el inicio, viendo las categorías y lo que ofrece la página

06. Entra a su perfil

07. Entra al apartado de Gamercoins

01. Ve las publicidades que tiene Compra Gamer en las redes sociales

02. Observa las reseñas de usuarios reales

03. Compara los precios que tiene con otras páginas

5

(2) “veo muchas reseñas de quejas por demora y que no contestan”

(2) Se puede mejorar la experiencia del usuario y su confiabilidad agregando en la página web calificaciones dentro del producto, un asesoramiento personalizado para que se sienta seguro.

Plataforma web/ celular (validación)

Plataforma web

Plataforma web

Plataforma web

(4)(6)Incorporar mejoras en el registro/inicio de sesión así también agregar redes sociales o el correo mismo para poder entrar a la página.

A Natalia le funciona la herramienta de “Armá tu PC” ya que no entiende mucho sobre computadoras y más cuando la página da compabilidad de un producto al otro a la hora de elegir.

(9) Agregar más métodos de pagos con que el usuario se sienta seguro (en coutas, sin interés)

(10)Mejorar la confiabilidad del usuario. Al ingresar se le pedirá una foto para la validación pero no en cada compra que hace.

(1)“El youtuber que veo y confío recomendó la página por sus precios”

(3) “Compra Gamer tiene los precios más bajos”

(7) “Que bueno que tengamos oportunidad de descuentos”

(8) “Me gusta esta sección porque yo no entiendo nada sobre computadoras”

(9) “Me gusta que pongan los productos que faltan y que sean compatibles”

(4) “No uso Facebook, ¿Por qué solo me deja registrarme así?”

(9) “¿Por qué me suben de precio en débito sí solo lo quiero en una cuota?”

(10) “¿Por qué necesitan que me saque una foto?”

(6) “¿Por qué tengo que iniciar sesión otra vez?”

Estudiante autodidacto de Programación Full Stack y usuario recurrente de Compragamer.


Lomas de Zamora, GBA | 24 años

Usuario B: Matías. Veamos sus conclusiones:


  • Agregar calificaciones y asesoramiento personalizado.

Implementar contraseñas y usuarios para seguridad y GamerCoins.

  • Mostrar productos en tendencia, populares y con ofertas.

  • Aumentar descuentos con las GamerCoins y permitir su uso como método de pago.

  • Mejorar el buscador con más filtros.

  • Incluir un botón de compra en el apartado del producto.

  • Mejorar la confiabilidad solicitando una foto solo para validación inicial.

Conclusiones generales:


Observamos que tanto Natalia como Matías enfrentaron problemas similares, a pesar de ser usuarios con diferentes niveles de experiencia, uno novato y el otro experimentado. Los principales puntos de dolor se centran en las reseñas, con énfasis en la mala atención al cliente y los envíos. También se menciona el inicio de sesión, que resultó molesto, y la percepción de la página como insegura.


Matías, el usuario B, destaca la página de inicio como vacía, sugiriendo la necesidad de mostrar productos en tendencia. Esto representa una oportunidad para agregar contenido, como tendencias o categorías, como lo más vendido, mejor valorado, recomendado, etc.


Por último, se menciona la forma de pago como "incómoda" según los usuarios. El mapa de trayectoria nos ayudó a identificar y reforzar estos puntos de dolor, lo que nos permitirá implementar soluciones, que más adelante evaluaremos para determinar si son viables o no.

*Hubo iteracciones en el recorrido de los dos:


Con Natalia y Matías, en la tarea N°11 decidimos que era un punto de dolor fuerte (en rojo) ya que Matías tiene la misma observación que ella, debería de ser tratado como un problema grave y ponerlo como unos de los cambios principales que se van a hacer.


Por último, con Matías, se volvieron a revisar las notas de su entrevista y pudimos notar que unos de los puntos de dolor fueron los filtros a la hora buscar, ésto lo añadió cuando dijo que no le gustaba buscar los productos en tendencias uno por uno.

7/16: Mapa de necesidades


Esta herramienta nos ayudará a implementar soluciones a los puntos de dolor identificados en el Mapa de Trayectoria. Tanto Natalia como Matías tuvieron problemas con la confianza en la página, el inicio de sesión y la validación de identidad.

Implementaremos contraseñas al registrarse para mayor seguridad y calificaciones con valoraciones de 1 a 5 estrellas en los productos.

Se añadirá una sección con productos en tendencia, más vendidos y mejor valorados, junto con nuevos filtros en el buscador.

Incluir un botón de "Comprar" en cada producto agilizará el proceso de compra.

Las GamerCoins tendrán mayor utilidad, permitiendo usarlas como método de pago o acumulándolas para obtener descuentos.

La validación de identidad se realizará una única vez al registrarse, eliminando la necesidad de hacerlo en cada compra.

8/16: Brainstorming 


Matriz creativa: Esta matriz nos ayudará a generar ideas y mejorar las funcionalidades de la página web para optimizar la experiencia de los distintos usuarios. La pregunta clave es: ¿Cómo mejorar la experiencia de los usuarios en Compra gamer?

Me guíe por estos usuarios porque son los más comunes: streamers, estudiantes, y ahora también padres y empleados que, debido a la pandemia, necesitaron adquirir computadoras para adaptarse a la nueva normalidad.


Asociaciones forzosas: Con esta herramienta dejamos salir todas las ideas, por más difíciles que puedan parecer o forzosas que puedan parecer. Nos ayudará a ver las oportunidades que podemos implementar en la página web.


Conclusiones:

En el inicio de sesión, sería importante añadir más opciones de ingreso mediante redes sociales o plataformas, para que el proceso sea más ágil y sencillo.

Agregar listas de compras en el perfil agilizaría la adquisición recurrente para usuarios frecuentes y empresas.

Agregar listas de compras al perfil sería ideal para corporaciones y usuarios frecuentes, permitiendo adquirir productos recurrentes sin buscarlos cada vez.

No ofrecemos 'PC armadas', a diferencia de la competencia. Esta opción facilitaría la compra a usuarios sin conocimientos técnicos, como madres o empleados.

El buscador necesita mejoras, añadiendo más filtros y opciones, para que no se limite solo a categorías como "lo más destacado" o "precio"

Los métodos de pago son un problema clave, agregar opciones como MP, Ualá y otras apps facilitaría el acceso y mejoraría la experiencia del usuario.

  1. Requerimientos

9/16: Matriz de Factibilidad, Viabilidad y Deseabilidad


Esta Matriz nos sirvió para agrupar todas las ideas y las problemáticas que se fueron dando durante la investigación. Pusimos en prioridad las soluciones que notamos ser un punto fuerte, un punto de dolor que se necesitaba arreglar ahora y también teniendo en cuenta la facilidad de la implementación (tecnología que tenemos en el momento) con el valor que le dan nuestros usuarios.


Prioridad 1:

  • Chat en vivo.

  • Inicio de sesión con más plataformas.

  • Mejora de filtros de búsqueda.

  • Contraseñas para inicio y registro.

  • Calificación y comentarios en productos.

  • Validación única al registrarse.

  • GamerCoins como método de pago.

  • Sección de PCs armadas.


Prioridad 2:
- Listas personalizadas.
- Contenido destacado en la página de inicio.
- Notificaciones de promociones y actualizaciones.


Prioridad 3:
- Desarrollo de la aplicación móvil.


Otras propuestas se han dejado para ser consideradas en un futuro cercano, debido a diversas razones:

No factible: No contamos con los recursos necesarios para implementarlas en este momento.

No viable: No resultan rentables considerando los recursos disponibles para el producto y el negocio.

No deseable: Desde la POV del usuario, puede que prefieran una solución alternativa a la propuesta.

Deseable (personas)

Factible (tecnología)

No viable

No factible

No deseable

Viable (negocio)

En esta etapa, con la problemática claramente definida, nos enfocamos en establecer los objetivos y plantear soluciones concretas. Para lograrlo, utilizamos un roadmap que nos permitió estructurar el proceso de trabajo de manera eficiente. Esta planificación fue clave para la toma de decisiones, ya que nos ayudó a organizar los tiempos de investigación, priorizar tareas y coordinar el diseño y desarrollo de nuevos elementos y componentes. Gracias a esto, pudimos garantizar un flujo de trabajo más ordenado y alineado con las necesidades del proyecto.

  1. Estructura

Uno de los problemas detectados fue la navegación del sitio. Para solucionarlo, analizamos los pain points y diseñamos una nueva arquitectura de contenido mediante Tree Testing y Card Sorting.


Primero, evaluamos la navegación actual con pruebas de usuario, considerando su experiencia en e-commerce de tecnología. Luego, aplicamos Tree Testing, asignando tareas simples para observar cómo recorrían la página. Esto nos permitió identificar problemas en la clasificación, como nombres confusos o categorías mal ubicadas, optimizando así la estructura del sitio.


CompraGamer hizo unos cambios en la página web, limitándose a tener cuatro secciones (Productos, Armá tu PC, Ayuda, Sponsor) en el Inicio. Anteriormente, tenían seis, entre ellos estaban: Productos, Armá tu PC, Encontrá tu equipo, Mi cuenta, Ayuda, Sponsor.

Con las prioridades pactadas anteriormente, nos enfocaremos en lss secciones: Productos y Armá tu PC.

10/16: Tree Testing

Primer Tree Testing

Task 1: Querés comprarte unos auriculares, ¿dónde lo buscarías?

Respuesta correcta: Home > Productos > Audio, parlantes, auriculares y mic > mic

Task 2: A la hora de Armar tu PC, te gustaría que la placa madre sea compatible con INTEL. Navegá por la web hacía la opción correcta.

Respuesta correcta: Armá tu PC > INTEL > Placa Mother

Conclusión

Detectamos confusión en la tarea "Armá tu PC", por lo que proponemos mejorar el Writing, renombrando categorías para facilitar la navegación y evitar que los usuarios se pierdan entre términos desconocidos.

Nuestra propuesta

Detectamos confusión en la tarea "Armá tu PC", por lo que proponemos renombrar categorías para facilitar la navegación y evitar que los usuarios se pierdan entre términos desconocidos. Aunque es un cambio pequeño, es clave para mejorar la toma de decisiones, especialmente para clientes con poca o ninguna experiencia en compras o armado de tecnología. Y que, al elegir productos, tengan claro cuáles son compatibles entre sí, optimizando su experiencia en la página.

Armá tu PC

Productos compatibles con INTEL

  • Placa mother

  • Procesador

  • Cooler CPU

  • Memorias

  • Placa de video

  • Disco rígido

  • Sistema operativo

  • Accesorios extras

  • Gabinete

  • Fuente de alimentación

  • Monitor

Productos compatibles con AMD

  • Placa mother

  • Procesador

  • Cooler CPU

  • Memorias

  • Placa de video

  • Disco rígido

  • Sistema operativo

  • Accesorios extras

  • Gabinete

  • Fuente de alimentación

  • Monitor

Productos

Equipos y Notebook

Notebooks

Procesadores y coolers cpus

Procesadores AMD

Coolers CPU

Procesadores Intel

Soluciones térmicas

Proyectores

Mothers y combos

Mothers AMD

Mothers Intel

Memorias Ram

Memorias

Memorias Sodimm

Almacenamiento

Discos rígidos

Discos rígidos internos

Discos sólidos

Placas de video y otras

Placas de video GeForce

Placas de video Radeon AMD

Gabinetes, fuentes y coolers

Gabinetes

Fuentes de alimentación

Coolers fan

Inicio

Segundo Tree Testing

Tras los análisis que pudimos hacer anteriormente con el Primer Tree Testing, pudimos resolver el problema mediante el renombre de las categorías, siendo el proceso más intuitivo y menos divagante para el usuario a la hora armar una computadora desde cero.


El tiempo tomado que habíamos tenido en el anterior test, más las claras confusiones a la hora de decidir, fue un empujón para poder realizar el segundo tree testing.

Cambios


Anteriormente, se llamaban INTEL | AMD

Conclusión

En la segunda prueba, la tasa de éxito fue del 100%, mejorando significativamente en comparación con el 90% obtenido en el primer Tree Testing. Aunque dos usuarios optaron por caminos indirectos, ambos lograron finalmente encontrar la información, lo que valida la efectividad de la nueva arquitectura de la información.

11/16: Cardsorting

Luego del Segundo Tree Testing, y tras confirmar que nuestra propuesta era la correcta, propusimos un Cardsorting abierto para organizar el contenido. En esta etapa, 10 usuarios participaron de forma remota a través de la plataforma Optimal Workshop.


Nuestro objetivo fue validar y reforzar la nueva arquitectura de información. Para lograrlo, los usuarios seleccionados debieron organizar y asignar nombres a 13 tarjetas, creando categorías que reflejen una estructura más clara e intuitiva.


Pregunta previa al test:


“Estamos rediseñando una página de venta de productos de tecnología, ¿alguna vez compraste en unas de estas páginas?”


Al reclutar a las personas para hacer los tree testing tuvimos que hacer una mini explicación en el que explicabamos de que se trataba la página web y por lo tanto de qué sería el test, pero además añadimos una pregunta que sería clave para poder tomar sus respuestas como válidas.


Conclusión


Los usuarios lograron agrupar y asociar la información en tres grupos principales, o jerarquías, de manera efectiva. Estos grupos se diferenciaron claramente entre sí, lo que sugiere que la estructura propuesta facilita la comprensión y navegación.

Ayuda, FaQ, preguntas frecuentes


¿Cómo realizo mi pedido?

¿Cuáles son las formas de pago?

¿Cómo gestiono el envío de mi pedido?

Mi perfil, Mi cuenta


Mis Gamer Coins

Mis Preguntas

Mis facturas

Mis Reservas

Mis Domicilios

Cerrar Sesión

Productos, Categoría, Catálogo


Equipo y Notebooks

Memoria Ram

Monitores y Televisores

Teclados y Mouses

Cardsorting: Tarjetas

Mis Facturas

Teclados y mouses

Mis domicilios

Equipos y notebooks

¿Cómo realizar un pedido?

¿Cuales son las formas de pago?

Memorias Ram

Cerrar sesión

¿Cómo gestiono el envío de mi pedido?

Mis reservas

Mis Gamer Coins

Monitores y televisores

Mis Preguntas

12/16: UX Writing

Se tomó decisiones clave para mejorar la experiencia del usuario en nuestra página web, adoptando una voz amigable y confiable para facilitar la navegación y el proceso de compra, asegurando una plataforma intuitiva y eficiente.

Amigable

Confiable

Empática

Pilares clave de la guía de estilo:


Fecha: Se informa al usuario de forma breve y concisa sobre la llegada de su producto.

Chat en vivo: El saludo, la explicación y la despedida son amigables, directas y entendibles. Si el usuario no entiende, tiene la opción de hablar con una persona real de la empresa.

Tips: Se dan consejos breves durante la compra o armado de PC para que el usuario los tenga en cuenta.

Mensajes de éxito: Se utilizan mensajes claros e ilustraciones de éxito breves y sin palabras complicadas.

Casos:


Mensajes de error: Se utilizan oraciones cortas con jerga para empatizar con el usuario, resaltando el error.

Descripción: Se brinda información concisa con las palabras necesarias para la posible compra o comparación con otros productos.

Buscador: Se invita al usuario a la acción de buscar, llamando su atención.

13/16: Taskflow y Userflow

Gracias al User Flow, que representa el recorrido que sigue un usuario dentro de un sitio web, podemos visualizar de manera clara y estructurada su interacción con la interfaz, identificando puntos clave como decisiones, acciones y posibles fricciones en la experiencia.

Entra a la web

Va hacia el apartado

de “Armá tu PC”

Selecciona los

productos

Agrega los productos

al carrito

Verifica los productos

seleccionados

Inicia sesión para

poder comprar

Selecciona método de pago

y completa información

Completa la compra

Objetivo: Natalia quiere armar su PC

  1. Esqueleto

14/16: Evaluación Heurística

Al revisar nuestro diseño y realizar pruebas, detectamos la ausencia de una heurística clave: el control y la libertad del usuario al interactuar con la página.

¿Qué falló o qué faltaba?

Control y Libertad para el usuario

Notamos que, al armar una computadora desde cero en la sección "Armá tu PC", no era posible retroceder para cambiar la marca de los productos compatibles.

Otro problema similar ocurría al buscar un producto: si el usuario ingresaba a ver un auricular, no tenía la opción de regresar fácilmente a la lista de opciones.

Para solucionar esto, implementamos los botones de "Volver atrás", que ahora están visibles y permiten una navegación más fluida y flexible.

  1. Superficie

15/16: Wireframe - Pantallas

Antes - Sección de productos

Wireframe - Sección de productos

Rediseño - Sección de productos

Antes - Sección de “Armá tu PC”

Wireframe - Sección de “Armá tu PC”

Rediseño - Sección de “Armá tu PC”

16/16: Pruebas de Usabilidad

Se realizaron cuatro pruebas de usabilidad con prototipos funcionales: una en desktop y tres en mobile, con el objetivo de evaluar si los usuarios reconocen las funciones clave tras el rediseño.


Metodologías Utilizadas:

Testeo remoto moderado: Dos usuarios realizaron pruebas a través de videollamadas en Zoom con prototipos en Figma, completando tres tareas hipotéticas y respondiendo preguntas sobre su experiencia.

Testeo remoto no moderado: Se utilizó la plataforma Maze.co con dos usuarios para evaluar la versión mobile.

Resultados del Testeo en Maze.co

Los dos usuarios completaron las siguientes tareas en tiempos óptimos.

Registro y navegación: Usuario 1 (25s) | Usuario2 (23,9s)

Armado de PC: Usuario1 (34,4s) | Usuario2 (37,5s)

Borrar producto del carrito: Aunque completaron la tarea (Usuario1: 20,1s | Usuario2: 13s), el proceso no fue intuitivo.

Calificación de experiencia: Usuario1 (18,1s) | Usuario2 (21,9s)

Hallazgos

Implementación del chatbot.

Filtros de búsqueda.

Tendencias en la página de inicio.

Resumen de productos.

Los filtros en la home eran confusos

Inicio de sesión obligatorio después de navegar resultaba molesto.

Mejoras Implementadas:

Se movieron los filtros de búsqueda para que aparezcan solo después de realizar una búsqueda.

Se reestructuró el flujo de navegación: ahora se solicita inicio de sesión/registro antes del onboarding y la home para evitar confusiones.

Antes - Sección de “Home”

¡Nuevo!

Una página creada para vos

Durante las Entrevistas y el Journey Map pudimos notar una molestia al no tener nada que ver en el inicio u home, esto se debe que el usuario quería ver tendencias dentro de ella: los productos que más se venden o tal vez, ofertas para aprovechar.


Nos enfocamos en esta petición, agregamos contenido:


  • Tendencias del mes

  • Descuentos

  • Merchandising de Compra Gamer

  • Por último, comentarios de anteriores clientes calificando su experiencia.

NUEVO

Rediseño - Sección de “Home”

Verificación en pocos pasos

Mejora: Desde el principio, nuestra intención fue simplificar la experiencia del usuario en la página. Por eso, ahora la verificación de identidad se realiza una única vez al registrar la cuenta, directamente en la web, sin necesidad de correos electrónicos ni tiempos de espera.

¡Nuevo!

Estamos con vos

En cualquier momento, el usuario podrá entablar una conversación con el chatbot sobre los temas o dudas más recurrentes. Si es necesario, podrá solicitar atención personalizada, donde el staff de Compra Gamer lo asistirá en cualquier inconveniente o consulta.

Todo es más seguro

Mejora: Ahora, el proceso de inicio de sesión y registro es más simple y minimalista. Hemos implementado un elemento clave: la contraseña, garantizando un acceso más seguro y confiable para el usuario.

¡Nuevo!

Versión Mobile

Propusimos la versión mobile como método de mejora para la experiencia de nuestros usuarios, tenemos en cuenta la facilidad y rapidez que pueden hacerse las tareas de esta manera. Veamos algunas pantallas:

¡MUCHAS GRACIAS!

Compra Gamer | Caso UX/UI