Caso de estudio: Diseño y desarrollo de página web Puntored por agencia de marketing digital

opengraph blog de tuatara caso de estudio puntored

En Tuatara, como agencia de marketing digital, somos consultores y ejecutores de soluciones en ecosistemas digitales. En esta ocasión, nos convertimos en la extensión de trabajo y en los aliados estratégicos de Puntored para el diseño de su página web, y su posterior desarrollo a la medida, con la finalidad de comunicar la nueva propuesta de negocio para el 2022. 

Puntored es una de las Fintech más robustas de Colombia, que conecta a más de 8 millones de usuarios de forma digital y física, acercándolos al sistema financiero y brindando oportunidades de ingreso a pequeños negocios y grandes empresas en el país. Ha fortalecido relaciones con más de 150 grandes empresas de diferentes sectores económicos, ofreciendo servicios financieros a través de nuevas tecnologías. 

Al ser una empresa que viene creciendo a grandes pasos desde hace 16 años, vio la necesidad de transformarse dividiendo la comunicación hacia cada uno de sus públicos objetivos.

Paso posterior a esta transición, comprendió que su página web presentaba oportunidades de mejora, por lo que buscaron una agencia de marketing digital que fuera experta en el diseño de página web.

Conoce a fondo este caso.👇

Objetivo general del diseño página web Puntored

  • Diseñar la página web de Puntored, bajo criterios de UX, SEO y Performance para mostrar la propuesta de valor al buyer persona definido.

Objetivos secundarios del diseño página web Puntored

  1. Recolectar toda la información referente al proyecto y definir un norte claro. 
  2. Realizar la metodología Design Sprint.
  3. Implementar el diseño web creado en el Design Sprint siendo fiel a los recursos gráficos y look and feel de la marca.
  4. Crear una buena configuración SEO para que los motores de búsqueda puedan encontrar más fácil la página web de Puntored. 

Te puede interesar: Caso de estudio: Página web💻 Colquímicos

Tuatara – Agencia de marketing digital experta en el diseño de páginas web

En Tuatara, como agencia de marketing digital, nos encontramos en constantes procesos de mejora de los productos que entregamos. En los procesos de diseño de página web trabajamos con principios de UX / UI los cuales definimos mejor en la metodología Design Sprint.

Design Sprint – Metodología para el diseño de página web

El Design Sprint es una metodología de Google que adaptamos a la dinámica del mercado de las agencias de marketing digital. Permite generar un lenguaje común entre Puntored y Tuatara, para determinar exactamente lo que se espera durante el proceso de diseño de la página web, no tener retrocesos y malgasto de recursos. 

Esta metodología ha sido aplicada por Tuatara Agencia Boutique en Colombia e internacionalmente a más de 40 clientes de diferentes sectores económicos. 

Descubre cómo llevamos a cabo cada una de las etapas del Design Sprint👇

1. Investigación y estructura en el diseño de página web 

diseno pagina web
diseno pagina web

En esta primera etapa se busca alinear y organizar las ideas, de tal manera que todo el equipo tenga claro el producto a desarrollar. El diseño de la página web representa un trabajo en conjunto entre Puntored y Tuatara. 

En esta etapa se responden las preguntas que se generen con respecto a los usuarios, al producto y al mercado, o frente a la necesidad que se busca resolver.

Por este motivo, si ya contamos con un MVP (Producto mínimo viable) o la investigación previa, partimos de ese punto para continuar el proceso. Esta etapa varía mucho entre cada cliente, dado que la información que se requiere para avanzar en algunos casos es más completa que en otros. Con Puntored, se tenía claro un norte estratégico de comunicación para este activo digital.

Puedes profundizar sobre el Producto mínimo viable (MVP), aquí.  

2. Arquitectura de la información en el diseño de página web 

arquitectura diseno pagina web

En esta etapa visualizamos cuál es la estructura de la página web, cómo se comunican las diferentes secciones y cómo promovemos el objetivo general.

Adicionalmente, se definen las subsecciones que parten del home y la forma como se navega entre ellas, teniendo en cuenta que no quede ningún contenido perdido o aislado, garantizando de esta manera una óptima navegabilidad.

