import Layout from '~/components/ProjectLayout';
import Image from '~/components/Image';
import BlockImage from '~/components/BlockImage';
import BlockIntro from '~/components/BlockIntro';
import BlockCallout from '~/components/BlockCallout';
import BlockBody from '~/components/BlockBody';
import DownloadPrototype from '~/components/DownloadPrototype';

export const meta = {
  title: 'Renovando la experiencia de usuario en Maxilana.com',
  position: 1,
  tags: ['Diseño', 'Página web', 'E-commerce'],
  editorialTitle: 'Maxilana',
  description:
    'Renovamos la experiencia de usuario de Maxilana, incrementamos la velocidad de carga en el sitio para aumentar la probabilidad de éxito. ',
  image: '/images/projects/project-preview-maxilana.png',
  openGraph: '/images/projects/maxilana-opengraph.png',
  logo: {
    src: '/logo-maxilana.png',
    width: 216.73,
    height: 55,
  },
  projectPreviewTitle: 'Renovamos la experiencia de usuario del Sitio web de Maxilana',
  projectPreviewDescription:
    'Incrementamos la velocidad de carga en el sitio para aumentar la probabilidad de éxito.',
};

<BlockIntro
  title={meta.editorialTitle}
  coverSrc="/images/projects/maxilana-cover.png"
  mockupSrc="/images/projects/maxilana-mockup.png"
  label="¿Qué hicimos?"
>

Rediseño y Desarrollo web

</BlockIntro>

<BlockCallout label="Sobre el cliente">

Maxilana es una casa de empeño, préstamos personales y remate de productos. Cuenta con 74 sucursales en las ciudades de Culiacán, Mazatlán, Hermosillo, Mexicali, Tijuana y Guadalajara.

</BlockCallout>

<BlockBody title="Antecedentes ">

Maxilana contaba con una página web que tenia toda la información de sus inventarios por sucursal. Sin embargo, encontrar los productos era complicado. Navegar y descubir las acciones que el usuario queria encontrar era díficil. Estos factores limitaban el crecimiento dígital de la empresa.

¿Cómo podrían aprovechar toda la infraestructura que ya tenían construida?, ¿Cómo podrían ofrecer una experiencia Omnicanal y aprovechar todas sus sucursales?, ¿Cómo ofrecer una experiencia de usuario satisfactoria?, ¿Cómo poner todo su inventario de todas sus sucursales al publico?

</BlockBody>

<BlockBody label="PROBLEMAS" >

- Falta de consistencia en la interfaz.
- Formularios que dificultan el resultado.
- Formatos de texto difíciles de leer.
- Los inventarios de venta en línea y en sucursal estaban por separado lo cual complicaba encontrar los productos.
- Las imágenes de los productos no estaban optimizadas y tardaban en cargar.
- Dificultad para navegar y encontrar la información que el usuario estaba buscando.

</BlockBody>

<BlockImage src="/images/projects/maxilana-web-vieja.jpg" width={1280} height={633} />

<BlockBody label ="DESAFIO" title="Ofrecer experiencia de usuario increíble y maximizar los resultados" >

- Crear un sistema de diseño que sea consistente en toda la interfaz.
- Dar orden y coherencia a la navegación del sitio.
- Encontrar la forma en que se van a vender los productos que tienen diferentes tipos de inventario como el de venta en sucursal y el de venta en linea.
- Incrementar la confianza al comprar en línea de los usuarios.
- Hacer las conversiones principales más amigables y sencillas.
- Permitir a los usuarios cotizar, un empeño, un prestamo personal o solicitar vales facilmente.
- Incrementar la velocidad de carga en el sitio para aumentar la probabilidad de venta.
- Ofrecer una experiencia de compra local satisfactoria.

</BlockBody>

<BlockBody label ="Navegación" title="Clarificando la navegación del sitio web" >

Para crear una navegación, el primer paso fue generar un inventario de todos los contenidos que debería de tener el sitio.

Después de analizar todos los contenidos y hacer diferentes ejercicios llegamos a la conclusión de agruparlos de la siguiente manera: Empresa, servicios, sucursales, legal y recursos.

</BlockBody>
<BlockImage src="/images/projects/mapa-de-sitio-maxilana.jpg" width={1280} height={754.67} />
<BlockBody >

Dando como resultado dos de los principales componentes de la interfaz: el menú y el pie de página.

</BlockBody>
<BlockImage src="/images/projects/maxilana-menu.png" width={1280} height={197.33} />
<BlockImage src="/images/projects/maxilana-footer.png" width={1280} height={438.22} />

<BlockBody label="Logros" title="Creando una experiencia donde se combinen los inventarios disponibles para venta directa en línea y en sucursal. ">

