La funcionalidad de Instagram que todos necesitamos — UX/UI Case Study

La funcionalidad de Instagram que todos necesitamos — UX/UI Case Study

Instagram Places – es la funcionalidad que todos necesitamos, guarda y crea colecciones de tus restaurantes favoritos, las cafeterías más chulas de la ciudad o los sitios que quieres visitar en tu próximo viaje.

Resumen

Hipótesis principal: la gente necesita y quiere una forma de guardar sitios, lo cual no solo mejorar la satisfacción general sino que también aumenta el “engagement” de influencers y hará que los usuarios pasen más tiempo en la app.

Rol: diseñador UX/UI: desde fase inicial de generar la idea hasta el desarrollo de wireframes y la investigación de usuario.

El problema

Todos nos hemos encontrado en esta situación, es tarde, estamos en la cama y justo cuando estamos apunto de cerrar Instagram e irnos a dormir, vemos el hotel perfecto para nuestro próximo viaje.

No tenemos una forma fácil para guardar y organizar sitios en Instagram.

Pero… ahora que hemos encontrado el sitio, tenemos otro problema, ¿como lo guardamos?. Si eres usuario de Instagram probablemente sabras que puedes guardar y crear colecciones. O puedes la clásica captura de pantalla y rezar para encontrarla cuando la necesitas.

La solución

“Places” la nueva funcionalidad de Instagram, una forma organizada y sencilla de crear y guardar listas de lugares que acabas de descubrir.

Investigación y proceso

En esta fase inicial del proceso es importante definir claramente los retos, los posibles usuarios y que deseamos lograr con este diseño.

Este proyecto UX/UI se basa en la metodología de “Design Thinking” .

Para sintetizar las mejores ideas y proponer una solución creativa y sencilla, en este proyecto usare la metodología “Design Thinking”, centra en humanos y la cual se divide en 5 etapas: empatizar, definir, idear, prototipar y testear.

🤗 1. Empatizar:

UX Strategy blueprint – gracias a esta herramienta pude definir claramente los objetivos y retos que tengo por delante y como atajarlos.

Análisis competitivo – esta etapa se centra en identificar las aplicaciones o herramientas que se usan actualmente para tareas similares y sus “pros” y “contras”.

Observar – una de las mejores formas de conocer a nuestros usuarios es mediante la observación, esto permite identificar las diferencias entre lo que ellos creen que necesitan vs lo que necesitan realmente.

Estos son los detalles más importantes tras observarlos interactuar con la solución más habitual (guardar la publicación):

  1. Cuando muestran interés por una localización naturalmente hacen clic en la ubicación para conocer más detalles.
  2. Dejan la app en busca de más información en la relación al sitio (horarios, tipo de negocio, precios, etc..).
  3. Por último, si el sitio les gusta, suelen apuntarlo usando notas, una captura de pantalla o papel y boli.

📝 2. Definir

User persona – ahora que tenemos la información podemos crear un target ficticio con todas las necesidades y aspiraciones de nuestros usuarios.

User journey – en este mapa se puede ver el procestípicoco que sigue Elena cuando descubre un nuevo lugar. El objetivo principal es empatizar con ella entender sus frustraciones.

User scenary – en este otro diagrama podemos identificar sus frustraciones (pain points) e intentar darles una soluciones basándonos en la hipótesis principal.

💡 3. Idear

La solución es sencilla, dar a los usuarios una forma sencilla y dinámica de poder crear, guardar y compartir listas de sus restaurantes favoritos o de su próxima guía de viaje directamente desde Instagram.

Low fidelity – en base a la investigación y tras conocer mejor a los usuarios, diseñe una versión de baja fidelidad para ver cómo se vería y integraría esta nueva característica siendo consistente con el UX y sin romper el flow actual.

La solución propuesta se centra en dos puntos principales:

  1. Organización: facilitar el poder localizar sitios ya guardados.
  2. Easy-discover: mejorar la visibilidad de los sitios.

Tras probar las primeras versiones de la funcionalidad con algunos usuarios descubrí lo siguiente:

Contras:

  1. “…¿Y si no recuerdo cómo era la publicación pero si el nombre del sitio?”
  2. “…Aun asi tengo que salir de Instagram para más información sobre el sitio”

Pros:

  1. “…Super intuitiva”
  2. “…Por fin puedo crear guías para mis próximos viajes desde Instagram”

Iteración de diseño:

Tras ver alguno de los comentarios de los usuarios decide ajustar el diseño para que se integrara mejor y fuera más eficaz.

Flow A: interacción rápida en dos pasos para optimizar la función.

Flow B: botón de información que le permite saber sobre el lugar, horario de atención, teléfono, dirección.

Flow C: Vista combinada, ahora puedes ver las publicaciones o una lista de lugares en a la vez que el mapa para que sea más fácil recordar los lugares.

📱 4. Prototipo

El objetivo principal de este proyecto es mostrar una manera fácil y fácil de usar para crear sus colecciones y guías sin tener que abandonar la plataforma.

📌 5. Testing

Durante todos los pasos de este proceso, he tenido en cuenta los comentarios de mis usuarios, para la prueba final utilicé una versión de fidelidad media. Y por lo general lo que observé fue positivo, aunque el diseño no se perfecto.

Todos pudieron terminar la prueba y están de acuerdo que una de las claves para el éxito de esta funcionalidad era familiaridad de la interfaz.

Próximos pasos

1. Compartir colecciones

El poder compartir sería un añadido fundamental tanto para la comunidad de influencers como también para la gente que usa Instagram de forma habitual.

2. Recomendaciones basadas en uso

Esto permitiría a la plataforma poder dar recomendaciones en personalizadas a cada usuario según sus gustos.

Nota: Este proyecto no es oficial y no tiene ninguna vinculación con Instagram. Se trata de un concepto diseñado por mi, Saagar Bellani como parte de un proyecto personal.

Gracias! Si te ha gustado por favor 👏 and comparte!


La funcionalidad de Instagram que todos necesitamos — UX/UI Case Study was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.