A finales del año pasado decidimos que era hora de llevar nuestro sitio web al siguiente nivel, alineándolo con el nuevo enfoque empresarial de la compañía.
Antes de empezar hacía falta una investigación a fondo para entender el nuevo objetivo y los nuevos prospectos de la compañía. Con todo aclarado frente a ese enfoque, empezó un camino de diseño retador pero muy divertido. Encontrar la ruta correcta no fue fácil; por eso fue necesario iterar mucho entre distintas versiones de estilo, hasta que finalmente creamos uno alineado con los objetivos de la compañía.
No fue fácil, pero el resultado definitivamente vale la pena. Así lo hicimos.
Dar una experiencia de usuario (UX) sin fricciones
Para hacer más fácil la navegación en todo el sitio, empezamos por repensar nuestro mapa del sitio y darle mejor estructura y jerarquía a las páginas.
Para eso tuvimos que eliminar algunas páginas y reducir el desorden, y permitir que los usuarios encontraran rápido lo que necesitaban. Por ejemplo, nuestra página "Nosotros" del sitio anterior tenía subpáginas que creaban pasos extra para llegar a la información de la compañía. Ahora todo en la nueva página "Nosotros" está diseñado para verse de un vistazo, mostrando nuestra misión, los productos de la compañía y el equipo de liderazgo.
Durante la etapa de wireframes iteramos mucho con bocetos hechos a mano (todavía nos encanta usar lápiz y papel), prototipamos y probamos distintas versiones del layout del sitio antes de cada reunión de revisión de diseño. Ahí discutíamos alrededor del prototipo y tomábamos decisiones antes de pasar a la etapa de diseño pesado.
Usamos un documento colaborativo para reunir referencias y compartir lo que pensábamos sobre qué cambios podían crear una experiencia de navegación más fluida. Queríamos ir más allá de lo que habíamos hecho con nuestro sitio en el pasado. Por eso decidimos tomar un enfoque de diseño totalmente distinto, usando imágenes principales con objetos 3D hechos en casa para dar contexto, una tipografía Koombea grande y pulida, iconos delgados de contorno para apoyar el mensaje, y transiciones y animaciones suaves.
CONSEJO PRO: la UX tiene un papel esencial en todo proceso de diseño. Tanto la apariencia del sitio como la interacción del usuario son piezas muy importantes de la experiencia completa. Así que, para crear una experiencia de usuario sin fricciones, recomendamos empezar fijando metas claras; después, pasar a diseñar tus lineamientos visuales, tus transiciones y tus animaciones, siempre teniendo en mente a tu audiencia. Siguiendo esos pasos, tus usuarios van a tener una navegación más fluida y van a sacarle más valor a tu sitio. Al final, vas a estar enganchando usuarios nuevos y recurrentes.
Ajustarse a la era móvil
Ser completamente responsivo nos permite llegar a una audiencia más amplia en un mundo conectado desde el móvil. Eso es muy importante considerando que cada vez más gente tiene acceso a dispositivos móviles con internet rápido, y que navegar desde un teléfono o una tableta ha aumentado sustancialmente frente a navegar desde un computador.
Nuestro sitio anterior tenía algunos problemas con las versiones responsivas. Para esta nueva versión nos aseguramos de resolverlos, con la meta de darle a nuestros usuarios una experiencia óptima en distintos tamaños de pantalla.
Mejoramos la experiencia de usuario haciendo elementos gráficos, imágenes y contenidos ajustables al tamaño de pantalla. En la versión móvil también implementamos desplazamiento horizontal, para poder mostrarle la misma cantidad de información a quienes usan pantallas pequeñas. Por ejemplo, la sección de capacidades de la página de servicios es un buen ejemplo de estas mejoras.
Además, el menú principal rediseñado permite acceso rápido a las páginas más importantes del sitio y quedó optimizado para las versiones responsivas, donde usamos un menú de hamburguesa de ancho completo para mostrar los mismos enlaces en cualquier dispositivo.
CONSEJO PRO: al construir tu sitio, ten en mente que los dispositivos móviles se han convertido en el primer punto de acceso para la gente en todo el mundo. Recuerda que la apariencia de tu sitio en escritorio no es la misma que en móvil o en tableta. Por eso tienes que pensar cómo van a adaptarse todos los elementos de tu sitio, como las imágenes, los titulares, los párrafos, los iconos y demás, a todos los tamaños de pantalla. Es importante considerar el espaciado y las capacidades táctiles de los dispositivos móviles para crear una gran experiencia de usuario, pero siempre ten en mente que la versión responsiva debería sentirse conectada con la de escritorio.
Llevar nuestra marca un paso más allá
Hace dos años hicimos una actualización mayor al diseño de nuestra marca. Sin embargo, con este nuevo rediseño sentimos que era necesario refrescar también nuestros lineamientos de marca. Algunos de los elementos visuales que usamos en el nuevo sitio van a aparecer en una amplia variedad de materiales de la compañía, como piezas de mercadeo, banners publicitarios, documentos técnicos y material impreso.
Hubo un proceso extenso detrás de escoger la tipografía correcta, los colores correctos, los iconos y las imágenes usadas en esta nueva etapa. Fueron necesarias muchas pruebas, cambios y discusiones con los diseñadores y con otras personas del equipo para llegar a un punto en el que todos los elementos quedaran alineados con los objetivos de la compañía.
Estamos presentando una nueva tipografía corporativa para todos los titulares, usada tanto en el sitio como en material impreso. Escogimos una sans-serif llamada Circular Std, entre más de 20 estilos, porque está muy bien construida, es geométrica, tiene una gran legibilidad en pantalla y formas que se parecen a nuestro logo. Tiene una apariencia corporativa y elegante, pero se siente divertida y accesible.
Nuestra nueva paleta de color es más brillante, más vibrante y más nítida que la anterior. El nuevo verde corporativo de Koombea llama la atención y da contraste alto al lado del nuevo color complementario, un turquesa oscuro que también estamos presentando.
Además, el sitio tiene un nuevo conjunto de iconos diseñados especialmente para este proyecto. Son de contorno, planos y construidos con cuidado para darle claridad a las ideas presentadas.
¿Te gustaría usar este conjunto de iconos en tu próximo proyecto, personal o comercial? Consíguelo aquí, es gratis.
CONSEJO PRO: siempre tuvimos en mente nuestra marca como un todo, nuestra audiencia y sus necesidades. Cuando llegó el momento de los ajustes y las mejoras, no se trataba solo de cómo se veían nuestro logo, nuestras tipografías y nuestros colores, sino de crear todo un lenguaje de diseño alrededor de nuestra marca. La idea es hacer tu marca reconocible con consistencia en cada pieza de diseño y en cada material de mercadeo. Ten en mente a la audiencia de tu marca, sé siempre directo con la apariencia, y acuérdate de hacer buen uso de elementos de diseño como colores, formas y tipografías para volver más alcanzable a tu objetivo. Por último, cuando actualices tu marca, trata de evitar las tendencias de diseño, para crear una marca más reconocible y atemporal.
Un proceso de rediseño puede ser una experiencia muy retadora. Sin embargo, si trabajan juntos y mantienen las metas a la vista, puede ser la experiencia más divertida y gratificante para un equipo de diseño.
Recorre el sitio y cuéntanos qué piensas de los cambios nuevos.
No olvides seguir nuestra cuenta de equipo en Dribbble, donde compartimos a diario piezas de proyectos divertidos e interesantes en los que estamos trabajando.
- Monty y el equipo de diseño.