Reporte

UX Victoria Swinnen
Coderhouse | Diseño UX/UI
Comisión #29420
Elevator pitch

¿Alguna vez te ha pasado de abrir Instagram y ver gente compartiendo fotos

y videos de un recital al que te hubiera encantado ir? Porque a mí sí. Por una
falla de comunicación, o la falta de un solo medio difusor, mantenerse al
tanto de este tipo de eventos no es una tarea fácil.

Por esto mismo decidí crear Clap, una app que funciona como una agenda
cultural, donde uno puede encontrarse con todas las novedades de lo que
respecta al mundo del espectáculo y entretenimiento, en un solo lugar.

Si bien la oferta de eventos culturales siempre ha sido muy amplia, al día de

hoy las propuestas abundan más que antes tras la pausa por la pandemia y
las reprogramaciones de shows y actividades que esta trajo como
consecuencia.

Me parece importante que todos tengamos presente, disponible y a nuestro

alcance, información y novedades sobre actividades recreativas; algo que
fomenta nuestro bienestar de muchas maneras.

Lo que necesito es ayuda para poder desarrollar y mantener actualizada esta

app. ¿Te interesaría sumarte a Clap?
01 - Sobre la app
02 - MVP
03 - User Personas
04 - Benchmarking
05 - Cardsorting & arquitectura de la información
06 - Userflow
07 - Wireframes
08 - Pruebas de usabilidad

Indice
09 - Moodboard & Icon desing
10 - UI kit
11 - Prototipo funcional
Sobre la app

01
 Sobre la app
Problema
¿Cual es la hipótesis?
Cada vez son más las propuestas culturales
que se ofrecen hoy en día. Desde recitales
hasta festivales gastronómicos, la gran
mayoría suelen promocionarse, por sobretodo,
mediante redes sociales. Ahora bien, ¿Qué
sucede con aquellas personas que no utilizan
estas redes? ¿O incluso con aquellos que si las
utilizan pero no siguen a las cuentas que
difunden tales eventos?
La promoción de estos no suele estar
unificada: cada organización se maneja por su
propio medio. A consecuencia, las personas
que no están directamente involucradas en el
mundo del arte, la música y demás, terminan
sin enterarse de ciertos eventos hasta ya
pasados, o sino cuando sus entradas ya han
sido agotadas.
Objetivo
¿Que buscamos?
- Unificar la difusión de las diversas ofertas
culturales en un solo lugar.
- Visibilizar las diferentes propuestas de
eventos sin importar su tipo de gestión.
- Fomentar la diversidad y el desarrollo cultural.
- Proponer ideas de salidas originales para que
las personas puedan variar en sus actividades.
Solución
¿Que proponemos?
La creación de una sola plataforma donde la
promoción de los distintos eventos se
encuentre unificada. Un espacio donde uno
pueda explorar las propuestas según los
propios intereses, o con la intención de vivir
nuevas experiencias. Donde se ofrezca la
creación de una “agenda” donde uno pueda
guardar los eventos a los que le interesa asistir,
se notifique sobre próximos eventos con
anterioridad, e informe sobre fechas, horarios,
lugares, además de poner a disposición la
venta de entradas (de ser necesarias).
MVP
02
MVP - Funcionalidades

Imprescindibles Deseables

Explorar: Compra de antradas:

Posibilidad de explorar entre todos los eventos o por categorías Poner a disposición links a las páginas
específicas. oficiales por donde se venden las entradas.

Información sobre fechas, horarios y lugares. Buscar en un mapa

Notificaciones y recordatorios:
Recibir notificaciones y recordatorios sobre próximos eventos. Desde
los más destacados, hasta recomendados según los gustos propios.
Notificar sobre fechas de salida a la venta de entradas.

Armado una agenda propia:

Posibilidad de guardar eventos en los que uno está interesado.
User persona

03
User persona #1

Sobre el usuario:
Lucila Lucila es una estudiante de psicología muy sociable a la que le encanta conocer

