Caso de diseño de producto
Constructor de webs, tiendas online
Sistema para crear tiendas online · Hebreo / inglés · E-Commerce
Sobre el proyecto e-commerce
Detalles del proyecto
No es solo un proyecto de diseño de una tienda online. Trabajé en crear un sistema de componentes, plantillas, versiones adaptativas y elementos para crear tiendas online de forma cómoda y rápida. Esto permitió a la empresa de outsourcing aceptar muchos encargos de tiendas online y completarlos en muy poco tiempo.
Mi rol
Diseñador UX / diseñador visual
«La guerra en mi país afectó mucho a muchas personas. Tuve que trabajar en cafeterías, coworkings, garajes y aparcamientos. Eso me ayudó a abstraerme y a sumergirme mucho más en los proyectos».
Proceso de diseño
El recorrido del proyecto incluyó identificar el problema de negocio de nuestros clientes, entender sus matices, definir los problemas y necesidades de los usuarios, trasladar el diseño, crear plantillas de baja fidelidad y crear pantallas para el diseño responsive. Fue un proceso iterativo, lo que ayudó a crear más de una estructura de tienda online y a asegurar una colaboración cómoda con los clientes y el equipo de desarrollo.
Trabajo sobre la idea
En brainstormings diarios hicimos entrevistas repetidas con clientes y analizamos esos datos. Las personas y los mapas de empatía ayudaron a entender mejor tanto a los clientes como a los usuarios de las tiendas online.
Los diseñadores del equipo investigaron a la competencia y aplicaron las mejores soluciones en nuestro proyecto. Las primeras etapas estuvieron llenas de reuniones con desarrolladores y managers, lo que también ahorró tiempo valioso más adelante.
Investigación y visualización
Fue un camino largo e interesante desarrollar wireframes para los distintos bloques del sistema de tienda online. Después, los bloques se combinaron en páginas web completas. El último paso de esta etapa fue crear las pantallas para el diseño responsive.
Lanzamiento del producto
Los desarrolladores front-end crearon plantillas de código para implementarlas rápido en distintos encargos. El manager recibe el encargo del cliente, el diseñador crea un diseño visual creativo y los desarrolladores conectan el diseño editando el código de la plantilla.
Cambios
Tras crear la primera versión de las plantillas de tiendas online, cambiamos la mayoría de los procesos. Como resultado, nuestra empresa tuvo 3 tipos de sistemas e-commerce. Esto ayudó a ampliar la cartera de clientes y a poner en marcha un proceso muy sencillo pero creativo para crear tiendas online.
En este caso tomaré como ejemplo el diseño visual de una de las tiendas online que hice. También mostraré cómo construí los bloques de las páginas tras la investigación de la competencia, el trabajo con distintos layouts y el proceso de diseño responsive.
Trabajo sobre la idea
Persona Mark: tienda online
Intereses
Motivos para encargar nuestro producto: contexto / problema
Investigación y visualización
Ya durante la investigación de la competencia, las reuniones diarias con el equipo y el análisis de la estructura de las tiendas online, trabajábamos en los bloques (plantillas) de las futuras pantallas.
En paralelo también se diseñaron las pantallas responsive, para facilitar el trabajo de los desarrolladores. Esto ahorró mucho tiempo en las siguientes etapas del proyecto.
Lanzamiento del producto
Pasos de diseño superrápidos
Gestión
Aquí se da la interacción entre el cliente y el manager de la empresa. Se elabora el encargo técnico y se pasa a los diseñadores.
Diseño visual
En esta etapa, el diseñador estudia el encargo técnico y crea el diseño visual de las plantillas terminadas. Según los deseos del cliente, el diseño es supercreativo o sobrio y contenido
Lanzamiento
Los desarrolladores reciben el diseño y lo conectan a las plantillas de código ya preparadas. Después se compara el diseño con el resultado del front-end. Y, por último, se lanza la tienda y el cliente queda contento.
eco-techno store
Colores
Cuando un cliente acudía a nuestra empresa, su producto ya solía tener cierto branding. Si la empresa no tenía identidad visual, hacíamos una breve encuesta y teníamos en cuenta sus preferencias al elegir los colores.
Tipografía
La mayoría de nuestros clientes eran de Israel, así que usábamos fuentes compatibles con el hebreo. Si la web era en inglés, elegíamos una tipografía acorde con la identidad y el branding de la empresa del cliente.
Diseño visual: escritorio
Diseño visual: móvil
Lanzamiento
En este caso tomaré como ejemplo el diseño visual de una de las tiendas online que hice. También mostraré cómo construí los bloques de las páginas tras la investigación de la competencia, el trabajo con distintos layouts y el proceso de diseño responsive.
Conclusiones
Este proyecto e-commerce va más allá del simple diseño de una tienda online: es la creación de un sistema completo de componentes, plantillas, versiones adaptativas y elementos. Este enfoque permitió a la empresa de outsourcing gestionar con eficiencia muchos encargos de tiendas online en plazos muy cortos. Mi doble rol como diseñador UX y diseñador visual fue clave en este éxito.
Enlace a la web de la empresa en la que pude llevar a cabo este proyecto: navoto.com.
¡Gracias!
¡Gracias por verlo! Y doy las gracias a las Fuerzas Armadas de Ucrania por la oportunidad de trabajar.
