top of page
Anidy Gil Portada.png

Anidy Gil Studio

Primer diseño de página web con
Tienda Online 

Objetivo

Diseñar la página web en formato Desktop y Mobile para Anidy Gil Studio cuya finalidad es vender productos de branding, utilizando las Obras de la artista como estampado.
No se trata solamente de una tienda online de artículos promocionales, también contiene una exposición permanente del trabajo de la Artista y los clientes pueden contactarla para solicitar pinturas por pedido.

Posición

Product Designer

Investigación de usuarios, Interacción, Diseño visual, Prototipos y Pruebas.

Desafío

Crear una página que cautive al usuario de edad 30+ y lo motive a comprar arte de una forma más accesible y en diferentes presentaciones. Pero fundamentalmente que funcione como Galería dando a conocer el trabajo y las habilidades de la Artista, y que los usuarios puedan contactarla directamente.

Tiempo del Proyecto

2 meses
Únicamente área de diseño, el desarrollo queda pendiente.

Solución

Trabajé para “Anidy Gil Studio” como Diseñadora de Producto.

El enfoque principal de este proyecto es dar a conocer el arte de Anidy Gil abriendo también la oportunidad de contacto para Galerías, Coleccionistas, Clientes y cualquier persona interesada en su página.


Adicionalmente, la Artista pretende plasmar sus Obras y su estilo moderno más allá del lienzo, en una diversidad de productos que resulten atractivos y accesibles para el mercado más joven.
 
La solución fue crear una tienda online; diseñada principalmente como Galería de Arte Virtual, donde el usuario conozca la Obra de la Artista, pero también pueda acceder fácilmente al universo de productos que ofrece, filtrando por categoría, lo que sea de su interés.

Proceso

UXUI Process  Español (1).png

Conociendo al Usuario

Realicé un sondeo en los archivos de la Artista para analizar las características de sus compradores hasta el día de hoy, así como una investigación sobre diversos artículos en Internet y esta es la información obtenida.
 

  • Aumento anual del 117% en ventas públicas de arte digital en 2020-2021.

  • Mercado de aproximadamente 2.700 millones de dólares.

  • Las ventas de arte online representan el 10% del mercado global.
     

  • Los principales compradores de arte digital son de 30+.

  • La gente más joven busca opciones de arte más accesible

Entrevistas al Usuario

Entrevisté a algunos compradores recientes del Estudio, así como clientes potenciales para conocer sus necesidades y especialmente sus pain-points; y de acuerdo con estos datos, diseñar la mejor experiencia para ellos; estos fueron los resultados:
​
  • Los compradores desean tener contacto con la Artista por medio de una Galería Virtual donde puedan apreciar las Obras de Arte, interactuando con éstas, lo que resultaría más atractivo.

 

  • Quieren ver desde el principio el tipo de producto que se ofrece y el estilo de la Creadora desde el home page.

 

  • Que utilice palabras fáciles para todos, así como iconos que especifiquen lo que pueden encontrar allí.

 

  • Tener la oportunidad de interactuar con Anidy para conocer más de ella y/o hacer pedidos personalizados.
​
Con base en esta información creé el siguiente mapa de empatía:
Mapa de Empatía
Empaty Map.png

User Personas

Las User Personas están inspiradas en los gustos, necesidades y experiencias particulares de los entrevistados.
 

Arquitectura de Información

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

Paper Wireframes

Los Wireframes fueron hechos con papel y lápiz. Esto me dio una mejor idea de cómo deseaba diseñar esta plataforma con la información y los elementos que esperaba tener en ella.
 
Paper Wireframe Desktop.jpg
Paper Wireframe Mobile.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 plataforma.
 
Web 1920 – 1.png
iPhone 14 Pro Max – 1.png
Web 1920 – 3.png
iPhone 14 Pro Max – 3.png
Web 1920 – 4.png
iPhone 14 Pro Max – 4.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.
 
Desktop-Home Page.png
Mobile-Home Page.png
Desktop-Product Clothes.png
Mobile-Product.png
Dektop-Cart Clothes.png
Mobile-Cart.png

Elementos de Diseño

En esta sección se encuentran los Elementos de Diseño que elaboré para la página web.
Colores
Colors.png
Tipografía
Botones
Mobile
Desktop
Iconografía
Inputs
Heather and Footer
Logo