Robles
gente nueva. Le divierte probar cosas diferentes, pero no sabe de donde sacar
ideas.
En general, a Lucila le gusta hacer cosas cerca de donde vive ya que no cuenta
ESTUDIANTE DE
con movilidad propia, por lo que realizar programas cerca de su zona le resulta
PSICOLOGÍA
mas comodo.
Tipo de usuario: Objetivos y metas:
Busca ideas para salidas originales Ampliar su círculo social
"Quiero estar al tanto de los distintos Asistir a todo tipo de eventos (música, teatro, arte, etc.)
programas que se organizan para variar y Tener una agenda donde guardar los eventos a los que le gustaría ir
no caer siempre en las mismas salidas"
Motivaciones y frustraciones: Habilidades:
Frustraciones Es muy sociable y activa.
Le aburre hacer siempre los Suele tener siempre con ella el
mismos programas celular.
Género: Femenino
No manejar
Estado civil: Soltera
Motivaciones
Edad: 22 años
Vivir nuevas experiencias
Vive en Buenos Aires
Divertirse con sus amigos y tambien crear nuevos vínculos
User persona #2

Sobre el usuario:
Además de ser arquitecto, Francisco es un fanático de la música. Tiene dos hijos
Francisco pequeños con quienes le gusta mucho pasar el tiempo. Quiere compartir con su
Andrade familia el amor que siente por la música, y enseñarles a sus hijos las bandas y
cantantes que más le gustan. Le encanta la música en vivo. Francisco usa poco
ARQUITECTO las redes sociales, por lo que suele enterarse tarde sobre conciertos, cuando ya
no hay más entradas, o incluso cuando ya han pasado.

Tipo de usuario:
Busca estar al tanto de próximos recitales Objetivos y metas:
y conciertos Estar al tanto de próximos eventos musicales
"El tiempo en familia y los recitales son la Ser notificado sobre fechas de venta de entradas
Tener guardados los conciertos a los que quiere ir
mejor inversión"
Motivaciones y frustraciones: Habilidades:
Motivaciones Melómano.
Compartir experiencias con su familia No se lleva bien con las redes
Género: Masculino Compartir sus gustos musicales sociales.
Estado civil: Casado
Frustraciones
Edad: 48 años
No entrerarse sobre conciertos
Vive en Buenos Aires
No llegar a tiempo a la venta de entradas
Mapa de empatía

¿Que piensa y siente? ¿Que lo frustra?

Disfruta cuando hace programas El precio y la rapidez con la

distintos que se agotan las entradas

No entiende por qué no se entera a

Movilidad para ir a ciertos lugares
tiempo de los eventos que le interesan

¿Que dice y hace? ¿Que lo motiva?

Sus salidas suelen ser en su Quiere variar mas en sus

mayoría actividades
"comunes"

Prefiere ir a eventos con amigos Tener más vida social

Benchmarking

04
Benchmarking
Analisis de la competencia donde se dan a conocer las debilidades y fortalezas de aplicaciones similares.

Debilidades Fortalezas

- No tiene la opción de activar recordatorios ni notificaciones

- Completa en cuanto a información
- No pone a disposición la venta de entradas, y tampoco informa
- Vocabulario simple
por donde obtenerlas
- Toda la app sigue una misma estética
- No funciona su sección del mapa
-Muestra fechas, horarios, lugares, y valor de entradas
Zibilia - No tiene una opción para crear una agenda propia

- Pone demasiada información junta sobre elementos diferentes

- El calendario se ve de a un solo día
- Opción de guardar eventos en caso de crearse una cuenta
- Los tipos de categorías son confusos
- Información variada sobre lugares turísticos de entrada gratuita
- Tiene problemas en cuanto a funcionamiento
- Esta dedicada mas que nada al turismo
ReCreo

- No disponible en Argentina - Opción de guardar eventos en caso de crearse una cuenta

- No permite cambiar las preferencias que uno selecciona cuando - Pone a disposición la venta de entradas
se crea una cuenta - Permite activar notificaciones sobre eventos que a uno le podrían
- Tiene algunos problemas de funcionamiento (a veces no abre) interesar

Fever
Cardsorting &
Arquitectura de la
información
05
Cardsorting

El Cardsorting es un estudio que se

basa en observar como los usuarios
asocian entre si distintas palabras
(tarjetas) y categorías, para
posteriormente crear la arquitectura de
nuestra plataforma a partir de la
información brindada por el mismo.

Matriz de similitud: Diagrama que sirve

para detectar las tarjetas que se han
emparejado con mayor frecuencia.

Ver Cardsorting
Cardsorting

Dendograma: Este otro diagrama nos Algunas de estas fueron: buscar,

permite visualizar los grupos y las categorías, perfil, información,
etiquetas principales creadas por los configuración, menú/inicio,
usuarios. sugerencias, explorar.
Arquitectura de la información

A partir del Cardsorting se realizó esta

primera arquitectura de la información.

Ver en whimsical
Arquitectura de la información
Arquitectura ajustada a lo largo del
proyecto; tras las entrevistas y pruebas de
usabilidad.