Cuando el cliente tiene claro lo que quiere, los tiempos de entrega se acortan. En reunión de kickoff con Puntored definimos la estructura, para comenzar con el Keyword Research de acuerdo con las páginas, subpáginas y el contenido definido.

Cabe destacar que el cliente contaba con un borrador de wireframes, que ayudó a entender lo que querían comunicar y a optimizar los tiempos del proceso. 

 3. Investigación de Keyword para SEO

equipo de trabajo

En esta etapa el departamento de marketing digital se encarga de separar las diferentes urls de las páginas, destinando una palabra clave objetivo para cada página, de acuerdo con la investigación y las oportunidades que se encontraron de posicionamiento SEO para la industria.

Así mismo, para cada página se define una estructura de títulos (H1, H2, H3), metatítulos y metadescripciones, para iniciar el camino del posicionamiento SEO, desde el lanzamiento de la página web.

Este proceso ayuda a que el diseño de la interfaz (UI) sea más claro para el departamento de diseño, dado que se contextualiza el objetivo de cada una de las páginas. 

4. Wireframes | UX de la página web 

smartphone blanco

Los Wireframes hacen referencia a la obra gris del diseño de una página web.

Esta etapa se centra en el usuario, permitiendo visualizar la experiencia de navegación y estableciendo los espacios y el tipo de contenido que se quiere usar, ya sea solo texto, fotografías, videos, entre otros, con el fin de evitar retrocesos y comunicar de manera fiel la propuesta de valor de Puntored. 

Gracias al trabajo que se hizo en los wireframes, el cliente tomó conciencia de las debilidades y oportunidades de mejora de la experiencia del usuario por medio de la navegabilidad intuitiva de la página web, ante lo que habían considerado hasta ese momento.

Desde Tuatara, como agencia de marketing digital, sugerimos cambios en la estructura, dado que suele pasar que los clientes que están en procesos de diseño de página web, consideran que toda la información debe estar en el Home o en una misma pantalla, o en sitios en donde el usuario final no está acostumbrado a encontrarlos. 

Por lo tanto, en estas etapas tempranas del proyecto de diseño de la página web de Puntored, se pudo identificar que existían flujos de navegación que iban en contra de los objetivos de la página y se logró corregirlos antes de invertir más tiempo y recursos. 

Si el usuario puede navegar de forma fluida a partir de esta etapa, sin necesidad de tener la “decoración” de la página, es el resultado de un óptimo trabajo desde la etapa de diseño de wireframes para la página web. 

pagina puntored

5. Diseño Mockups | UI de página web 

smartphones

Esta etapa se destina para darle los acabados al diseño de la página web, contemplando los colores de la marca, la línea gráfica que vaya de la mano con las fotografía adecuadas, que las interacciones tengan animaciones, entre otros. 

Una de las ventajas de Tuatara como agencia de marketing digital, es el entendimiento de grandes marcas que están documentadas y que deben seguir ciertos lineamientos, independientemente de su espacio de comunicación.

Así, utilizamos el manual de marca de Puntored para entender el marco gráfico bajo el cual se pueden hacer nuevas propuestas de marca que el usuario perciba cercanas y a la vez novedosas, y de esta manera contribuir con el posicionamiento de marca. 

Finalmente, con esta etapa, Puntored pudo emular lo que sería la experiencia final de la página web y así estar más confiado que aquella que se lanza el día planeado, vaya acorde con los objetivos gerenciales. 

pagina puntored

6. Prototipado

mano sujetando un smartphone

En términos prácticos, esta metodología sirve para llegar a la experiencia final que tendrán los usuarios últimos de la página web, en poco tiempo y a bajo costo.

Para poder conocer la navegabilidad de la página web, construimos una versión de los Mockups en Adobe XD. Esto permite navegar todas las pantallas y los flujos de usabilidad. 

En el caso de Puntored, decidimos pasar de mockups a desarrollo, dado que no se consideró necesario montar un prototipo navegable, ya que desde los mockups se entendió completamente el norte definido.

También te puede interesar: Caso de estudio toc toc aseo – Transformación Digital Empresarial (Marketing Digital)

