La compañía InOut Travel & Events tenía como web corporativa un cms en wordpress obsoleto en diseño ui y contenidos. Con la presentación de un nuevo branding surgía la necesidad de definir un nuevo producto web que diera visivilidad a todos los servicios que ofrece la compañía en la actualidad.
UX Research, UI Design, Frontend.
6 semanas.
Figma, Illutrator, Photoshop, After Effects, Bootstrap, Visual Studio Code.
Benchmarking compañías del sector y entrevistas para descubrir una propuesta única de valor.
Identificar al público objetivo con entrevistas, crear User Personas y Mapas de Empatía.
Objetivos, alcance y requerimientos que debe cumplir el proyecto.
Arquitectura de la información, Wireframes, Layouts Desktop y Mobile.
Diseño visual, UI Foundations & Kits, Mockups de alta definición.
Programación Frontend con html5, css3/sass, jquery, Php.
El proyecto comienza con las Entrevistas con Ceo y Product Owners para tener una visión general de la compañía, conocer los servicios que ofrece cada unidad de negocio y el tipo de usuario que requiere dichos servicios.
Benchmarking agencias del sector. En las entrevistas se eligen variás agencias de la competencia atendiendo a criterios como localización, contenidos, seo, diseño ui, clientes, portfolio y presencia en las rrss.
Se obtiene una información cualtitativa que ayuadará a definir los objetivos y visión de la marca, así como la creación arquetipos de usuarios.
Con los datos obtenidos en entrevistas con producto y atención al cliente se ha creado una user persona como público objetivo de la marca.
Se usó un mapa de empatía para comprender las necesidades de la user persona "Lidia" en una historia de usuario "Como Lidia quiero una agencia para realizar el evento anual de mi empresa".
Propuesta única de valor”InOut Travel & Events es una agencia que ofrece toda la gama de servicios relacionados con el sector MICE para realizar reuniones, congresos, convenciones, incentivos, exhibiciones o eventos".
Objetivos de negocio y usuarios:Diseñar e implementar un producto digital web en coherenca con el nuevo branding, que contenga la visión global de la compañía, sus servicios y el acceso a todas sus áreas de negocio que deberán funcionar como landings independientes con sus propias caraterísticas.
Esto permitirá a la agencia mejorar su presencia online y a los usuarios tener una conexión global con la marca conociendo los diferentes servicios que ofrece para obtener un producto 360.
Características y requerimientos:
El tiempo de desarrollo tiene que ser de 4-6 semanas ya que actualmente la web está totalmente obsoleta.
La web deberá tener un diseño actual, deberá ser responvive, con una arquitectura de la información usable, tendrá contenidos dinámicos como vídeos y galerías de imágenes, incluirá un cms propio para actualizar las ofertas de Viajes y el Blog de noticias.
Sitemap
Propuesta AI, estructura de navegación y jerarquía de páginas
Wireframes lo/fi
Ejemplo diseño de skeletons layouts en versión Desktop y Mobile
Visual Design & UI Kits
Muestra del "Design System", Foundation y componentes basados en "atomic design"
Mockups hi-fi
Prototipos de alta fidelidad del home y landing de unidad de negocio.
Se crea un entorno de desarrollo en gitlab para realizar commits hacia ftp beta. el dpto IT programa una Api Rest para conectar las bbdd con el frontend del blog y la agencia de viajes.
Se personaliza el framework de bootstrap con sass, se van creando todos los elementos basados en el sistema de diseño, se programan los layouts genéricos.
Se implementan todas las landings con los contenidos específicos de textos, imágenes, vídeo, etc. Se programa el frontend del blog y la agencia de viajes.
La tecnologías usadas fueron:
HTML5 / CSS3-SASS / JQUERY / JS6 / PHP / MYSQL
Se hacen subidas a beta basados en sprints de una semana. Se hace testeo de progresos con producto, como dificulatad añadida hubo que realizar cambios en la maquetación y contenidos de varias landings. Una vez subido y testeado todo el proyecto a beta se reailza el deploy para poner la web online.
Web versión desktop
Landing home, landing eventos y agencia de viajes.
Web versión mobile
Responsive design de diferentes landings y páginas.
InOut Travel & Events es una agencia especializada en la organización de eventos y congresos,
viajes de incentivo y en el área de Business and Corporate Travel.