Ver en whimsical
Userflow

06
Userflow
Usuario #1 Desea explorar sobre distintas obras de teatro para tener opciones y elegir una a la cual ir. Necesita
poder guardarlas para tener la información a mano.
TaskFlow

Usuario inicia sesión

Selecciona la sección
de categorías

Explora en la
categoría de Teatro

Selecciona la obra
que le interesa para
ver más información

Selecciona la opción
de guardar

El evento queda
Ver en whimsical
disponible en la
sección Mi agenda Este userflow fue modificado a
lo largo del proyecto.
Userflow
Usuario #2 Desea comprar entradas para un recital cuando estas salgan a la venta. Necesita ser notificado sobre
la fecha en la que las entradas salen a la venta, y ese día tener acceso a la página web por donde se
TaskFlow
venden.
Nuevo usuario se
registra en la
plataforma

Se dirige al buscador
y busca el evento por
su nombre

Selecciona el evento
para ver más
información

Activa las
notificaciones sobre
el mismo
El usuario es
notificado sobre el día
que salen a la venta
las entradas

Selecciona la notificación y
se dirige al evento para ver
más información Ver en whimsical
Dentro de esta sección, Este userflow fue modificado a lo largo del proyecto
seleccioona el link que lo (Solo se visualiza la acción de activar notificaciones).
llevara a la página oficial de
la venta de entradas
Wireframes

07
Evolución wireframes

Wireframe a mano Wireframe digital Wireframe digital Wireframe digital Wireframe digital
fidelidad baja Patrones - fidelidad Guidelines - fidelidad Fidelidad alta
media media
Evolución wireframes

Wireframe a mano Wireframe digital Wireframe digital Wireframe digital Wireframe digital
fidelidad baja Patrones - fidelidad Guidelines - fidelidad Fidelidad alta
media media
Evolución wireframes

Wireframe a mano Wireframe digital Wireframe digital Wireframe digital Wireframe digital
fidelidad baja Patrones - fidelidad Guidelines - fidelidad Fidelidad alta
media media
Evolución wireframes

Wireframe a mano Wireframe digital Wireframe digital Wireframe digital Wireframe digital
fidelidad baja Patrones - fidelidad Guidelines - fidelidad Fidelidad alta
media media
Evolución wireframes

Wireframe a mano Wireframe digital Wireframe digital Wireframe digital Wireframe digital
fidelidad baja Patrones - fidelidad Guidelines - fidelidad Fidelidad alta
media media
Pruebas de
usabilidad
08
Evaluación Heurística

Cumple/No
Principio Detalle
cumple

Ademas de visualizarse en el estado de los bootones, se agregaron pantallas

Visibilidad del estado del sistema Cumple
de carga con motion al inicio de la aplicación.

Relación entre el sistema y el mundo real Cumple

Se busco que el usuario tenga varios caminos para realizar una misma
Libertad y control por parte del usuario Cumple
acción.

Consistencia y Estándares Cumple

Se agregaron cuadros de diálogo que alertan y piden confirmación antes de

Prevención de Errores Cumple
realizar ciertas acciones de las cuales el usuario podría arrepentirse.

Minimizar el uso de la memoria Cumple Sería necesario agregar un historial de búsqueda.

Flexibilidad y Eficiencia de uso Cumple

Diseño Minimalista Cumple

Reconocer, Diagnosticar, Recuperarse de los errores No cumple No se han incorporado los posibles errores

Sería necesario agregar un onboarding, y completar la sección de

Ayuda y documentación No cumple
'información' dentro de los ajustes.
Guión del moderador

Escenario hipotético Criterio de éxito

Hace un tiempo que tenes ganas de ir al teatro, pero no estas al
tanto de que obras hay al momento. Te gustaría además tener
más de una opción para elegir; y también que alguna de estas
alternativas este cerca de tu casa. Te recomendaron esta app
que funciona como una agenda cultural. La idea es que en ella
puedas explorar sobre distintos eventos culturales, y también
encontrar más información sobre alguno determinado al que te
gustaría ir.
Tareas a realizar por el usuario:
El usuario debe ser capaz de entender el
funcionamiento general de la app, para
poder navegar en sus distintas secciones
y pestañas. Sería un éxito que encuentre
con facilidad la forma para guardar y
activar notificaciones, identifique donde
se encuentra la agenda y para que
funciona el mapa y la pestaña de
categorías. Lo ideal es que encuentre la
app como dinámica e intuitiva.

Con la base de este escenario hipotético, se fue guiando al