Uno de los principales retos de este proyecto es poder ofrecer una experiencia única de vender artículos usados de remate. Sin embargo, no todos los productos de sus inventarios son aptos para venta directa en línea; es por eso que es importante poder mostrar al usuario las prendas que están disponibles de manera local sumándoles los productos que se pueden vender en línea.

<BlockImage src="/images/projects/labels.png" width={67} height={24} />

Para poder educar al usuario de que existen dos tipos de inventarios se diseñaron dos indicadores que nos permiten saber si el producto es para "envío a domicilio" o “recoger en sucursal”.

<BlockImage src="/images/projects/cards.png" width={746} height={543} />
</BlockBody>

<BlockBody
  image={<Image width={357} height={537} src="/images/projects/side-filters.png" />}
>

Por eso fue importante diseñar una manera en el usuario pudiese va a seleccionar la ubicación. Además de tener acceso también siempre en el menú se creó un filtro para el listado de productos. Por defecto los inventarios siempre se muestra combinados. Al seleccionar el filtro de ciudad te da la oportunidad de poder separar los inventarios.

</BlockBody>

<BlockBody
label="Servicio de prestamos"
 title="Diseñando un “Lead Magnet”"
  imagePosition="left"
  image={<Image width={519} height={583} src="/images/projects/Calculadora.png" />}
>

Con el objetivo de atraer más prospectos para el servicio de préstamos personales se creó una calculadora que ayuda a los clientes a saber cuánto tienen qué pagar y en que periodos.

Ademas al solicitar el préstamo, se le dio la oportunidad al usuario que pueda decidir si desean que se comuniquen con ellos o que ellos envien directamente un mesnsaje via WhatsApp

</BlockBody>
<BlockBody
label="Rendimiento"
title="Comporativas de velocidad de carga del sitio">

Uno de los principales oportunidades de este proyecto fue mejorar el rendimiento del proyecto.

<BlockImage
  src="/images/projects/velocidad-de-carga-lenta-maxilana.jpg"
  width={957}
  height={1050}
/>
Utilizando las tecnologías de Next JS pudimos mejorar la velocidad de carga del proyecto. Aumentando el rendimiento, también aumentamos la probabilidad de conseguir los resultados buscados. <BlockImage
  src="/images/projects/velocidad-de-carga-rapida-maxilana.jpg"
  width={957}
  height={1050}
/>
</BlockBody>

<BlockBody title="Conclusiones">

Al analizar todos los problemas del antiguo sitio descubrimos que Maxilana contaba con una infraestructura de información muy buena. Esto nos permitió proponer soluciones que aumentaran la probabilidad de tener éxito. Facilitamos accesibilidad del usuario para solicitar información. Se agregaron llamadas a la acción para que los clientes puedan comunicarse vía WhatsApp. Creamos una experiencia de compra de los inventarios de venta exclusiva en sucursal añadiendo mapas en las páginas de productos. Hicimos que los pagos en línea fuera mucho más sencillo. Utilizamos tecnologías de vanguardia como Next Js que nos permite ofrecer una experiencia muy fluida por los tiempos de carga de las páginas. Confiamos que este proyecto será un parte aguas para Maxilana que los llevara a ser una de las mejores casas de empeño de México.

Te invitamos a visitar el proyecto <a className="c-link c-link--inline" href="https://maxilana.com" target="_blank">Maxilana Casa de Empeños</a>

</BlockBody>

export default ({ children }) => (
  <Layout title={meta.title} meta={meta}>
    {children}
  </Layout>
);


Renovamos la experiencia de usuario de Maxilana, incrementamos la velocidad de carga en el sitio para aumentar la probabilidad de éxito. 

Maxilana

Incrementamos la velocidad de carga en el sitio para aumentar la probabilidad de éxito.

Renovamos la experiencia de usuario del Sitio web de Maxilana

Renovando la experiencia de usuario en Maxilana.com

import Layout from '~/components/ProjectLayout';
import Image from '~/components/Image';
import BlockImage from '~/components/BlockImage';
import BlockIntro from '~/components/BlockIntro';
import BlockCallout from '~/components/BlockCallout';
import BlockBody from '~/components/BlockBody';

export const meta = {
  title: 'Citicinemas',
  position: 2,
  tags: ['App', 'Website'],
  editorialTitle: 'Citi&shy;cinemas',
  image: '/images/projects/project-preview-citicinemas.png',
  logo: {
    src: '/logo-citicinemas.png',
    width: 120,
    height: 64,
  },
  description:
    'Conoce cómo hizo ADHOC para desarrollar la App de Citicinemas, cómo se adaptaron a su infraestructura y qué hicieron para mejorar la velocidad de carga.',
  projectPreviewTitle: 'Llevando la magia del cine a la palma de tus manos',
  projectPreviewDescription:
    'Decidimos desarrollar una nueva aplicación con mayor velocidad, más ligera y que genera más boletos de cine vendidos.',
};

