App para guitarristas (Case Study II Parte)

Luis Pascual
5 min readAug 28, 2018

Esta es la segunda parte (Fase Visual), del challenge de diseño UX/UI, para el desarrollo de un producto digital para guitarristas. En este enlace puedes leer la fase de research.

Antecedentes

Tras la fase de investigación habíamos llegado a la siguiente definición de producto:

Una app que permita grabar ideas musicales (canciones, riffs…) y compartirlas de forma rápida con otros músicos para que puedan agregarle otras pistas.

LA MARCA

Hay que ponerle ojos y cara a la nueva aplicación que vamos a desarrollar.

El nombre

Aparecen varios nombre sobre la mesa, unas votaciones y algunos aspectos como la sonoridad y el uso de anglicismos que la hacen más entendible a nivel internacional, nos invitan a decantarnos por Sharguitar, que hace referencia a la principal función de la aplicación Share y también incluye una llamada a los guitarristas (usuario clave) gracias a la palabra Guitar.

El logotipo

Una vez definido el nombre vamos a por la imagen de la marca y su tono de voz.

El logotipo de Sharguitar en diferentes aplicaciones

Crear un símbolo que utilice el icono universal de compartir y la forma de la púa de una guitarra, quizás resulten demasiado evidentes, pero nos parecen acertados para una app que justamente se llama Shaguitar y quiere unir ambos conceptos de forma clara y sencilla.

Colores y Tipografía

Buscamos una estética clara y limpia. Y nos parece que eso lo cumple muy bien el azul sobre el blanco que usa iOS en su interfaz, así como la tipografía San Francisco Pro.

Al azul lo acompañamos de un gris neutro para algunos elementos y textos, y por último, el rojo como color de resalte para emplearlo en las acciones de grabación. Un color ya reconocido y utilizado para este tipo de eventos.

El Tono

En cuanto al tono que utiliza la app para comunicarse con los usuarios, este debería ser desenfadado y coloquial, puesto que así muestra mayor cercanía, e incluso camaradería. Características muy valoradas entre la comunidad de músicos.

Algunos ejemplos de como se utiliza el tono, los podemos ver en los copys de los cuadros de diálogo que aparecen al guardar una grabación, o al intentar eliminarla.

Una muestra de cómo se ha aplicado el Tono de la marca al copy de la app

ARQUITECTURA

Definidas las principales funcionalidades con las que contará la aplicación:

  • Afinador.
  • Grabador.
  • Compartir.

Diseñamos los dos flujos más importantes, uno para grabar una idea musical y otro para compartirla.

Flujos.

El primer flujo se inicia con la función de grabación (pasando antes, si se desea, por la de afinar el instrumento). Continúa con ajustar el ritmo a través del metrónomo (mediante un control slide) y empezar a grabar. Al terminar la grabación la guardaremos o la eliminaremos, si consideramos que no merece la pena ser guardada.

El segundo flujo trata la función de compartir, que parte de la pantalla de la biblioteca donde ha sido guardada la grabación. Al seleccionar la pieza musical cuenta con diferentes opciones:

  • Reproducir.
  • Añadir una pista.
  • Compartir (subir a la nube la pieza musical y enviar un enlace a la persona con la que queremos compartirla).
  • Eliminar.
Flujo para grabar una idea musical y flujo para compartirla

Wireframes

A continuación realizamos en Balsamiq los siguientes wireframes en low fidelity. En ellos podemos ver cómo se desarrolla el flujo de las distintas funciones, a través de las pantallas.

Wireframes low fidelity

PROTOTIPO

Para el diseño de la app pensamos en un diseño limpio, simple y minimalista, sin distracciones, donde predomine la funcionalidad sobre los adornos y las florituras.

Tenemos muy en cuenta el contexto en el que se va a utilizar la aplicación, por lo general en espacios reducidos, a los que habría que añadir que además se lleva colgada una guitarra y que las posibilidades de movimiento son algo limitadas.

En las entrevistas, los usuarios nos hablaban de estas limitaciones de espacio cuando tocan en casa.

Cuando un guitarrista tiene una guitarra entre las manos y quiere grabar una idea que le acaba de llegar a su mente, no quiere distracciones ni interfaces sobrecargadas.

Prototipo de las pantallas del flujo de “Grabar y Guardar”
Prototipo de las pantallas del flujo de “Compartir”

SIGUIENTES PASOS

Una vez prototipada la aplicación, pasaríamos a testearla e iterar, modificando los posibles fallos detectados. De esta manera iríamos mejorando el producto, en base al feedback de los usuarios.

Posteriormente se podrían incluir nuevas funcionalidades premium como:

  • Añadir efectos de guitarra (overdrive, delay…).
  • Añadir una biblioteca de ritmos (rock, pop, balada…).
  • Añadir afinaciones alternativas (abiertas, drops…).

OBJETIVOS Y KPIs

Seguimos el método HEART, para la definición de Objetivos, KPIs y métricas, que nos ayuden a detectar el grado de felicidad, compromiso, aprobación, conservación y éxito de tareas, con el siguiente resultado:

Método HEART. Objetivos, KPIs y Métricas

CONCLUSIONES

Lo que me ha sorprendido de este interesante trabajo, es que aunque partas de una hipótesis/idea sobre una posible solución que resuelva un problema. El contacto con los usuarios a través de las encuestas y entrevistas, puede hacer que tu hipotesis pivote hacia un necesidad más real. Es un poco como el detective de CSI que va descubriendo pequeños hallazgos. 😎

--

--