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.
Diseño Web, Desarrollo Web, Ilustración, Producción de Video Animado
Lápiz y Papel, Sketch, Adobe Illustrator, InVision, Wordpress
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.
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.
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.
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.
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:
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: