Se lee en 5 minutos

El reto es crear una demo de App muy sencilla y directa para venta de café, que operará en el propio local o a domicilio. Éstos son 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.
Wireflow para mostrar la arquitectura de la información en detalle.
– Diseño UI de las páginas clave.

1.2. Detalles de la App
– 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, prepararemos el flowchart y el wireflow. Este proceso es fundamental para el desarrollo de las siguientes fases. Es el momento de aplicar nuestra creatividad y preguntarnos qué tiene que hacer la App y cómo tiene que hacerlo. Se trata de una fase divergente de ideación. Utilizaremos una metodología creada por el British Design Council en 2005 y fundamental en design thinking llamada 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 case study sabemos que 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 el wireflow.


1. Splash screen: la primera pantalla que nos encontraremos al abrir la App 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 el establecimiento 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 QR o alguna solución similar identificaremos el pedido, tanto si le llevamos el café al cliente como si viene él a recogerlo al local.

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

Una vez que tanto el flowchart como el wireflow encajan perfectamente, es el momento de pasar al diseño final de la aplicación. Para nuestro ejemplo se han diseñado sólo aquellas pantallas consideradas 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 case study te ayude a aprender e interiorizar el proceso de ideación y diseño de interfaz para crear una App.

 

Suscríbete a tonalidad.es