Real-Time Planning Poker
App en Android de Planning Poker en tiempo real
CLIENTE
Privado
CONTEXTO
Herramienta Planning Poker
OBJETIVO
Diseñar un M.V.P para App en Android
ROL
Freelance
Diseñador UX-UI
DURACIÓN
2020 Diciembre
SOFTWARE
Adobe Illustrator
Figma
Etiquetas del proyecto
Agile App Android Material Design M.V.P Planning Poker Real-TimeInversión de tareas en % de tiempo
Equipo
El post está dividido en: 01_UX-UI, 02_Branding y 03_Conclusiones
01_UX-UI
Bet―Entendiendo al cliente
Cliente
Ingeniero de Android.
El objetivo era claro por parte del cliente, desarrollar una App en Android como proyecto propio para aumentar su portfolio.
Reto del diseño
Su idea, hacer planificaciones de Sprint (metodología Scrum) usando como M.V.P el Poker Planning, con la característica principal de ser las votaciones en tiempo real junto a tu squad.
Cada usuario dispondrá de un mazo de poker modificado.
Las cartas del mazo para el M.V.P seguirán la sucesión de Fibonacci: 0, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89 y además, una tarjeta con signo de interrogación (incertidumbre o desconocimiento) y otra con un signo del café (necesita un descanso).
Como decisión final se descartó la secuencia «0» por considerarla de valor nulo.
En el futuro se podrá ampliar a tallas de camisetas y otras medidas
Quiere:
- Un diseño UI similar a la competencia.
- Elementos visuales que recuerden o hagan referencia al Poker.
- Un diseño Material Design, aunque hay total libertad es preferible tenerlo en cuenta.
- Caso de uso completo sobre las «salas» ¿Cómo se van a mostrar las salas? ¿Y el resultado? ¿Y si como moderador quiero proponer varias tareas de manera continúa?
Necesita:
- Creación de marca: paleta de color, tipografía y logo. El naming se mantiene de modo temporal.
- Flujo de usuario de login. Un buen ejemplo sería el de Sonali Banerji
- Flujo de creación de una sala.
- Flujo de unirse a una sala.
- Flujo de votación de una o varias tareas.
- Todos los estados de los diferentes elementos gráficos, ej: Botón (active, inactive, focus…etc).
- Interacción de las pantallas y elementos entre sí.
Board―¿Quiénes son los usuarios?
👤 Moderador de la sala
Usuario inicial. Puede crear y cerrar salas.
🔜 Al crear la sala, automáticamente se dirigirá a esta.
🔙 Al cerrar la sala, todos los usuarios serán expulsados y volverán al Inicio.
👉 Puede seguir proponiendo nuevas tareas en la misma sala sin necesidad de cerrarla ni volver a invitar a su squad.
Pantalla_Sala creada como Moderador
&
Pantalla_Votación en sala como Squad
👥 Miembro de la sala
Usuarios de la squad.
🗳️ Pueden votar la estimación de la tarea.
👀 Pueden ver las votaciones en tiempo real y el resultado final.
Rules―Preguntas y respuestas
Nuestro producto
Mínimo 3 personas―Máximo 10 personas.
Sala: Se podrá acceder a través de un ID Room donde el moderador tendrá la opción de invitar con un CTA. El ID Room será visible para todos los usuarios.
Moderador: Desvelará los votos cuando su squad haya finalizado la votación. El moderador también podrá votar.
Squad: Pueden entrar y salir en cualquier momento de la sala.
Comprendiendo a la competencia
Para la competencia directa se ha tomado como referencia Planning Poker Online, se definen a sí mismos como la mejor app de póker para equipos de desarrollo ágil.
Pros
- Diseño de Interfaz (UI)―Tiene un lenguaje moderno, claro e intuitivo, además similar al resto de apps de la competencia.
- Permite seleccionar diferentes sistemas de votación―Se puede tomar como referencia para escalar la app en el futuro.
- Unirse como espectador―Puede ser una función interesante en determinadas tareas para otros departamentos.
- Modificación de sala―Permite en cualquier momento modificar las reglas de la sala.
Contras
- El moderador puede decidir si ve él solo las cartas o todos lo de la squad―Puede provocar discrepancias con el resto del equipo.
- Modificación de la sala―Para el resto de usuarios no se activa ninguna notificación con los cambios.
- Resultado de la votación―Muestra todas las votaciones, se podría considerar mejor los 3 más votados para una mejor estimación de la tarea.
All in―Ejecución
Flujo de votación de un usuario de la Squad
El flujo de la votación consta de 4 pantallas en total.
1️⃣ Invitación por parte del moderador
O
1️⃣ Introduce nº de la sala de modo manual
Para
2️⃣ Votación de la tarea y espera
Con
3️⃣ Resultado final y votación de la squad
Y finalmente
4️⃣ Siguiente votación de otra tarea
O
4️⃣ Volver a inicio
La votación siempre será en tiempo real, por lo que a medida que cada usuario vote aparecerá su «carta» y nick correspondiente.
En la votación final se optó por mostrar el resultado como si se tratara de un podio.
En caso de existir estimaciones con un número similar de votos se tomó la decisión de mostrar las 3 más votadas, de esta manera la votación destacada tendría una referencia por debajo y encima de esta.
A medida que el proyecto se vaya desarrollando, se iterará en todos los flujos y se irá ampliando para ir mejorando las funciones, la experiencia de usuario y el diseño.
02_Branding
Play the board―Diseño y conceptos
Combinando las piezas
Para crear la marca de Real-Time Planning Poker se partió de los principales conceptos del producto.
➰ Metodología Agile, es bastante habitual que la metodología agile se represente de manera gráfica como un ciclo.
🔢 Sucesión de Fibonacci, dado que la app parte de la sucesión de Fibonacci como MVP, se utilizarán los círculos para crear la forma del logo en una proporción áurea.
🃏 Poker, si nos abstraemos se puede obtener los 4 palos del poker (trébol, corazones, picas y diamantes) y de esta manera, 4 elementos/formas.
❓️Creación de un símbolo, en definitiva se necesita un símbolo bien construido, que sea responsive y pueda ser empleado en el lenguaje visual de la app.
Represent―Creando el Logo
¿Qué hay en Google Play Store?
Conclusiones.
Colores: Predominio del color azul en diferentes tonalidades.
Formas: Uso de la forma circular y en mayor medida rectangular, y si es rectangular en forma de carta.
Conceptos: Se representa de manera clara la idea del Planning Poker, valores numéricos, mazos de poker y elementos asociados al progreso/continuidad.
Con todas las ideas claras es necesario aterrizarlas e ir probando, para ello trabajo como si se tratara de un moodboard con las formas y colores, una vez decidido el prototipo correcto, creo un nuevo documento y sigo iterando. Finalmente analizo su funcionamiento en diferentes tamaños y perspectivas, y creo un arte final para las necesidades (colores, tamaños y formatos) del cliente y del producto.
Por una parte, registrar cada pequeño cambio que hago me permite tener consciencia de todas las decisiones tomadas, por otra parte los bocetos están compitiendo unos con otros, de esta manera se cual destaca y funciona para el producto.
Winner―Decisiones y resultados
Paleta monocolor azul
- Simplificación del diseño para agilizar el desarrollo.
- Diseño visualmente conectado para crear un producto memorable.
- Un producto visualmente realista con la competencia y que busca destacar el contenido/función de la app.
Tipografía
- Familia tipográfica Roboto, tipo sans-serif desarrollada por Google, accesible, moderna y funcional. Usada en las guías de Material Design.
03_Conclusiones
Es una app que esperemos que aporte una nueva visión al resto de la competencia
Reflexión final
Midiendo el éxito
El resultado se consiguió rápido y en el tiempo estimado. El briefing inicial por parte del cliente fue fundamental para el diseño y las decisiones finales, saber escuchar sus necesidades y comprobar de primera mano el funcionamiento del Planning Poker facilitó todo el proceso.
Personalmente espero en un futuro seguir escalando Real-Time Planning Poker y medir el éxito a través del testing y las estadísticas.
Aprendizaje
¿Qué hubiera cambiado?
Definir de un primer momento todas las necesidades del producto, una parte es lo que el cliente necesita y otra es toda la elaboración que supone el resultado final, a pesar de ser un M.V.P no se puede reducir únicamente a «pantallas», es por eso que la próxima vez me gustaría establecer un roadmap desde un principio. Y si bien es cierto que el planning poker es una herramienta agile ya conocida echo en falta prototipos previos con usuarios.
Diseñemos el mañana
Formulario
RESPUESTA EN MENOS DE 24 HORAS