Desarrollo de la página web de Puntored

desarrollo pagina puntored

“No somos proveedores de nuestros clientes, lo que buscamos es convertirnos en extensiones de trabajo”. Fabrizio González, CEO Tuatara Agencia Boutique 

En Tuatara, como agencia de marketing digital, desarrollamos páginas web a la medida empleando buenas prácticas de performance, usabilidad y SEO. Esto se hace con la finalidad de incrementar el UX de los visitantes de la página web, tanto en escritorio como en móviles.  

Nos enfocamos en la construcción de un CM (content manager), que permita al cliente tener la libertad y capacidad de modificar, actualizar y subir nuevos contenidos. Para esto, desarrollamos dentro de la plataforma WordPress, diferentes módulos que facilitan la administración de la página web.  

En esta etapa se incrementa la comunicación entre los departamentos de diseño y desarrollo, para empezar a definir las estructuras, animaciones y funcionalidades expuestas en los mockups.

Una vez se tiene este insumo, se sabe a ciencia cierta el total de días u horas de trabajo que requiere el desarrollo de la página web

En paralelo a esto, se trabaja con el departamento de marketing digital para la conexión con Google Analytics y la implementación de píxeles, para entender el desempeño del tráfico que tiene la página web y crear todo el ecosistema digital de la marca. 

Es importante entender que Puntored quería un sitio completamente nuevo que respondiera a las nuevas directrices de la propuesta de valor de la empresa y que empezara a comunicarse de una forma diferente para cada una de sus audiencias. 

El trabajo posterior del departamento de desarrollo consiste en aterrizar de la forma más fiel posible los mockups aprobados, con un desarrollo a la medida, con código limpio y claro para navegadores de búsqueda.

Navega y conoce la página web de Puntored. ¡Aquí!

Resultado Woorank – Página web Puntored | SEO

Finalizado el desarrollo de la página web, se utiliza Woorank para realizar un diagnóstico y depuración final, y obtener una página web más fluida. Esta herramienta permite una visión amplia del SEO y performance de la página web a través de chequeos automáticos de código y configuraciones de marketing.

El resultado obtenido muestra un score general y entrega un road map de mejoras muy tácticas. Al depurar la información, logramos un Score fenomenal de 90/100.

Contáctanos si quieres conocer el Score de tu página web. ¡Aquí!

woorank puntored

Manual de uso y administración de la página web Puntored

En Tuatara desarrollamos páginas web que se convierten en un activo digital de nuestros clientes.

Esto quiere decir que una vez se termina el desarrollo de la página, entregamos un manual de usuario para la administración de la plataforma y una capacitación grabada con el equipo responsable del mantenimiento de la página web.

manual de usuario puntored

El manual de la página web de Puntored detalla el uso y administración de cada una de las secciones desarrolladas, con el fin de que el cliente tenga autonomía sobre el activo digital. Además, permite que el cliente no tenga que acudir a la agencia de marketing digital para realizar cualquier cambio. 

De igual forma, contemplamos 6 meses para brindar soporte ante cualquier eventualidad que esté dentro de los criterios de buena funcionalidad de la página web.

Tuatara  – Agencia de marketing digital

En Tuatara somos una agencia de marketing digital especializada en el diseño de páginas web. Abordamos cada proyecto a través de la innovación, para brindarle a las empresas la posibilidad de crear activos digitales que apoyen las metas gerenciales. 

Empleamos buenas prácticas de entrega de nuestros proyectos: documentación de cada etapa, diseños en editable, back ups, análisis de seguridad, entre otros. Todos estos archivos se entregan en formato digital, dispuestos en la nube, permitiendo de esta manera que nuestros clientes accedan a ellos de forma segura.

Si buscas diseñar tu página web y obtener resultados extraordinarios, conoce otros casos de éxito y contáctanos para brindarte la mejor asesoría.👉 ¡Aquí!


¡Únete a la causa y vive el mutualismo! Si quieres ser parte de Tuatara Agencia Boutique, déjanos tu Hoja de Vida, aquí. ¡Estamos inquietos por conocerte!