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

UXUI Process  Español (1).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
Mapa de Empatía.jpg

User Personas

Las User Personas están inspiradas en los gustos, necesidades y experiencias personales de las personas entrevistadas.
 
Captura de pantalla 2023-04-20 152451.png
Captura de pantalla 2023-04-20 152246.png

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:
 
Ideas Clasificadas.jpg

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.
 
Heatmap.jpg

Arquitectura de Información

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

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.
Planear Visitas.jpg
Cupones.jpg
Añadir amigos.jpg
Homepage.jpg

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. 
 
Low Fidelity Wireframes.png

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.
 
Home Page.jpg
Tienda.jpg
Plan.jpg
Perfil-Planes.jpg

Elementos de Diseño

En esta sección se encuentran los elementos de diseño que realicé para la aplicación.
 
Colores
Tarjeta de Colores-1.png
Tarjeta de Colores.png
Tarjeta de Colores-3.png
Tarjeta de Colores-7.png
Tarjeta de Colores-6.png
Tarjeta de Colores-4.png
Tarjeta de Colores-2.png
Tipografía
Group 48.png
Group 49.png
Group 50.png
Group 51.png
Group 52.png
Group 53.png
Group 54.png
Botones
Fill Button
Component 78.png
Fill Button-Trailing Icon
Botones Trailling Icon Fill.png
Fill Button-Leading Icon
Botones Leading Icon Fill.png
Outline Button
Botones Normal Outline.png
Outline Button-Trailing Icon
Botones Trailling Icon Outline.png
Outline Button-Leading Icon
Botones Leading Icon Outline.png
Iconografía
Frame 169.png
Tarjetas
Directorio Vertical
Property 1=Vertical - Directorio.png
Directorio Horizontal
Property 1=Horisontal - Directorio.png
Cupón Vertical
Property 1=Tarjeta Vertical - Cupones.png
Cupón Horizontal
Property 1=Tarjeta Horizontal - Cupones.png
Inputs
Frame 164.png
Frame 165.png
Frame 166.png
Frame 167.png
Frame 168.png
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.
 
Vista previa de prototipo.png

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.
Barra anterior.png
Antes
Barra Actual.png
Después
  • Las tarjetas de cupones no contaban con un color agradable.
Tarjetas Cupones.png
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