<BlockIntro
  title={meta.editorialTitle}
  coverSrc="/images/projects/citicinemas-cover.jpg"
  mockupSrc="/images/projects/citicinemas-mockup.png"
  label="¿Que hicimos?"
>

Diseño e implementación web

Desarrollo de Apps

</BlockIntro>

<BlockCallout>

Desarrollo de una infraestructura de servicios que permite llevar el cine a cada vez más personas.

</BlockCallout>

<BlockImage
  //
  src="/images/projects/citicinemas-body-01.jpg"
  width={1280}
  height={770}
/>

<BlockBody
    title="2013 - Antecedentes"
    image={<Image
        src="/images/projects/citicinemas-body-04.png"
        width={694}
        height={863}
    />}
>

Citicinemas® es una cadena de complejos cinematográficos que se ha definido como un modelo de servicio y atención novedoso en el mercado del entretenimiento. Sin embargo su crecimiento ha llevado consigo algunos retos.

¿Cómo expandirse a nivel nacional? ¿cómo incrementar su competitividad en un mercado que parece abarcado por grandes consorcios?
¿qué ofrecer para mantenerse vigente?

Citicinemas tenía múltiples áreas de oportunidad que
nos abría la puerta para trabajar. Era necesario atacar detalles
que les permitieran crecer de manera controlada y medible.

- Soporte urgente para dispositivos móviles
- Horarios en tiempo real
- Igualar y aumentar las características que ofrecía la competencia

</BlockBody>

<BlockBody
    title="2014 - Definiendo las bases"
    image={<Image
        src="/images/projects/citicinemas-body-05.png"
        width={320}
        height={850}
    />}
    imagePosition="left"
>

Cuando analizamos la situación tecnológica de Citicinemas definimos como prioritario
rediseñar el sitio web y dar soporte a dispositivos móviles, también desarrollamos
una aplicación básica para iOS y Android.

Esto nos permitió acaparar de manera temprana un mercado que crecía con rapidez; el móvil.

</BlockBody>

<BlockBody title="2015 - Horarios y compra en línea">

Mejoramos la experiencia general agregando horarios a todas las funciones,
que eran administrados al instante por los encargados de cada complejo.

A su vez agregamos la posibilidad de comprar los boletos 100% en línea
e incorporamos un sistema para seleccionar tu asiento durante la compra.

Todo esto implicó desarrollar un sistema Backoffice que permitiera gestionar
el contenido web y conectar la información administrativa a sus sistemas.

</BlockBody>

<BlockImage
  //
  src="/images/projects/citicinemas-body-13.jpg"
  width={1232}
  height={693}
/>

<BlockBody
    title="2016 - Programas de lealtad"
    image={<Image
        src="/images/projects/citicinemas-body-11.png"
        width={282}
        height={609}
    />}
>

Contando con un sistema robusto de compra en línea, comenzamos a explorar ideas
y desarrollamos el sistema Citibeneficios. Este con el objetivo de incrementar lealtad de los clientes y promover la compra recurrente.

</BlockBody>

<BlockBody
    title="2017 - Una nueva app"
    image={<Image
        src="/images/projects/citicinemas-body-14.png"
        width={316}
        height={609}
    />}
    imagePosition="left"
>

Alcanzada la madurez de estos productos digitales, optamos por migrar la aplicación.
Utilizamos tecnologías usadas por gigantes de la industria como Facebook, Instagram y AirBnB.

De esta forma integramos el programa de lealtad, los horarios en tiempo real y la compra en línea en las nuevas Apps de iOS y Android de manera nativa.

</BlockBody>

<BlockBody title="2018 - Optimización en seguridad y transacciones">

Con el fin de reducir costos operativos y mejorar la estabilidad de las transacciones decidimos migrar la pasarela de pagos a un nuevo proveedor.
A su vez, esto nos permitió tener un mayor control y detección de fraudes.

También aumentamos la facilidad y seguridad de las compras por medio de la aplicación móvil.
Mediante el soporte para Touch ID en iOS y Fingerprint en Android.

</BlockBody>

<BlockImage
  //
  src="/images/projects/citicinemas-body-15.jpg"
  width={1920}
  height={1080}
/>

<BlockBody
    label="Resultados"
    title="Nueva sucursal en Guadalajara"
    image={<Image
        src="/images/projects/citicinemas-body-08.png"
        width={300}
        height={609}
    />}
    imagePosition="right"
>

Tener un sistema robusto y expansible de manera anticipada,
fue lo que permitió la expansión a Guadalajara sin contratiempos.

