Totsbox - Web Design & Video Project
2019

Totsbox, la tienda inteligente.

El Desafío

Totsbox es una innovadora tienda sin personal que se apoya en tecnología para garantizar un servicio 24/7, con la facilidad de pagar desde tu celular.

El negocio estaba a punto de iniciar y requerían lanzarse al mercado, así que nuestro desafío fue el de crear su sitio web, con el objetivo de contar a las personas de qué se trata la tienda, cómo funciona y dónde encontrarla.

Servicios

Diseño Web, Desarrollo Web, Ilustración, Producción de Video Animado

Herramientas

Lápiz y Papel, Sketch, Adobe Illustrator, InVision, Wordpress

Diseñando un nuevo logotipo

Para dar inicio al proyecto, revisamos todos los elementos de marca que tenía la compañía en aquel momento. Hallamos que la tipografía no funcionaba bien en todos los formatos y tamaños,  lo cual podría ser un problema para la marca en el futuro.

Hicimos un re-diseño del logotipo apuntando a formas más simples y una fuente más legible, pues buscábamos asegurarnos de se pudiese leer tanto en el sitio web como en la aplicación móvil.

Totsbox Old Logotype
Antes
Totsbox New Logotype
Después

Organizando la información en un Wireframe

Después de recoger toda la información en una videollamada con el cliente, definimos las necesidades del negocio para preparar el Wireframe. Nuestro objetivo era mostrar a los usuarios los pasos para descargar la aplicación y cómo usarla para comprar en Totsbox.

Wireframe Web Design

Consistencia visual con Guías de Estilo

Para asegurarnos de que todos los elementos visuales del sitio web fuesen consistentes en cuanto a tipografía y color, diseñamos una guía de estilos simple y eficiente para las necesidades del sitio web.

image of typography
image of Color palette

Ilustraciones propias, un toque personal

Requeríamos buenas imágenes que nos ayudaran a recrear el proceso de compra, pero nuestro problema era que dicha tienda aún no existía. En estos casos, las ilustraciones son una herramienta excepcional, pues nos sirven para contar una historia a través de sus personajes y escenarios.

Así que dibujamos la tienda, basándonos en la información suministrada por el cliente, para luego crear ilustraciones propias para la web.

Wireframe of totsbox store
Wireframe of totsbox store
Ilistration for totsbox
Image of totsbox website

Una vez aprobado el diseño, trabajé con la ayuda del Desarrollador y Animador Kevin Toro para construir dicha web en Wordpress. Visita el sitio web clickeando en el siguiente link:

thetotsbox.com

Cerrando el telón con video animado

Recordando nuestro desafío, teníamos una gran necesidad de asegurarnos que los usuarios entenderían como comprar en la tienda, completando todo el proceso. Así que decidimos crear un video animado para complementar el contenido de la página web.

Nuestro proceso estuvo articulado por 5 pasos:

•   Creación del Script (Historia y Textos)

•   Creación de Story Board

•   Diseño de personajes y escenas

•   Animación de gráficos en After Effects

•   Post-Producción: Efectos, Música y Voz en off

Llevamos a cabo este proceso desde 0, desde los dibujos a mano en el Story Board, hasta las ilustraciones personalizadas para el video. Con la ayuda de un amigo animador pudimos articular todo el video. Observa el resultado final:

OTROS PROYECTOS