Mercopig
Plataforma online para subastas de ganado porcino
Mercopig, es una plataforma online para la subasta de ganado porcino. Dicha plataforma pondrá en contacto a los compradores y los vendedores para poder fijar un precio y realizar una venta. La arquitectura está pensada para un trabajo mixto entre un entorno web y app móvil, planteando una plataforma multi idioma para poder operar a corto plazo en toda Europa y pudiéndose valorar a medio plazo la transición a otros mercados de animales vivos.
Para este proyecto se han diseñado los siguientes flujos:
- Plataforma / desarrollo web para un usuario administrador, con la capacidad de controlar todas las pujas en tiempo real, registrar y bloquear usuarios, enviar notificaciones…
- Plataforma /desarrollo web y aplicación móvil para un usuario comprador, donde puede modificar sus datos de perfil, ver las subastas activas, pujar por la que le interesa y controlar la subasta en tiempo real.
- Plataforma /desarrollo web y aplicación móvil para un usuario vendedor, donde puede modificar sus datos de perfil, participar como subastador y seguir las pujas a tu subasta de forma instantánea. Se podrá comunicar con el vendedor una vez que la compra ha sido verificada.
- Plataforma /desarrollo web y aplicación móvil para un usuario vendedor/ comprador, esos usuarios que comprenden ambos roles, donde podrán participar en subastas como subastador y pujador.
- Desarrollo en WordPress de una web corporativa donde dar a conocer el proyecto y conseguir usuarios. Se puede consultar esta web y conocer más sobre el funcionamiento de este proyecto en el link inferior.
Como se trata de un proyecto de gran envergadura, lo he dividido en 3 secciones.
- Por un lado el diseño de la plataforma web con sus respectivos flujos para usuario administrador, comprador, vendedor o ambos.
- El diseño de las pantallas de la app, en este caso para usuario comprador o vendedor ( no se contempla una app para el usuario administrador).
- Por último, el diseño de la web más “comercial”, la que se usará para darse a conocer, conseguir leads y explicar el proyecto.
MI ROL:
UX, Visual Designer, Product Designer
Cliente:Proyecto desarrollado a medida desde la empresa e-tecnia Soluciones para Mercopig.
Fecha: 2021
Herramientas:
Adobe XD, WordPress, Elementor
Plataforma / Desarrollo Web
Usuario Administrador
La zona de administración será un entorno web responsive (accesible desde cualquier dispositivo) sin embargo se entiende que será un trabajo que se realizará principalmente desde un ordenador. Se establece inicialmente la existencia de un único usuario de administración, el cual podrá realizar todas las acciones disponibles en la zona.
El usuario administrador tendrá los siguientes apartados:
- Vista general: La pantalla de inicio, donde podrá ver los últimos estados de las subastas y las notificaciones y alertas pendientes.
- Usuarios: En este apartado el administrador podrá controlar los usuarios, consultar y validar la documentación de los usuarios, y bloquearlos para que no puedan pujar. Los usuarios podrán ser vendedores, compradores o a la vez compradores y vendedores.
- Subastas: El administrador encontrará aquí todas las subastas, podrá consultarlas y cambiar el estado de las mismas. Los estados de estas pueden ser: activa, pendiente ( pendiente de validar por el administrador), parada o finalizada (dentro de finalizada se dividirá en pendiente de pago o pagadas). Inicialmente encontrará un listado de las mismas, donde por comodidad y pensando en un futuro se pueden mostrar las del último año, aunque se podrán consultar todas, y contará con un filtro de fechas, tipo de lote, unidades y fecha de carga para que sea más fácil encontrar una subasta en concreto. Del listado de subastas podrá acceder a toda la información del lote de la subasta.
- Alertas: En esta sección se recogen todos los tipos de alertas que se pueden registrar en la plataforma. Las alertas se clasifican en los siguientes tipos:
- Alertas de documentación
- Alertas de subasta para validar
- Alertas de subasta finalizada
- Alertas de pagos correctos
- Alertas de pagos incorrectos, tiempo expirado
- Configuración: En este apartado el administrador podrá incluir todos los datos necesarios para el funcionamiento de la plataforma, principalmente la cotización de la lonja de Lleida de forma semanal, pero además todos los datos que los usuarios utilizan para las selecciones, tipos, razas, vacunas.
Para diseñar este proyecto se partió del briefing del cliente, donde estaban definidos los campos necesarios para cada tipo de usuario. Con estos datos se desarrollaron unos wireframes en media de cada uno de los flujos y para cada tipo de usuario que el cliente tuvo que validar. Una vez validados y con los cambios pertinentes, comencé con el diseño de la interfaz. Tras discutir el diseño, volver a validarlo con el cliente y comprobar que estaba todo contemplado paso a programación, y posteriormente a su testeo.
En las imágenes inferiores podéis ver los wireframes en media y alta de algunas de las pantallas principales.
Prototipado Administrador:
Usuario Comprador
- Participar como postor y seguir las subastas que le interesen con el sistema de filtrado.
- Pujar por las subastas que le resulten interesantes y controlarlas en tiempo real.
- Comunicarse con el usuario vendedor una vez que la compra ha sido verificada.
- Modificar los datos del perfil.
- Vista general: La pantalla de inicio, donde podrá ver los últimos estados de las subastas en las que esta interesado, las que se le han asignado y las notificaciones y alertas recientes.
- Subastas activas: El comprador verá en esta pantalla todas las subastas activas actualmente en el mercado, y las podrá filtrar por fecha de carga, tipo de producto ( lechones, madres..) y unidades. También podrá pujar desde esta pantalla en la subasta que le interese y realizar pujas a liquidación.
- Subastas asignadas: En esta página se mostrará un listado de todas las subastas en las que ha participado el usuario comprador y le han sido asignadas. Este listado también tendrá filtrado, y se diferenciarán las subastas ya pagadas y las pendientes de pago. Los datos del vendedor no se mostrarán hasta que la subasta haya sido pagada.
- Mis datos: Datos de registro , incluyendo certificados de calidad y registro sanitario.
- Contáctanos: Formulario de contacto y datos de la empresa de Mercopig, para dudas e incidencias.
- Notificaciones: Alertas referentes a subastas que le han sido asignadas, datos de registro defectuosos, pagos realizados…
Usuario Vendedor:
- Participar como subastador y seguir las pujas de sus subastas en tiempo real.
- Dar de alta todas sus granjas, y recibir ofertas a liquidación para aquellas subastas que no han tenido tanto éxito.
- Comunicarse con el usuario comprador una vez que la compra ha sido verificada.
- Modificar los datos del perfil.
- Vista general: La pantalla de inicio, donde podrá ver sus últimas subastas publicadas y el estado en el que se encuentran ( activa, parada, finalizada, pendiente de aprobación…), las últimas notificaciones, y las subastas finalizadas pagadas o pendientes de pago.
- Subastas publicadas: El vendedor verá en esta pantalla todas las subastas que ha ido publicando y las pujas que recibe en tiempo real, así como los detalles del lote. Desde esta sección podrá crear una nueva subasta.
- Subastas finalizadas: En esta página se mostrará un listado de todas las subastas publicadas que han finalizado. Se diferenciará entre las subastas pagadas, pendientes de pago y las que van a liquidación ( porque no han recibido ninguna puja). Los datos del comprador no se mostrarán hasta que la subasta haya sido pagada.
- Mis datos: Datos de registro. Se diferenciará entre vendedor normal y premium ( el vendedor premium solicita la visita de un veterinario concertado por mercopig que realizar un informe de la granja para ver si cuenta con el calificativo de premium). Desde este apartado se darán de alta las diferentes granjas que tenga el usuario vendedor.
- Contáctanos: Formulario de contacto y datos de la empresa de Mercopig, para dudas e incidencias.
- Notificaciones: Alertas referentes a subastas ya asignadas, datos de registro defectuosos, pagos realizados…
App móvil
La App permitirá acceder al sistema a usuarios compradores, vendedores y de ambos tipos. Cada uno de los cuales dispondrá de un conjunto de funcionalidad diferente.Esta pensada para seguir la inmediatez de las pujas, sin embargo incluimos la posibilidad de pujar y controlar las pujas.
Usuario Comprador
Este acceso a la plataforma a través de la App no difiere, en cuanto a su funcionalidad, al apartado homónimo de la zona web, pero sí que tendrá una herramienta importante que serán las notificaciones que el usuario podrá activar o no para las pujas. De esa forma cada vez que haya una nueva subasta en la que esté interesado, le llegará una notificación. También le puede llegar si hay una puja sobre una subasta, aunque estas se podrán desactivar si así lo desea.
Básicamente, las opciones de las que va a disponer son las siguientes:
Subastas en curso: El usuario podrá filtrar entre las subastas inmediatas y las que son a futuro. Podrá filtrar por tipo de producto ( Lechones, Engorde, Madres, Verracos), cantidad de animales y semana de carga. Desde esta sección podrá pujar por los lotes que le interese, así como seguir las diferentes pujas para ese lote.
Subastas asignadas: El usuario comprador puede ver las subastas que le han sido adjudicadas, así como si están pagadas o se encuentran pendiente de pago. Se podrá pagar desde la app a través de una pasarela de pago.
Mi perfil / preferencias: Desde este apartado el usuario podrá modificar sus datos, elegir las preferencias de las alertas, consultar la privacidad o pedir ayuda.
En la galería inferior podéis ver los wireframes en media del flujo del usuario comprador con la app:
Usuario Vendedor
El usuario vendedor al entrar en la APP, encontrará un listado de subastas, en este caso serán solo sus subastas activas. La app se dividirá en subastas en curso o subastas asignadas. Desde la aplicación móvil no se podrán crear nuevas subastas, esto solo se podrá hacer desde la plataforma web.
Subastas en curso: Listado de sus subastas en curso y el estado en el que estan ( pendiente de aprobación, activa, parada). El usuario podrá acceder a la información detallada del lote y en ese apartado irá viendo la puja ganadora en todo momento y las ofertas a liquidación.
Subastas asignadas: En el apartado de subastas asignadas, podrá ver el estado de las subastas que han tenido comprador, los datos de éste y la evolución del estado del pago y la valoración al comprador.
Mi perfil / preferencias: Desde este apartado el usuario podrá modificar sus datos, elegir las preferencias de las alertas, consultar la privacidad o pedir ayuda. También podrá ver la información de sus granjas subida desde la plataforma web.
Aquí podeis ver algunas de los wireframes en alta del usuario vendedor:
Perfil Mixto
Para el usuario que cuenta con un perfil mixto,es decir, es a la vez comprador y vendedor, se ha ideado otro flujo en el que se le pregunta al inicio de la app cual de los dos perfiles quiere llevar. En todo momento y en un sitio visible aparecerá la opción de cambiar el perfil de la app. El diseño será igual que los flujos definidos anteriormente, añadiendo la posibilidad de cambiar de perfil.
Prototipo App
En el siguiente prototipo interactivo se pueden ver todas las pantallas de la app, tanto del usuario comprador como del vendedor.
Web Corporativa
Los objetivos principales de la web corporativa son los siguientes:
- Dar a conocer el proyecto entre ganaderos interesados y posibles pujadores. Explicar con un lenguaje sencillo y claro.
- Registrar nuevos usuarios, tanto vendedores como compradores.
- Acceso directo a la plataforma.
- Facilitar el uso de la plataforma y resolver posibles dudas que puedan tener ( FAQ)
- Mostrar las subastas activas como forma de enganchar al usuario.
Con estos objetivos en mente, se diseño la siguiente estructura de la web:
- Inicio: Presentación de la web con un copy atractivo, mostrar las últimas subastas y los tipos de usuarios de la plataforma ( vendedor, comprador), así como los pasos para registrarse.
- Conócenos: Explicación de en qué consiste la subasta online, con detalles del usuario vendedor y del comprador. Querían remarcar la atención personalizada.
- Te ayudamos: Breves tips de todo lo que podrás hacer con la plataforma, pasos de como crear una cuenta y preguntas frecuentes de los usuarios.
- Noticias: Blog de novedades y datos de interés
- Registro: Formulario para registrarse en la página.
- Contacto: Formulario de contacto para dudas y sugerencias.
- Acceso: Botón de acceso a la plataforma.
Marca y Manual de Estilo
Para diseñar el logotipo se partió de la figura del cerdo, pero querían algo sencillo y que no tuviera la forma de este. Por ello se decidió utilizar el morro y jugar con los colores asociados al ganado porcino: Rosa y marrón.
Dentro de este rango se probaron varios tonos y combinaciones y finalmente se opto por el rosa como color corporativo #ED9F99, y marrón oscuro como color de titulares y para generar contraste #494739. Una vez elegidos estos dos tonos se saco la paleta de colores con diferentes gradaciones de estos, así como complementarios / triadas para las diferentes etiquetas de todos los posibles estados de las suabastas, para que estos fueran reconocibles pero encajaran con la paleta de color.
En la siguiente muestra podemos ver una imagen de los diferentes estilos aplicados en la web corporativa. En la plataforma se siguen también estos estilos, con más variedad de botones e inputs debido a la magnitud del proceso.
Diseño de interfaz y prototipado
Esta web ha sido diseñada con la herramienta XD y montada en WordPress, con el editor de Elementor y el tema Astra. El resultado lo podeis ver en el siguiente link:
Rediseño y desarrollo de un woocommerce para una joyería local