</BlockBody>

<BlockBody title="Presente y Futuro">

Actualmente, estamos trabajando en la tercera iteración tanto del sitio como de las Apps.
Planeamos mejorar la estabilidad, velocidad y usabilidad.
Todo esto con el fin de lograr unificar ambos productos.

</BlockBody>

export default ({ children }) => (
  <Layout title={meta.title} meta={meta}>
    {children}
  </Layout>
);


Conoce cómo hizo ADHOC para desarrollar la App de Citicinemas, cómo se adaptaron a su infraestructura y qué hicieron para mejorar la velocidad de carga.

Citi&shy;cinemas

Decidimos desarrollar una nueva aplicación con mayor velocidad, más ligera y que genera más boletos de cine vendidos.

Llevando la magia del cine a la palma de tus manos

Citicinemas

import Layout from '~/components/ProjectLayout';
import Image from '~/components/Image';
import BlockImage from '~/components/BlockImage';
import BlockIntro from '~/components/BlockIntro';
import BlockCallout from '~/components/BlockCallout';
import BlockBody from '~/components/BlockBody';

export const meta = {
  title: 'Kanda',
  position: 4,
  tags: ['App'],
  editorialTitle: 'Kanda',
  description:
    'Kanda es una comunidad virtual para combatir el acoso telefónico y telemarketing no deseado. ',
  image: '/images/projects/project-preview-kanda.png',
  logo: {
    src: '/logo-kanda.png',
    width: 88,
    height: 88,
  },
  projectPreviewTitle: 'Bloquea números molestos',
  projectPreviewDescription:
    'Identifica posibles extorsionistas y evita que los números molestos te sigan llamando.',
};

<BlockIntro
  title={meta.editorialTitle}
  coverSrc="/images/projects/kanda-cover.jpg"
  mockupSrc="/images/projects/kanda-mockup.png"
  label="¿Que hicimos?"
>

Desarrollo de App

</BlockIntro>

<BlockCallout>

Kanda es una comunidad virtual para combatir el acoso telefónico y telemarketing no deseado.

</BlockCallout>

<BlockImage src="/images/projects/kanda-body-01.jpg" width={1280} height={770} />

<BlockBody label="Desafío">

Su fundador se acercó a nosotros con una idea inicial de como podríamos usar las tecnologías existentes para crear una comunidad protegida de extorsionadores, fraudes y telemarketing telefónico no deseado.

</BlockBody>

<BlockBody label="LOGROS">

Con base en las especificaciones iniciales desarrollamos un conjunto de aplicaciones para iOS y Android. Haciendo uso de funciones nativas de ambos sistemas. Logramos crear un directorio que se conforma de una lista negra y una blanca para las llamadas a recibir dándole el poder al usuario de decidir con quien quiere contactarse. También desarrollamos una plataforma que permite a los administradores llevar el control de los números reportados para revisión manual, así como llevar un registro del crecimiento de usuarios y métricas variadas. Todo esto interconectado por medio de una API nuclear que se encarga de manejar la comunicación entre aplicaciones, almacenar y consultar los datos y notificar a los usuarios de ser necesario.

</BlockBody>

<BlockImage src="/images/projects/kanda-body-02.jpg" width={1280} height={581} />

<BlockBody label="TECNOLIGÍAS IMPLEMENTADAS">

- API (Node, Sequelize y Express)
- BackOffice (Next.js, Redux)
- App para iOS con modulos nativos (React Native y Swift)
- App para Android con modulos nativos (React Native y Java)

</BlockBody>

export default ({ children }) => (
  <Layout title={meta.title} meta={meta}>
    {children}
  </Layout>
);


Kanda es una comunidad virtual para combatir el acoso telefónico y telemarketing no deseado. 

Kanda

Identifica posibles extorsionistas y evita que los números molestos te sigan llamando.

Bloquea números molestos

import Layout from '~/components/ProjectLayout';
import BlockImage from '~/components/BlockImage';
import BlockIntro from '~/components/BlockIntro';
import BlockCallout from '~/components/BlockCallout';
import BlockBody from '~/components/BlockBody';

export const meta = {
  title: 'SweetLeaf',
  position: 4,
  tags: ['App'],
  editorialTitle: 'Sweet&shy;Leaf',
  image: '/images/projects/project-preview-sweetleaf.png',
  openGraph: '/images/projects/sweetleaf-opengraph.png',
  logo: {
    src: '/logo-sweetleaf.png',
    width: 145,
    height: 72,
  },
  description:
    'Fuimos elegidos para disminuir el tiempo al mercado de la App de SweetLeaf.' +
    'Conoce como hicimos para acoplarnos a sus sistemas y lanzar sin contratiempos.',
  projectPreviewTitle: 'Desarrollo de App para empresa de stevia de USA',
  projectPreviewDescription:
    'Se desarrolló app para iOS y Android. Uno de los mayores productores de estevia a nivel mundial.  Abriendo un nuevo canal de venta.',
};