Vista Previa del Prototipo

Estas son todas las interacciones que se realizaron para el prototipo hecho con Adobe XD en versión Mobile y Desktop.
 

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, lo que permite interactuar con este prototipo realizado con Adobe XD.
 

Pruebas de Usabilidad

Se hizo la Prueba de Usabilidad del producto con varios usuarios quienes contaban con un tiempo estimado de 20 minutos para completar las siguientes tareas:
 

  • Buscar el producto de su preferencia.

  • Añadirlo al carrito de compras.

  • Completar la compra


Al terminar esta prueba se concluyó que:

​

  • Los usuarios necesitaban tener acceso al carrito de compras y al buscador desde la barra de navegación en todo momento, por lo que ahora están en el lado derecho.
Antes
Después
  • Era necesario crear una lista en la página principal que contuviera las diferentes categorías de artículos que pueden encontrar en la tienda online, por eso añadí un carrusel debajo del hero image con iconos que los detallan.
Después
Antes
  • Además de la búsqueda por producto, añadí la opción de filtrar por Obra de Arte, por lo que todos los productos que contengan esa ilustración estarán en una sola pantalla.
Web 1920 – 2.png
Desktop-By Art.png
Antes
Después

Aprendizaje

Disfruté mucho trabajar en este proyecto, lo que más me gustó fue que no solo se trata de un negocio online, sino que debía ser una tienda que conectara con las personas a través del arte. 
Era una gran responsabilidad poner todos los elementos para que el alma de la Pintora pudiera tocar el alma de los usuarios y tener una conexión en la que sus creaciones cumplan el propósito de impactar vidas.
Anidy Gil nos enseña a viajar con la imaginación a través de su pintura, donde cada uno puede contar su propia historia; por lo que fue un proyecto en el que las emociones se vieron involucradas y el objetivo fue mayor al de una empresa empatizando con un comprador.

 

En esta ocasión produje el prototipo con Adobe XD y Adobe Creative Suite pues disfruto mucho trabajar con ellas.

El mayor aprendizaje que tuve fue:
 
  • Una frase muy común dentro de los diseñadores UX/UI es que no somos artistas, diseñamos para que el mensaje sea comprensible para quien lo utilice, a diferencia de un Creador de Arte con el que cada persona que observa sus obras puede llegar a su propia conclusión. Así que, la expertice de ser UX/UI Designer es poner los elementos correctos en función del artista.
    Esta vez el arte y el diseño se unieron en un solo proyecto con el objetivo en común de conectar con el usuario, mi papel fue diseñar todos los componentes para que la navegación fuera fluida y que el arte de Anidy Gil y sus productos se convirtieran en el centro de atención, sin olvidar la imagen de su Studio.
  • ¿ Y si ayudamos al usuario a encontrar lo que no sabe que busca?: Añadir la búsqueda por categoría y por obra de arte, fue el resultado de las pruebas de usabilidad; comprendí que como compradores, en ocasiones no estamos seguros de lo que buscamos; casi siempre entramos con la idea de "solo estoy viendo" porque esperamos encontrar lo que haga brincar a nuestro corazón; por esta razón agregué dicha función; porque, ya sea que la persona se sienta atraída por un tipo de producto o simplemente porque amó una ilustración, puede definir lo que más le gusta sin necesidad de agobiarse al no saber qué buscar.
  • Podemos hacer que el cliente tenga sentimientos reales: Cuando aprendemos los Mapas de Empatía y el User Journey Map, a veces creemos que las emociones que reflejamos llegan a ser un poco... exageradas, pero trabajar con alguien que espera provocar una explosión de sensibilidad y emotividad en sus espectadores, me hizo entender que todo lo que hacemos son experiencias, y dependiendo de qué tan buena o qué tan mala haya sido, puede cambiar por completo nuestro estado de ánimo durante el día y, eso me da más satisfacción porque siempre me he enfocado en que el usuario tenga la mejor vivencia, que logre conectarse emocionalmente con una plataforma y la haga parte de su vida diaria.
​
​
​
Espero que hayas disfrutado tanto este proyecto como yo, ¡Gracias por llegar hasta aquí conmigo!
bottom of page