Diseño UX/UI - Camila Andrea Molina
Coderhouse
Si pudieras irte a cualquier parte del mundo,
¿con quién irías?
Aquí es donde entra en juego Glocal. Nuestra aplicación te
permite conectarte con anfitriones locales auténticos que te
guiarán en experiencias únicas, permitiéndote sentirte como
un local en cualquier destino.
Imagina sumergirte en las tradiciones, la comida y el estilo
de vida local, todo guiado por alguien que vive y respira esa
cultura.
¡Glocal te ofrece esa oportunidad!
01 02 03 04 05
Empatizar Definir Idear Prototipar Validar
Para el desarrollo de esta app se utilizó el método de Design Thinking que consiste en un
proceso iterativo e impulsado por el usuario para la resolución creativa de problemas y
la generación de soluciones innovadoras.
Empatizar
Entendiendo el problema
¿Por qué? ¿Cómo? ¿Qué hacemos?
En un mundo cada vez más digital, Con Glocal buscamos resolver Brindamos oportunidades para
las conexiones humanas auténticas el problema de la falta de conocer a personas nuevas y crear
se vuelven esquivas. A pesar de las conexiones sociales y de conexiones significativas en un
redes sociales, muchas personas comunidad en la vida diaria de mundo ocupado y digitalizado. Una
se sienten aisladas debido a sus las personas, especialmente en app donde los usuarios pueden
agendas ocupadas y actividades entornos urbanos y en la era encontrar eventos y personas locales
en línea. La aplicación Glocal nace digital. relevantes, brindando a las personas
de la necesidad de transformar los la posibilidad de encontrar
viajes en oportunidades para compañeros con quienes compartir
construir conexiones. significativas. sus intereses y actividades.
Empatizar
Desk Research: Proceso de Investigación
Tras investigar búsquedas de usuarios y
notas periodísticas se notó que:
El 69% de la población mundial utiliza redes sociales y aplicaciones
móviles para necesidades relacionadas con los viajes.
Esto indica una fuerte dependencia de la tecnología en la planificación y
ejecución de viajes.
Esto sugiere que las plataformas digitales se han convertido en una parte
esencial de la experiencia de viaje moderna.
Existe una tendencia hacia el viaje en solitario de un 42% de las personas
en Latinoamérica para conocer gente nueva, lo consideran como una
oportunidad para interactuar con otros viajeros y lugareños.
Esto sugiere que cada vez más personas están buscando experiencias en
compañía.
Se buscan alternativas que faciliten la creación de conexiones
significativas entre viajeros con intereses comunes.
Benchmarking
Investigación sobre la competencia Definir
Pro Pro Pro
La mejor app para unirse a La mejor app para encontrar La mejor app para encontrar
grupos con diferentes guías locales experimentados compañeros de viaje
intereses La navegación es amigable y La estadía es gratis y
La reserva es gratis muy accesible compartida
Eventos online Esta app es muy recomendada La más utilizada por mochileros
Disponible en todo el mundo en las reseñas de Google Disponible en todo el mundo
Contra Contra Contra
Muchas reseñas negativas No está disponible en América Controversias sobre
La información no es clara, Latina usuarios con experiencias
la navegación es confusa Los eventos se pagan negativas e inseguridad
No tiene en cuenta la Los precios son muy elevados Cuentas falsas
accesibilidad
User Personas
Definir
Luego de encuestas y entrevistas, pudimos encontrar nuestros posibles usuarios
¿Por qué este usuario?
Priscila es una estudiante que le gusta generr contactos y viajar. Su experiencia depende de qué tan
buenas sean las recomendaciones de la gente y qué tan acompañada se sienta en el proceso.
User Personas
Definir
Luego de encuestas y entrevistas, pudimos encontrar nuestros posibles usuarios
¿Por qué este usuario?
Alon es un chico aventurero que le gusta viajar y conocer gente que tenga sus mismos intereses. Su
experiencia depende de qué tan bienvenido y qué tan nativo lo hagan sentir.
Producto mínimo viable
¿Qué funcionalidades tendrá nuestra app? Definir
Crear perfil con sus datos Buscar eventos por filtros
Reservar un evento Ver información de los eventos
Point of view
Definir
En base a la información obtenida y los insights de los usuarios obtenidos durante la
fase de empatía, definimos el problema de manera significativa y procesable
Priscila tiene 32 años, estudia Literatura y vive en Santa Fe, Argentina. En su tiempo
libre le gusta viajar, conocer otras culturas, aprender de su historia y tradiciones.
Priscila necesita conocer personas de otros países de una forma rápida, accesible y
amena, porque su forma de socializar es a través de su celular, le es difícil e
inseguro encontrar a una persona físicamente con sus mismos intereses,
Usuario 1:
frustrándose y entristeciéndose por no hacer nuevas amistades.
Priscila
Alon tiene 35 años, es programador, trabaja desde su computadora y la lleva a
cualquier parte del mundo, En su tiempo libre le gusta mochilear, su trabajo le da
la libertad de explorar nuevos destinos y pasar tiempo suficiente para conocer
profundamente su cultura. Pero no le sería posible hacerlo sin personas que lo
hagan sentir parte de la comunidad Alon necesita encontrar personas que lo
hagan sentir un nativo en sus viajes y que lo incluyan en desafíos y actividades
Usuario 2:
diarias, porque estas interacciones le brindan una sensación de pertenencia a la
Alon comunidad y una experiencia que no habría conseguido solo por su cuenta.
Arquitectura de la información
Metodología utilizada: Card sorting
Categorías Cards
Idear
1. HOME 16. CONFIGURACIÓN
HOME 2. EXPLORAR
17. DATOS DEL USUARIO
3. VER/AGREGAR INTERESES
EXPLORAR 4. RESERVAS 18. FOTO DE PERFIL
5. HOME
19. MI CUENTA
RESERVAS 6. PERSONAS EN LA ZONA
7. EVENTOS DESTACADOS 20. PREGUNTAS FRECUENTES
MI CUENTA 8. EVENTOS ASISTIDOS 21. SEGURIDAD
9. EVENTOS REALIZADOS
22. PRIVACIDAD
CONFIGURACIÓN 10. EXPLORAR
11. BÚSQUEDA 23. DATOS DE PAGO
12. NOTIFICACIONES 24. CONFIGURACIÓN
13. CERRAR SESIÓN
25. DÉBITO
14. USUARIO
15. RESERVAS 26. CRÉDITO
Arquitectura de la información
Metodología utilizada: Card sorting
Resultados
Idear
Luego de pedirle a los usuarios que
1. Arquitectura de la
ordenaran las tarjetas a su criterio, y información
2. Userflow/Tasflow
gracias a las pruebas de usabilidad, se
logró llegar a las siguientes
herramientas:
Arquitectura de la información
Metodología utilizada: Card sorting
HOME
Idear
MI PERFIL MAPA RESERVAS TIPOS DE PAGO AJUSTES
USUARIO INTERESES EVENTOS SEGURIDAD
DATOS DEL EXPLORAR REALIZADOS
PRIVACIDAD
USUARIO EVENTOS
PERSONAS PREGUNTAS
FOTO DE PERFIL
EN LA ZONA ASISTIDOS
FRECUENTES
MI CUENTA EVENTOS
DESTACADOS
Taskflow
El camino feliz" marca la tarea específica que el
usuario debería realizar para que la experiencia sea
la adecuada. Idear
Daniela es una usuario que quiere encontrar un evento en su estadía en España
El usuario entra a la Busca en Explorar los
Selecciona el evento El usuario lee el El usuario reserva
aplicación al Iniciar eventos a través de un
de su interés detalle del evento el evento
Sesión filtrado
Userflow
Idear
Ayuda a mejorar la facilidad de uso de la posible solución a la problemática,
a determinar qué funciona, qué no y cuáles áreas necesitan mejorar.
Prototipar
rototip
Evolución de los
Frames
PROCESO
Wireframes
Prototipar
Diseño del prototipo
El prototipo de la app comienza con el desarrollo del wireframe a mano, el cual pasó a un modelo digital (en baja fidelidad). Se avanza con la
aplicación de los patrones de diseño para iOS, la aplicación de los guidelines y finalmente el agregado de color junto al UI Kit (fidelidad alta).
Previamente a la aplicación del UI Kit realizamos una Prueba de Usabilidad de 5 usuarios que nos permitió iterar y reajustar el prototipo total.
Las imágenes muestran el proceso de la pantalla Home.
Wireframe a mano
Wireframe digital Patrones de diseño Wireframe con Prototipo final de
iOS
Prototipar
Wireframes
Diseño del prototipo
Wireframe en
baja fidelidad
Patrones de
diseño iOS
Guidelines
Prototipo final de
media/alta fidelidad
Home
Mi perfil
Mapa
Prototipar
Wireframes
Diseño del prototipo
Wireframe en
baja fidelidad
Patrones de
diseño iOS
Guidelines
Prototipo final de
media/alta fidelidad
Anfitrión
Sección
reservas
Moodboard
Prototipar
Guía de estilo
ot ar
UI Kit
Prototipar
Nos permite mantener un equilibrio visual en el diseño de las pantallas
TIPOGRAFÍA
LOGOTIPO
Global + Local = Glocal
PALETA DE COLORES
UI Kit
ÍCONOS Prototipar
Nos permite mantener un equilibrio visual en el diseño de las pantallas
activos inactivos
ILUSTRACIONES
UI Kit
Prototipar
Nos permite mantener un equilibrio visual en el diseño de las pantallas
BOTONES
TECLADO CARDS
GRILLAS
iOS
UI Kit
Cuadrícula: 11dp
Columnas: 4
Prototipar
Nos permite mantener un equilibrio visual en el diseño de las pantallas
TOP
NAVIGATION TAB BAR
Márgenes: 18 dp
Calles: 11 dp
INPUT
FIELDS
Validar
Pruebas de usabilidad
Validar
Pruebas de usabilidad
Realizamos pruebas para determinar la
eficiencia, eficacia y satisfacción de la Aplicación
Contexto: El usuario quiere asistir a un evento y conocer personas durante su estadía.
Métricas
Tarea Eficacia Eficiencia
Seleccionar un evento 90 % 2,8"
Seleccionar un anfitrión 40 % 2,2"
Reservar un evento 60 % 4,4"
Validar
Pruebas de usabilidad
Lo que funcionó
Validar
Pruebas de usabilidad
Lo que no funcionó Mejoras
Con mayor o menor dificultad todos los Dificultad para entender si el usuario Mejoramos la incorporación de nuevos
usuarios pudieron iniciar sesión/crear había confirmado el anfitrión deseado, usuarios
Agregamos autocompletado y teclado
una cuenta Ausencia de opciones para elegir
al inicio de sesión y registro
Los usuarios encontraron muy intuitivos anfitriones Pantallas con movimiento para
las diferentes interfaces de la aplicación No se podía ver el rostro del anfitrión experiencia similar a iOS
Botones sin un objetivo específico, por Cambio en flujo de eventos para elegir
A los usuarios les gustó la sección
anfitrión antes de pagar
"Novedades" para ver eventos en la ejemplo "Siguiente" Pantalla principal (Home) rediseñada
zona. para ser más efectiva
Validar
Pruebas de usabilidad
Validar
Evaluación Heurística
Validamos que la usabilidad de la app sea la adecuada
VISIBILIDAD COINCIDENCIA LIBERTAD Y CONSISTENCIA
DEL ESTADO ENTRE EL CONTROL Y
DEL SISTEMA SISTEMA Y EL PARA EL ESTÁNDARES
MUNDO REAL USUARIO
La aplicación Glocal muestra Glocal utiliza un lenguaje Cada botón X permite al La interfaz de Glocal sigue
notificaciones claras sobre la sencillo y descriptivo en la usuario modificar su acción patrones de diseño
bienvenida a la app, descripción de eventos, El botón Volver deja que el consistentes en toda la
cancelaciones y cualquier evitando jerga técnica. Los usuario pueda arrepentirse de aplicación. Los botones y
cambio en la programación. nombres de los eventos y las su reserva elementos de navegación
Los usuarios también reciben categorías son fáciles de Se detalla precios, costos siguen una disposición
confirmaciones por correo entender para los usuarios. totales, duración del evento, familiar y coherente.
electrónico la confirmación localidad e idioma, la
para crear una cuenta en la información es transparente
aplicación El botón de OMITIR le da
Se le notifica la confirmación libertad al usuario de
de pago por medio de una saltearse el onboarding.
animación
Validar
Pruebas de usabilidad
Validar
Evaluación Heurística
Validamos que la usabilidad de la app sea la adecuada
PREVENCIÓN RECONOCER FLEXIBILIDAD ESTÉTICA Y
DE EN LUGAR DE Y EFICIENCIA DISEÑO
ERRORES RECORDAR DE USO MINIMALISTA
Antes de abandonar una La sección Reservas muestra Glocal permite a los usuarios La interfaz de Glocal sigue un
reserva de un evento, Glocal una lista de eventos a los que marcar eventos como diseño limpio y ordenado. La
muestra una ventana se ha registrado o asistió, lo "favoritos" para que puedan información importante,
emergente de confirmación que evita que los usuarios acceder rápidamente a ellos como los detalles del evento y
para prevenir que los usuarios tengan que recordar los en el futuro. También ofrece la disponibilidad de entradas,
realicen acciones por error. eventos a los que planean la opción de buscar eventos se presenta de manera clara
Esto evita que los usuarios asistir o han realizado. por categoría o ubicación, lo sin elementos visuales
pierdan accidentalmente la que agiliza la búsqueda. innecesarios.
reserva.
Validar
Pruebas de usabilidad
Validar
Evaluación Heurística
Validamos que la usabilidad de la app sea la adecuada
RECONOCER, AYUDA Y
DIAGNOSTICAR Y DOCUMENTACIÓN
RECUPERARSE DE
ERRORES
Si un usuario intenta Glocal ofrece una sección de
registrarse en un evento que "Preguntas frecuentes" y un sistema
ya ha alcanzado su capacidad de soporte para que los usuarios
máxima, Glocal muestra un puedan obtener respuestas a sus
mensaje de error claro y preguntas y solucionar problemas
sugiere eventos similares fácilmente. Además, el onboarding
disponibles. anticipa de qué se trata la app
MUCHAS GRACIAS
Podes ver mi Reporte UX
en el siguiente link:
Reporte UX