<BlockIntro
  title={meta.editorialTitle}
  coverSrc="/images/projects/sweetleaf-cover.jpg"
  mockupSrc="/images/projects/sweetleaf-mockup.png"
  label="¿Que hicimos?"
>

Desarrollo de App

</BlockIntro>

<BlockCallout>

Wisdom Natural Brands, líderes productores a base de Stevia1.
Su marca, SweetLeaf, es la más vendida en los Estados Unidos.
Y están presentes en más de 30 países.

</BlockCallout>

<BlockImage
  //
  src="/images/projects/sweetleaf-body-01.jpg"
  width={1275}
  height={805}
/>

<BlockBody label="Desafío">

Decidieron acercarse a nosotros para disminuir el "time to market" de su aplicación.
El objetivo era incrementar la lealtad de sus consumidores.
Brindándoles una herramienta útil para controlar el consumo de azúcar.
Al mismo tiempo, se ofrecen alternativas fabricadas por la marca.

</BlockBody>

<BlockImage
  //
  src="/images/projects/sweetleaf-body-02.jpg"
  width={1277}
  height={581}
/>

<BlockBody label="Logros">

El desafío tecnológico más fuerte fue en la fase estratégica.
Tuvimos que respetar y acoplarnos a los sistemas que ya tenían.
Dicho esto, encontramos una forma de consumir los datos necesarios de diferentes proveedores en la App.

Los artículos se consultan en WordPress, los productos de Shopify, localizador en Destini y otra información desde la API que hicimos.

</BlockBody>

<BlockBody label="Resultados">

Logramos concluir el desarrollo de la primera versión en 8 semanas.
Actualmente se encuentra en planeación una segunda versión.
De momento planeamos mejorar la estabilidad, velocidad y usabilidad.

</BlockBody>

export default ({ children }) => (
  <Layout title={meta.title} meta={meta}>
    {children}
  </Layout>
);


Fuimos elegidos para disminuir el tiempo al mercado de la App de SweetLeaf.Conoce como hicimos para acoplarnos a sus sistemas y lanzar sin contratiempos.

Sweet&shy;Leaf

Se desarrolló app para iOS y Android. Uno de los mayores productores de estevia a nivel mundial.  Abriendo un nuevo canal de venta.

Desarrollo de App para empresa de stevia de USA

SweetLeaf

import Layout from '~/components/ProjectLayout';
import Image from '~/components/Image';
import BlockImage from '~/components/BlockImage';
import BlockIntro from '~/components/BlockIntro';
import BlockCallout from '~/components/BlockCallout';
import BlockBody from '~/components/BlockBody';
import DownloadPrototype from '~/components/DownloadPrototype';

export const meta = {
  title: 'Una experiencia digital renovada para incrementar la venta de vuelos | ADHOC TI ®',
  position: 5,
  tags: ['App', 'Prototipo funcional'],
  editorialTitle: 'Viva Aero&shy;bus',
  description:
    'Usamos React Native para desarrollar un prototipo que soluciona puntos críticos en el proceso de compra de Viva Aerobús. ',
  image: '/images/projects/project-preview-vivaaerobus.png',
  openGraph: '/images/projects/vivaaerobus-prototipo-preview.png',
  logo: {
    src: '/logo-vivaaerobus.png',
    width: 109,
    height: 56,
  },
  projectPreviewTitle: 'Una experiencia digital renovada para incrementar la venta de vuelos',
  projectPreviewDescription:
    'Usamos React Native para desarrollar un prototipo que soluciona puntos críticos en el proceso de compra de Viva Aerobús. ',
};

<BlockIntro
  title={meta.editorialTitle}
  coverSrc="/images/projects/viva-aerobus-cover.jpg"
  mockupSrc="/images/projects/viva-aerobus-mockup.png"
  label="¿Qué hicimos?"
>

Arquitectura de flujo principal de venta

Rediseño y estandarización visual de la interfaz

Prototipo de alta fidelidad interactivo

</BlockIntro>

<BlockCallout label="Sobre el cliente">

Desarrollo de prototipo funcional que mejora el flujo del usuario y permite aumentar la cantidad de boletos vendidos.

</BlockCallout>

<BlockBody label="Sobre el cliente">
Viva Aerobus es una aerolínea mexicana con base de operaciones en el <a className="c-link c-link--inline" href="https://es.wikipedia.org/wiki/Aeropuerto_Internacional_de_Monterrey" target="_blank">Aeropuerto Internacional de Monterrey</a>, opera un total de 164 rutas a 58 destinos ofreciendo servicio en 41 ciudades nacionales y 11 ciudades en Estados Unidos.

