Rediseñando una web con instalación y puesta en marcha de E-commerce
Cómo he creado mi marca de tarjetas pop-up, diseñado una web con código para enseñarlas y vuelto a rediseñarla la web para poner en marcha una tienda online.
Rediseñando una web con instalación y puesta en marcha de E-commerce
Cómo he creado mi marca de tarjetas pop-up, diseñado una web con código para enseñarlas y vuelto a rediseñarla la web para poner en marcha una tienda online.
DISEÑO WEB
Rol
Diseñadora web / gráfica
Proyecto propio
Año
1era web: 2015
Rediseño: 2018
Herramientas
Html | Css | JQuery | WooCommerce | Balsamiq | Illustrator | Photoshop | Mailchimp | Stripe
Skills
Diseño web | Diseño gráfico | Ilustración | Lettering | Marketing digital
Rol
Diseñadora web / gráfica
Proyecto propio
Año
1era web: 2015
Rediseño: 2018
Herramientas
Html | Css | JQuery | WooCommerce | Balsamiq | Illustrator | Photoshop | Mailchimp | Stripe
Skills
Diseño web | Diseño gráfico | Ilustración | Lettering | Marketing digital
SITUACIÓN
Al finalizar los estudios de diseño gráfico en 2013 creé una línea de tarjetas pop-up. Diseñé los mecanismos pop-up (ingeniería de papel), hice las ilustraciones, diseñé 2 tipos de lettering para las portadas y la identidad visual de la marca.
Diseñé una web desde cero con código Html y Css para mostrar las tarjetas. Más adelante, cuando decidí empezar a venderlas también online necesitaba un E-Commerce.
RESULTADO
Rediseñé la interfaz de la web para adaptarla a los objetivos de negocio.
La primera web fue un mero escaparate visual sin una estrategia detrás. Con el rediseño conseguí guiar al usuario por el contenido y preparar la web para la conversión de leads.
Construí la tienda online desde cero con WordPress y WooCommerce.
Implanté el e-commerce y conecté la pasarela de pago virtual con Stripe. Creé un Lead Magnet, conecté los formularios con Mailchimp y atraje tráfico desde las RRSS.
PROCESO
La marca
Popapea es una marca de tarjetas pop-up de felicitación divertidas, hechas a mano con mucho cariño.
Web original
La web prácticamente no tiene tráfico, es una web escaparate. Después del rediseño se espera que los usuarios vienen a conocer los productos y comprar.
En la página de Inicio actual no queda claro que es lo que puede o debe hacer el usuario cuando llega.
El ancho máximo del contenido es de 960 px.
En la página de inicio se encuentra un slider de imágenes sin flechas ni puntos, el usuario no tiene control sobre él.
El slider ocupa el ancho de 714 px y en la columna derecha de 225 px de ancho se encuentra el Titular H1, el texto de bienvenida y un botón con CTA para contactar.
La primera sección (tarjetas de cumpleaños) empieza en el límite del pliege (fold), es necesario hacer scroll para verla.
Al hacer el scroll se encuentran todos los productos organizados según su categoría.
Rediseño
El ancho máximo del contenido ha aumentado a 1140 px.
El slider se sustituye por una imagen fija que representa el beneficio del producto (regalo). La imagen ocupa el ancho completo y sobre ella está colocada una caja de texto con el Titular H1, CTA y botón (objetivo: ver los productos).
La altura de la imagen se ha reducido respecto al diseño original, por lo que antes de hacer el scroll vemos 3 apartados destacados. Son 3 banners para llevar al usuario a productos destacados.
Debajo estaría colocado un banner para captar suscriptores. A continuación posts destacados para llevar al usuario al blog.
Resultado
Puedes ver el sitio entero en este enlace:
