Se lee en 5 minutos

Hoy vamos a explicar el proceso de diseño UX/UI para crear una App de venta de café básica. Éstos serían los requisitos:

1. Coffee shop App

1.1. Brief: el reto es diseñar una App para vender café.
Para ello hay que crear:
Flowchart o diagrama de flujo de la información.
Wireframes para mostrar la arquitectura de la información en detalle.
– Diseño UI de las páginas clave.

1.2. Detalles de la App
– Nombre de la App: The Daily Grind.
– Propósito: App para pedir café en Android e iOS.
– La tienda sólo sirve un tipo de café.
– El usuario puede añadir de 0 a 2 raciones de leche.
– El usuario puede añadir de 0 a 2 raciones de azúcar.
– El usuario puede elegir el tamaño de su café: Small, Medium o Large
– Te lo pueden enviar donde estés, siempre que el tiempo de entrega no supere los 30 minutos.
– Puedes elegir una hora para ir a recogerlo tú a su local.

¡Empecemos!

Una vez leídos y entendidos todos los requisitos necesarios para el desarrollo de la App, creamos el flowchart o diagrama de flujo. Este diagrama es fundamental para el desarrollo de las siguientes fases. Es el momento de dar rienda suelta a nuestra creatividad y preguntarnos qué tiene que hacer la App. Se trata de una fase divergente de ideación. Utilizaremos una metodología creada por el British Design Council en 2005 y muy utilizada en design thinking; se llama double diamond (doble rombo). Esta metodología nos proporciona la flexibilidad que buscamos para aportar diferentes ideas y soluciones, para luego enfocarnos en aquellas más realistas y viables comercial y logísticamente.

En este caso es fundamental la facilidad de uso para conseguir que el proceso de encargar café sea rápido y eficaz, además de cumplir rigurosamente con los requisitos que se nos piden. Revisa el flowchart al menos por un minuto y vuelve a él después de que hayamos explicado cada una de las pantallas que componen los wireframes.


1. Splash screen: la primera pantalla que nos encontraremos al abrir la App en nuestro smartphone (o tablet) será la Splash screen o pantalla de bienvenida. Se mostrará mientras cargan los contenidos de la App y  es el lugar perfecto para poner el logotipo o nombre de nuestra App.

2. Opciones de envío: pedimos al usuario que decida si quiere que le lleven el café a su localización, o prefiere pasarse él mismo por la tienda de café a recogerlo.

3. Lo quiero aquí en 30 min: la App debe contar con un sistema muy preciso de geolocalización de la dirección introducida por el usuario. Es imprescindible la precisión para valorar si un repartidor será capaz de llegar a ese lugar en 30 minutos o menos. Ser capaces de entregar el café en mano antes de 30 minutos es un valor diferenciador de nuestra App / negocio respecto de la competencia. Necesitamos que se cumplan estrictamente los tiempos para aportar confianza y credibilidad a nuestros usuarios. Estos dos valores marcarán la diferencia y podrán abrirnos las puertas del éxito.

4. El cliente recogerá su café en nuestra tienda: la geolocalización nos informa de que el usuario está a mas de 30 minutos de distancia y nos sería imposible llevarle el café en ese plazo. O quizá simplemente el cliente prefiere encargarse él mismo de la recogida en el local. En ambos casos damos la opción de seleccionar un plazo en el que tendremos el café listo para su recogida.

5. Elige el café a tu gusto: a la siguiente pantalla se llega en todos los casos y nos permite elegir el tamaño y “extras” de nuestro café. 

6. Confirmación de pedido: la típica e imprescindible pantalla confirmando la elección que ha hecho el usuario.

7. Métodos de pago: ofrecemos al cliente una variedad de formas de pago para que se sienta lo mas cómodo posible y este proceso no se convierta en un pain point.

8. Verificación del pedido y recogida: mediante un QR o alguna solución similar identificaremos el pedido tanto le llevamos el café al cliente como si viene él a recogerlo al local.

A continuación puedes revisar los wireframes con todas las pantallas que acabamos de explicar y su flujo de navegación.

Una vez que el flowchart inicial y los wireframes encajan perfectamente, es el momento de pasar al diseño final de la aplicación. Para nuestro ejemplo hemos diseñado sólo aquellas que hemos considerado clave:

1. Splash screen

2. Opciones de entrega:

3. Hora de recogida:

4. El café que estás deseando:

5. Agradecimiento e identificador de tu café:

Por último, te dejo un PDF con la artes finales en alta resolución para que las disfrutes y analices. 

Una vez más, deseo que este artículo te ayude a aprender e interiorizar el proceso de diseño UX/UI para crear una App. ¡Suerte!

 

Suscríbete a tonalidad.es