</BlockBody>

<BlockImage src="/images/projects/viva-aerobus-body-01.jpg" width={1280} height={770} />

<BlockBody label="Retos" title="Mejorar la experiencia de usuario para el flujo de venta en su app móvil.">

Para reforzar su posición como una de las principales aerolíneas en México nuestra propuesta fue mejorar de manera clara la experiencia de usuario con el objetivo de incrementar la venta de vuelos desde la aplicación para móviles.

Esto llevó consigo retos algunos los cuales describimos a continuación:

- Diseñar un flujo para el usuario que le permitiera saber en todo momento en qué parte del proceso de venta se encontraba.
- Diseñar y estandarizar la propuesta visual para dar cohesión y sentido a la información presentada.
- Desarrollar la propuesta en un prototipo usable con información lo más real posible.

</BlockBody>

<BlockBody title ="Arquitectura de flujo de usuario" >

Uno de los objetivos primordiales de nuestra propuesta fue re-organizar el flujo de usuario en el proceso de compra. Esto nos permitió definir de manera temprana qué información se mostraría y sentaba las bases para la propuesta visual.

Tomamos como base el flujo de compra actual y lo re-organizamos de tal forma que permitiera al usuario saber en todo momento en qué etapa del proceso se encontraba.

</BlockBody>

<BlockImage src="/images/projects/viva-aerobus-body-02-es.jpg" width={1280} height={586} />

<BlockImage src="/images/projects/viva-aerobus-body-03-es.jpg" width={1280} height={586} />

<BlockBody>

Una vez resuelto este problema diseñamos dos componentes que estarían presentes en casi todo el flujo y servirían como un hilo que guía al usuario en el camino a su objetivo.

</BlockBody>

<BlockImage src="/images/projects/viva-aerobus-app3.png" width={1280} height={835} />

<BlockBody title="Diseño de interfaz e interacciones:">

Una vez que definimos la estructura del flujo principal podíamos proponer el detalle de las pantallas. Elegimos 3 partes del proceso que consideramos fundamentales para la experiencia general del usuario.

- Buscador y calendario de vuelos
- Selección de vuelos y paquetes
- Selección de asientos

</BlockBody>

<BlockBody
  title="Buscador y calendario de vuelos"
  image={<Image width={390} height={694} src="/images/projects/viva-aerobus-mockup-01.png" />}
>

Propusimos un diseño de calendario que ayude al usuario a reducir la incertidumbre de saber el costo de un vuelo, al seleccionar las fechas de salida y regreso. En un vistazo logramos dar a entender las fechas con vuelos disponibles con sus precios más económicos. En la misma pantalla dimos claridad en la selección de fechas usando colores y contrastes para los vuelos de ida y vuelta, que estarían presentes desde este paso en adelante.

</BlockBody>

<BlockBody  title="Selección de vuelos y paquetes">

Una de las pantallas más importantes es la de selección de horarios de vuelos y paquetes, el reto principal fue permitir al usuario explorar de manera clara y en una sola pantalla una gran cantidad de información relacionada a los resultados de vuelos, con sus fechas y detalles.

Para lograr esto definimos la disposición de elementos que tendría el layout para mostrar toda la información de manera clara y conveniente para el usuario.

1. Los resultados de los vuelos se acomodarían de arriba hacia abajo, mostrando los vuelos de salida primero y después los de regreso, claramente divididos.
1. Mostramos a primera vista la información más relevante para cada vuelo, añadiendo acciones para ver más detalles.
1. Diseñamos la información de paquetes y precios de forma que se navegara horizontalmente, dando contexto sobre qué vuelo se explora y las características de cada paquete.

De esta forma logramos que una pantalla muy condensada de información fuera comprensible y con sentido para el usuario.

</BlockBody>

<BlockImage src="/images/projects/viva-aerobus-body-04.jpg" width={1280} height={957} />

<BlockBody  title="Selección de asientos">

En la pantalla de selección de asientos nuestro objetivo fue diseñar los componentes de forma que el usuario tuviera presente el asiento que seleccionaba, para qué pasajero y sobre qué vuelo se encontraba. Este diseño permitía que el usuario pudiera modificar cualquier selección previa si así lo deseaba.

</BlockBody>

<BlockImage src="/images/projects/viva-aerobus-body-05.jpg" width={1280} height={835} />

<BlockBody title="Desarrollo del prototipo">