usuario para que realice las siguientes tareas:

- Guardar uno o más eventos, en lo posible desde la sección

‘categorías’

- Revise la agenda

- Encuentre un evento en el mapa

- Active las notificaciones de algún evento

Métricas
Eficacia: Completo la tarea con éxito
#U1: Magdalena 20 años
Tarea U1 U2 U3 U4 U5 Promedio
#U2: Silvia 57 años
Inicio sesión 1 1 1 1 1 1
#U3: Clara 23 años
Guardar un evento desde la sección categorías 1 0 0 1 1 0,6
#U4: Felipe 25 años
Revisar la agenda 1 1 1 1 1 1
#U5: Ignacio 23 años
Encontrar un evento en el mapa 1 1 1 1 1 1

Activar las notificaciones de un evento 1 1 1 1 1 1

Eficiencia: Redimiento de uso (Se midio el tiempo en segundos) Eficiencia: Rendimiento de uso (Se midio en cantidad de pasos)
Tarea U1 U2 U3 U4 U5 Promedio Tarea U1 U2 U3 U4 U5 Promedio

Inicio sesión 11" 8" 7" 8" 7" 8,2" Inicio sesión 2 2 2 2 2 2

Guardar un evento desde la sección categorías 28" 65" 9" 16" 10" 25,6" Guardar un evento desde la sección categorías 6 10 2 4 4 5,2

Revisar la agenda 12" 23" 5" 12" 11" 12,6" Revisar la agenda 3 3 3 4 3 3,2

Encontrar un evento en el mapa 14" 38" 14" 32" 10" 21,6" Encontrar un evento en el mapa 4 6 3 5 3 4,2

Activar las notificaciones de un evento 10" 9" 3" 2" 3" 5,4" Activar las notificaciones de un evento 2 2 1 1 1 1,4
Resumen ejecutivo

Lo que funcionó
- El formato de la app les resulto simple a todos los usuarios. Notas / conclusiones / recomendaciones.
- Cuatro de cinco usuarios mencionaron que la información está bien Todos los usuarios lograron realizar las tareas,
organizada. Se resaltó esto sobre la pestaña de “categorías”. pero algunos de ellos no por los caminos
- Todos los usuarios lograron eventualmente realizar las tareas. pretendidos. Se atribuye esto más a un falla en
- La mayoría de los usuarios quería explorar e investigar toda la app. la entrevista a que un problema en la app. Lo
- Cuatro de los cinco usuarios encontraron todo lo que esperaban en el menú mismo en cuanto algunos de los usuarios se
drawer. pusieron a recorrer la app antes de realizar las
tareas.
A medida de que se fue avanzando, las tareas
les resultaban más fáciles a los usuarios.
Uno de los usuarios recomendó incluir las
categorías en el menú drawer, pero sin eliminar
Lo que no funcionó la pestaña original.
- Uno de los cinco usuarios encontró dificil el guardar un evento ya que no Uno de los usuarios recomendó resaltar de
reconoció con que botón se realizaba esa acción. alguna forma, en el mapa, los eventos
- Dos de los cinco usuarios tardaron en darse cuenta cómo funcionaba el mapa. guardados.
- Si bien todos los usuarios realizaron la tarea de guardar un evento, dos de ellos

lo hicieron desde el inicio y no desde la pestaña de “categorías” como así se

pretendía.
Moodboard &
Icon desing
09
Moodboard
Icon desing

+ =

El nombre de esta app surge como una referencia al ruido que

produce un aplauso. El objetivo era encontrar un nombre fácil,
dinámico, recordable, y que tuviera de alguna forma (de manera no
muy obvia) relación con el concepto, temática o propósito de la app.
Así surgió “Clap”: los aplausos son una asociación indirecta a lo que
respecta al mundo del espectáculo, entretenimiento, cultura, etc.
UI kit
10
UI kit
Grillas Paleta de colores
Material Desing Primario Secundario Acento
- 4 columnas
- Margen: 16 dp
- 3 calles: 8 dp
- Cuadricula: 8 px #00A2A1 #D26536 #F8D624

Variaciones
Tipografía Iconografía
 UI kit
Tool bar Top bars Variantes Inputs de texto Cuadros de diálogo Drawer menu

Top bar

Tab bar

Snack bars
Variantes
 UI kit
Botones Cards Calendario
Variantes

Dropdown menu

Variantes
Prototipo funcional

11
Ver prototipo
¡Gracias!
Victoria Swinnen
Coderhouse | Diseño UX/UI
Comisión #29420