Case Study semana 4: E-commerce app
Creación e-commerce app mobile a partir de un e-commerce web
Esta semana se nos propuso el reto de retomar un ejercicio anteriormente realizado, E-commerce de Pastelería La Villa, y adaptarlo a versión app.
Para este proyecto el equipo fue formado por 2 veteranos de La Villa e-commerce web, que tuvimos que explicar el desarrollo UX y el proyecto completo al resto de compañeros, y otros 2 compañeros nuevos ajenos al proyecto del e-commerce web.
Tiempo limitado para el desarrollo del proyecto 5 días.
Briefing
En esta ocasión ya teníamos desarrolladas las herramientas e investigación acerca del negocio y sus necesidades, por tanto, pusimos al día a los nuevos compañeros y adaptamos un poco las herramientas a la nueva propuesta. No fue fácil, ¡engaña mucho pensar que es solo adaptar!
UX tools
Viendo las modificaciones realizadas en las herramientas UX, a mi parecer la más interesante y que más modificaciones destacables sufrió fue el User Flow.
Partiendo de las herramientas adaptadas comenzamos con el desarrollo de un Crazy8, que pusimos en común con el resto de compañeros del equipo después, como en otras ocasiones con los proyectos anteriores.
Tras terminar con la adaptación de las herramientas y el Crazy8, nos lanzamos al prototipado MID-FI. Estas son algunas de las pantallas:
Y dicho esto, comenzamos con las herramientas para un desarrollo del UI. Manos a la obra
Step 1: Branding attributes, Colors, Typeface
En nuestro primer paso en UI buscamos enfocar la imagen del producto, obtener los atributos de la marca y transmitir al usuario el mensaje de la app usando la herramienta Moodboard. Probamos la herramienta para comprobar si era correcta con algunos test a posibles usuarios y este fue el resultado.
En función del desarrollo y testing de nuestro Moodboard escogimos diferentes gamas de colores para nuestro producto.
En la primera opción buscamos un poco lo que ellos mismos buscaron cuando realizaron su logotipo, mermelada y crema, dos productos básicos en repostería.
La segunda opción, salió como resultado de una evolución y pruebas que realizamos de la primera opción, ya que los colores eran demasiado fuertes y resultaban algo serios por el contraste, además de resultar difícil el uso del color crema ya que daba una sensación de suciedad.
Y por último, la tercera opción que salió como resultado de los colores extraídos de pasteles y frutas, mezcla muy habitual en repostería también.
Una vez decidimos los colores y los atributos de marca, solos nos quedaba pensar en la fuente, tipografía y tamaños de texto.
Step 2: The Brand
Una vez decidimos lo que necesitábamos en el paso 1, realizamos un UI Kit donde representamos la marca. Como ya teníamos la fuente y tipografías, los colores, y los atributos de marca, solo nos quedaba llevarlo a la practica y desarrollar los elementos que íbamos a usar en nuestro prototipado HI-FI y que dan forma a la identidad y marca del producto.
Step 3: Prototype
Y por fin llegamos al prototipado HI-FI. Lo cierto es, que cuando estábamos trabajando en él, nos dimos cuenta de varios fallos o errores que tuvimos que ir corrigiendo. No fue fácil, pero obtuvimos unos resultados de los que estar orgullosos.
Instrucciones prototipado
La situación es la siguiente, eres un usuario no registrado que desea hacer un pedido a domicilio con pago a través de tarjeta bancaria. A la hora de mirar los productos tienes interés en ver la ficha de tarta de queso y bocado de nata antes de añadirlos a la compra o bandeja. Por ultimo, decir, que registrarte no esta en tus planes. El pedido consta de:
- Una tarta de Santiago
- Dos tartas de queso
- Una bandeja pequeña de pasteles con 1 trufa de chocolate, 2 mini flanes y 2 bocados de nata.
¡Feliz experiencia de prototipado!
Learning
Aprender a explicarse en ocasiones es todo un reto, y no nos damos cuenta hasta que se nos plantea, y esto es algo de lo que nos dimos cuenta en el momento en que tuvimos que comunicar a nuestros compañeros el proyecto anterior para el mismo negocio. Pero con paciencia, tiempo y dedicación creo que todos somos capaces de expresarnos adecuadamente, y así fue.
No solo aprendimos en comunicación y trabajo en equipo, sino que también aprendimos mucho unos de otros en materia de diseño y composición, ya que todos no teníamos el mismo nivel de aprendizaje.
Fue un camino duro por indecisiones y no estar de acuerdo a menudo, pero increíble como aprendizaje que nos llevamos todos los componentes del equipo, además de todas las herramientas nuevas que aprendimos para UI.