Debido a las limitantes con el tiempo de entrega, el desarrollo del prototipo se realizó casi al mismo tiempo que el diseño de la interfaz. Aprovechamos este flujo de trabajo tan estrecho para que el equipo diera feedback interno bajo etapas muy cortas y se tomarán decisiones rápidas, esto permitió hacer cambios oportunos en algunos componentes. Sin embargo hubo decisiones que se tomaron antes de iniciar el proyecto y que guiaron el desarrollo de inicio a fin:

- Desarrollar el prototipo en React Native bajo Expo
- Usar MirageJS para desarrollar un API falso que permitiera simular llamadas a un servidor.

##### React Native + Expo

Usar <a className="c-link c-link--inline" href="https://reactnative.dev/" target="_blank">React Native</a> nos permitió un desarrollo ultra rápido y asíncrono, cada miembro del equipo sabía qué componentes desarrollar y encontramos la manera de hacerlo al mismo tiempo. Al ser un prototipo de alta fidelidad podíamos obviar ciertas características nativas y centrarnos única y exclusivamente en la experiencia de usuario. Por último, <a className="c-link c-link--inline" target="_blank" href="https://expo.io/">Expo</a> nos permitió desplegar la app sin subirla a AppStore o Google Play Store ni exportar un ejecutable, solo es necesario leer un QR para instalarla.

##### Datos y API en tiempo real

Si queríamos proponer una experiencia real era necesario que los datos que se mostraban en el prototipo no parecieran ficticios. Esta fue una de las razones por las que optamos por usar <a className="c-link c-link--inline" href="https://miragejs.com/" target="_blank">MirageJS</a> para simular la mayor parte de la información que la app desplegaría.
Algunos datos que simulamos fueron los siguientes:

El calendario de vuelos y precios se genera al construir la app tomando en cuenta la fecha actual.
Los resultados de vuelos con sus horarios y detalles se generan 100% “al momento”
Los asientos con su numeración y categorización también se generan “al momento”

Esta librería nos permitió construir un API sin escribir código backend ni una base de datos completa, esto nos ahorró días de trabajo y abrió las puertas para un workflow más dinámico.

</BlockBody>

<BlockBody label="Conclusiones">

Realizando este proyecto, pudimos demostrar la viabilidad y eficiencia del nuestro modo de trabajar en proyectos de desarrollo a medida.

Obtuvimos un prototipo funcional en 4 semanas que puede ser instalado en cualquier dispositivo iOS o Android, y que puede ser utilizado para demostrar a accionistas o directivos, las áreas de oportunidad que el prototipo puede resolver y convencerlos de invertir en el proyecto.

</BlockBody>

<DownloadPrototype />

export default ({ children }) => (
  <Layout title={meta.title} meta={meta}>
    {children}
  </Layout>
);


Usamos React Native para desarrollar un prototipo que soluciona puntos críticos en el proceso de compra de Viva Aerobús. 

Viva Aero&shy;bus

Una experiencia digital renovada para incrementar la venta de vuelos

Una experiencia digital renovada para incrementar la venta de vuelos | ADHOC TI ®

import Layout from '~/components/ProjectLayout';
import Image from '~/components/Image';
import BlockImage from '~/components/BlockImage';
import BlockIntro from '~/components/BlockIntro';
import BlockCallout from '~/components/BlockCallout';
import BlockBody from '~/components/BlockBody';

export const meta = {
  title: 'Enrolados',
  position: 6,
  tags: ['App', 'WebApp'],
  editorialTitle: 'Enrolados',
  description:
    'Web App para la administración de las actividades en las empresas que te permiten tener un mejor control de tu progreso.',
  image: '/images/projects/project-preview-enrolados.png',
  logo: {
    src: '/logo-enrolados.png',
    width: 229,
    height: 73,
  },
  projectPreviewTitle: 'Ordena, controla y organiza el flujo de trabajo de toda la Empresa',
  projectPreviewDescription:
    'Desarrollamos una Web App para la administración de las actividades en las empresas que te permiten tener un mejor control de tu progreso.',
};

<BlockIntro
  title={meta.editorialTitle}
  coverSrc="/images/projects/enrolados-cover.jpg"
  mockupSrc="/images/projects/enrolados-mockup.png"
  label="¿Que hicimos?"
  type="laptop"
>

Desarrollo de App

</BlockIntro>

<BlockCallout>

Herramienta de colaboración, comunicación y gestión, que envuelve a tu compañía en una disciplina de colaboración práctica y efectiva para lograr crecimiento, eficiencia organizacional y resultados extraordinarios.

</BlockCallout>

<BlockImage src="/images/projects/enrolados-body-01.jpg" width={1280} height={770} />

<BlockBody>

Fuimos encomendados con la tarea de realizar una re-escritura completa del software del cliente. Ya que el software desarrollado de manera interna no contaba con las expectativas de resultados que se tenían.

</BlockBody>

<BlockImage src="/images/projects/enrolados-body-02.jpg" width={1280} height={770} />

