top of page

31 Boulevard
Aplicación para Centro Comercial
Proyecto para Profesión de EBAC
Objetivo
Realizar la plataforma del centro comercial "31 Boulevard", cuya finalidad principal es crear fidelidad en sus clientes y atraer nuevos consumidores.
No existen especificaciones, por lo que es un proyecto abierto a las propuestas.
Posición
Product Designer
Investigación de usuarios, Interacción, Diseño visual, Prototipos y Pruebas.
Desafío
Identificar al usuario, combinar las actividades del centro comercial con las funciones digitales y hacer una aplicación práctica para los requerimientos de cada cliente, proveyendo una magnífica experiencia multisensorial.
Tiempo del Proyecto
2 meses
Únicamente área de diseño sin desarrollo.
Solución
Trabajé en el proyecto de "31 Boulevard" como Diseñadora de Producto para crear una aplicación que forme parte de la experiencia del cliente del centro comercial, acompañándolo por todo el proceso:
Conectar con amigos o familiares para planear el día de su visita, agregando los locales que desean recorrer, de una forma divertida y dinámica; tener acceso a un programa de recompensas, información sobre la accesibilidad (elevadores, sillas de ruedas, cambiadores para bebés, estaciones de mascotas, etc.), novedades del lugar, entre otros.
Proceso
.png)
Conociendo al Usuario
Asistí a un centro comercial y me acerqué directamente al usuario para observar sus actividades, cómo las hacían y por qué las hacían.
Por lo que pude llegar a la conclusión de que:
-
Aproximadamente el 80% de los usuarios eras jóvenes de entre 15 y 35 años.
-
Aproximadamente el 10% eran usuarios mayores que acompañaban a los más jóvenes​
-
Aproximadamente 10% eran niños.
-
La mayoría vienen acompañados por lo menos por una persona.
-
Muchas familias asisten con hijos y perros.
-
La persona promedio compra un café o un helado y después camina por la plaza, pero no entra a las tiendas.
-
Un gran número de personas solas permanecen en un café con su computadora.
Entrevistas al Usuario
Entrevisté a algunos asistentes del centro comercial para poder comprender sus necesidades, hacer un mapa de empatía, así como proto-personas.
Las entrevistas arrojaron los siguientes datos:
​
-
La economía de nuestros usuarios ha sido afectada por múltiples factores como la pandemia y la inflación, por lo que son más cuidadosos con sus gastos y planean mejor sus compras.
-
Disfrutan de ir a un lugar entretenido donde pueden disfrutar con su familia o amigos, donde tienen todo en un mismo lugar sin tener que preocuparse por su seguridad.
-
La parte más difícil es ponerse de acuerdo con sus familiares o amigos para encontrarse, y decidir qué hacer.
​
con base en esta información creé este mapa de empatía:
Mapa de Empatía

User Personas
Las User Personas están inspiradas en los gustos, necesidades y experiencias personales de las personas entrevistadas.


Ideación
Se llevó a cabo una lluvia de ideas de información y funciones para la aplicación con base en las necesidades del usuario; después, se seleccionaron por categorías y por color para facilitar su identificación, dando el siguiente resultado:

Heatmap
Trasladé las ideas anteriores organizándolas en un Diagrama de Moscow, para categorizarlas por el impacto que tendrían versus el esfuerzo que se requiere para desarrollarlas; por último, se hizo una votación con el equipo en modo de Heatmap sobre las propuestas que debían ser parte de la primera versión vs las que podían esperar a etapas posteriores.

Arquitectura de Información
La Arquitectura de información fue planeada para que los usuarios puedan encontrar el contenido de manera sencilla y organizada.

Digital Wireframes
Los Wireframes fueron hechos con una tableta y un lápiz digital. Esto me dio una mejor idea de cómo deseaba diseñar esta plataforma y la información que esperaba tener en ella, así como el fácil acceso a los elementos.




Wireframes de Baja Fidelidad
Después de los Wireframes Digitales llevé a cabo los Wireframes de Baja Fidelidad con los que realicé pruebas sobre el funcionamiento básico de la aplicación.

Mockups de Alta Fidelidad
Los mockups son el resultado de la arquitectura de información, los wireframes de baja fidelidad y los elementos de diseño unidos en este producto.




Elementos de Diseño
En esta sección se encuentran los elementos de diseño que realicé para la aplicación.
Colores







Tipografía







Botones
Fill Button

Fill Button-Trailing Icon

Fill Button-Leading Icon

Outline Button

Outline Button-Trailing Icon

Outline Button-Leading Icon

Iconografía

Tarjetas
Directorio Vertical

Directorio Horizontal

Cupón Vertical

Cupón Horizontal

Inputs





Planeador de Visitas
Entrada al Plan

Propuesta de Actividad

Actividad Aceptada

Amigos
Añadir a Amigo

Añadir a Amigo al Plan

Amigo Añadido

Notificaciones
Notificación Sin Leer

Notificación Leída

Chat
Mensaje Recibido

Mensaje Enviado

Vista Previa del Prototipo
Estas son todas las interacciones que se realizaron para el prototipo hecho con Figma.

Prototipo de Alta Fidelidad
Este Prototipo de Alta Fidelidad es el resultado de los mockups de alta fidelidad, como de las interacciones que se añadieron y es posible interactuar con este prototipo realizado con Figma.
Pruebas de Usabilidad
Se hizo la prueba de usabilidad del producto con varios usuarios en el que tenían un tiempo estimado de 20 minutos para completar las siguientes tareas:
-
Buscar una tienda en el directorio y añadirla a favoritos.
-
Buscar en la lista un cupón y añadirlo a favoritos.
-
Planear una visita.
Al terminar esta prueba se concluyó que:
​​
-
La barra de acciones contenía demasiados elementos y era confusa al utilizarla.​
-
Los Usuarios preferían tener acceso directo a sus notificaciones antes que a otro elemento.

Antes

Después
-
Las tarjetas de cupones no contaban con un color agradable.

Antes

Después
-
La imagen de perfil era demasiado grande.

Antes

Después
Aprendizaje
Trabajar en este proyecto ha sido una experiencia emocionante y sobre todo desafiante. Al ser mi primer diseño como Product designer encontré mi pasión, esa conexión que logramos con el usuario, ya que no solo pensamos en lo que puede ser beneficioso para la empresa sino en sus necesidades y su experiencia al utilizar el producto que estoy creando; de la misma manera, observar cómo poco a poco va tomando vida y pasa de ser una idea a una realidad que impacta.
El mayor aprendizaje que tuve fue:
-
El usuario siempre es primero: es sumamente importante escuchar de primera mano qué es lo que quiere, y ser lo suficientemente sensible para saber qué es lo que está pensando y hacer un proyecto que no solo satisfaga sus necesidades sino que sobrepase sus expectativas.
-
Dominar software como Figma: es muy importante tener el conocimiento de Figma ya que es la herramienta que nos ayuda a realizar el prototipo compartir lo que tengo en mente de una forma que sea accesible y fácil de entender para todos.
-
Todos los elementos deben ser cuidadosamente planeados: Para obtener excentes resultados y minimizar los errores, de tal manera que el trabajo resulte perfecto.
​
​
​
​
Espero que hayas disfrutado tanto este proyecto como yo, ¡Gracias por llegar hasta aquí conmigo!
bottom of page