<BlockBody label="Logros">

En base a las juntas iniciales y teniendo múltiples revisiones, desarrollamos un conjunto de software que fuera más fiel a los procesos de negocio que tenía el cliente, incrementando el rendimiento y estabilidad de la plataforma de manera exponencial.

</BlockBody>

<BlockBody label="TECNOLIGÍAS IMPLEMENTADAS">

- API (Node, Sequelize y Express)
- Webapp (Next.js, React, Redux y Flow)
- Apps de CRM para iOS y Android (React Native)

</BlockBody>

export default ({ children }) => (
  <Layout title={meta.title} meta={meta}>
    {children}
  </Layout>
);


Web App para la administración de las actividades en las empresas que te permiten tener un mejor control de tu progreso.

Enrolados

Desarrollamos una Web App para la administración de las actividades en las empresas que te permiten tener un mejor control de tu progreso.

Ordena, controla y organiza el flujo de trabajo de toda la Empresa

import Layout from '~/components/ProjectLayout';
import Image from '~/components/Image';
import BlockImage from '~/components/BlockImage';
import BlockIntro from '~/components/BlockIntro';
import BlockCallout from '~/components/BlockCallout';
import BlockBody from '~/components/BlockBody';

export const meta = {
  title: 'Blumi',
  position: 7,
  tags: ['App', 'PWA'],
  editorialTitle: 'Blumi',
  description:
    'Desarrollamos una Aplicación para agendar servicios de cuidado personal y la belleza con los más altos estándares de higiene hasta la comodidad de tu hogar.',
  image: '/images/projects/project-preview-blumi.png',
  logo: {
    src: '/logo-blumi.png',
    width: 116,
    height: 73,
  },
  projectPreviewTitle: 'Primero tú, después tú. ',
  projectPreviewDescription:
    'Desarrollamos una Aplicación para agendar servicios de cuidado personal y belleza con los más altos estándares de higiene hasta la comodidad de tu hogar.',
};

<BlockIntro
  title={meta.editorialTitle}
  coverSrc="/images/projects/blumi-cover.jpg"
  mockupSrc="/images/projects/blumi-mockup.png"
  label="¿Que hicimos?"
>

Desarrollo de App

</BlockIntro>

<BlockCallout>

Blumi es una empresa dedicada al cuidado personal y la belleza con los más altos estándares de higiene y calidad que busca brindar bienestar y atención en la comodidad del hogar. Se diferencian por ser el primer grupo que pone a disposición una App móvil para seleccionar y agendar cualquiera de sus servicios.

</BlockCallout>

<BlockImage src="/images/projects/blumi-body-01.jpg" width={1280} height={770} />

<BlockBody label="Desafío">

Los fundadores llegaron a nosotros con una visión clara para una nueva empresa dedicada al cuidado personal y bienestar.

Al ser su primera empresa basada en tecnología, fuimos capaces de orientarlos en todos los pasos necesarios a seguir para establecer una empresa tecnológica así como nuestras recomendaciones profesionales y asesoría continua.

</BlockBody>

<BlockImage src="/images/projects/blumi-body-02.jpg" width={1280} height={581} />

<BlockBody label="LOGROS">

Mezclando la visión de los clientes con nuestras recomendaciones pudimos ayudarles en todo el trayecto necesario para lanzar el producto digital al publico. Participamos en el manejo de cuenta para la nomenclatura de la empresa y diseño de imagen corporativa. Registramos sus credenciales para poder publicar en Google Play y App Store. Hicimos una propuesta de pila de tecnologías adecuadas a utilizar para el desarrollo. Desarrollamos en paralelo el conjunto de software necesario para agilizar el lanzamiento temprano. Realizamos un despliegue de aplicaciones en un entorno de pruebas y otro final para producción. Nos encargamos del control de calidad, hacer pruebas y aplicar mejoras continuas. Y por último nos encargamos del lanzamiento de aplicaciones a sus respectivas tiendas digitales.
Los entregables se dividen en los siguientes:

- API (Node, TypeScript, Express y Sequelize)- BackOffice (Next.js, Redux)
- BackOffice (Next.js, TypeScript, Redux)
- App de Clientes para iOS y Android (React Native)
- App de proveedores de servicios para iOS y Android (React Native)

</BlockBody>

export default ({ children }) => (
  <Layout title={meta.title} meta={meta}>
    {children}
  </Layout>
);


Desarrollamos una Aplicación para agendar servicios de cuidado personal y la belleza con los más altos estándares de higiene hasta la comodidad de tu hogar.

Blumi

Desarrollamos una Aplicación para agendar servicios de cuidado personal y belleza con los más altos estándares de higiene hasta la comodidad de tu hogar.