Codely

Nueva marca y web para plataforma de cursos para programadores
Nueva marca y web para plataforma de cursos para programadores — featured

Codely es calidad y buen rollito, pura personalidad. Juntos, y con la máxima agilidad, hemos evolucionado su marca para impulsar su ventaja competitiva en esta nueva etapa, sin perder su esencia, con un nuevo universo visual y una web más funcional.

Cómo empezó todo

¿Qué tienen en común Codely, Hawái y un perro con capa? Te lo contamos en este Case Study.

Codely es una plataforma de formación online para programadores. Pero nada que ver con una academia al uso. Aquí el desarrollo y el aprendizaje es un proceso divertido, integrado en el flujo de trabajo y totalmente actualizado, tanto en el fondo como en la forma.

<video class="video-full" autoplay preload loop muted playsinline><source src="https://media.solublestudio.com/daedai8zs/video/upload/f_auto,q_auto/v1779358534/solubleweb/Codely_case/codely-block-693301eeee2f48db9cf07e7097be0fa7" type="video/mp4"></video>

EL VIAJE DE LA ESTRATEGIA

Comenzamos a trabajar en el reto de evolucionar su marca para que pudiesen impulsar su ventaja competitiva, sin perder ni un ápice de su esencia. Para identificar su propuesta de valor, alinear el discurso y orientar el proceso del rediseño de forma ágil, necesitábamos entender su ecosistema, conocer a Rafa, a Javi y a su equipo.

Así, pudimos construir una plataforma que recogía su esencia (aprender al más alto nivel no está reñido con divertirse), su evolución (convertirse en algo más que un producto, llegando a crear vínculos con su comunidad), y su forma de ser y de hacer que se aleja del sofisticado mundo del desarrollo. En definitiva, llegamos a la conclusión de que lo de Codely era el Desarrollo sin rollos.

El trabajo estratégico nos permitió hacer el retrato robot de la marca en esta nueva etapa. Su nueva identidad visual va mucho más allá del logo, es todo un universo.

<video class="video-full" autoplay preload loop muted playsinline><source src="https://media.solublestudio.com/daedai8zs/video/upload/f_auto,q_auto/v1779358534/solubleweb/Codely_case/codely-block-2c5a35a140e54e68937f9c7648e33cb5" type="video/mp4"></video>

El nuevo logo de Codely nace de su entorno, de su medio. El diamante que indica el inicio y fin de las etiquetas HTML, y que nos lleva a descubrir juegos como la semejanza con las consonantes C y D de Codely, o el parecido con un play y el rewind forward de los vídeos. Además, abre una puerta a la esfera digital en la que vive la marca, permitiendo “un mundo de avatares”.

<video class="video-full" autoplay preload loop muted playsinline><source src="https://media.solublestudio.com/daedai8zs/video/upload/f_auto,q_auto/v1779358534/solubleweb/Codely_case/codely-block-668bc01a073e4a9784d63e0896e0bb57" type="video/mp4"></video>

Otro de los elementos clave del nuevo universo visual es su color. Con este verde muy similar al de los chroma keys situamos a la marca en la tendencia tecnológica y le ofrecemos infinitas posibilidades. Para combinar este color lleno de sentidos y emoción, contamos con un blanco y negro matizados y únicos.

Conseguimos así reflejar lo en serio que se toman la programación y el desarrollo, pero... ¿dónde queda la fantasía? ¿Tendría esta versión adulta de Codely que dejar de ponerse camisas hawaianas los viernes? Por supuesto que... no. Partiendo de ese uniforme desenfadado del equipo, con la camisa hawaiana por bandera, creamos un primer estampado que podría convivir con el resto de elementos de la marca y cubrir de palmeras y flores el espacio que el verde chroma nos proporcionaba.

<video class="video-full" autoplay preload loop muted playsinline><source src="https://media.solublestudio.com/daedai8zs/video/upload/f_auto,q_auto/v1779358534/solubleweb/Codely_case/codely-block-04f378cc1fb64eef860c27151e23d212" type="video/mp4"></video>

Pero, ¿solo uno? El estampado nos abría las puertas a la fantasía ¿Una piña? ¿Un flamenco? ¿Un perro con capa? Aquí todo es posible.

<video class="video-full" autoplay preload loop muted playsinline><source src="https://media.solublestudio.com/daedai8zs/video/upload/f_auto,q_auto/v1779358534/solubleweb/Codely_case/codely-block-fca3aa72065d467c97d282c1d074cab4" type="video/mp4"></video>
<video class="video-full" autoplay preload loop muted playsinline><source src="https://media.solublestudio.com/daedai8zs/video/upload/f_auto,q_auto/v1779358534/solubleweb/Codely_case/codely-block-a62bab8208c04c0a8799d6d3c6ffc88a" type="video/mp4"></video>
<video class="video-full" autoplay preload loop muted playsinline><source src="https://media.solublestudio.com/daedai8zs/video/upload/f_auto,q_auto/v1779358534/solubleweb/Codely_case/codely-block-ab2c2e31a43442f19caeb64ff521e9c8" type="video/mp4"></video>
<video class="video-full" autoplay preload loop muted playsinline><source src="https://media.solublestudio.com/daedai8zs/video/upload/f_auto,q_auto/v1779358534/solubleweb/Codely_case/codely-block-df2fe72fab97410b828c7e1a44b6bcfe" type="video/mp4"></video>
<video class="video-full" autoplay preload loop muted playsinline><source src="https://media.solublestudio.com/daedai8zs/video/upload/f_auto,q_auto/v1779358534/solubleweb/Codely_case/codely-block-4f96cf96b4504fd9b21a6ae8c1d987bb" type="video/mp4"></video>

La evolución y el nuevo universo visual de Codely transforma también el lugar en el que todo empezó, su web. Comenzamos ordenando todo lo que había que comunicar, tanto a nivel del producto como de marca. Mano a mano con el equipo de Codely, identificamos sus puntos fuertes para jerarquizarlos y contarlos.

Y desde ahí tomamos las primeras decisiones de arquitectura y navegación, para ofrecer un planteamiento claro y simple al usuario. En la nueva home, conocemos de un primer vistazo qué es Codely.tv y cuál es su propuesta de valor, y contamos con dos landings diferenciadas para sus dos tipos de públicos, los coders y las empresas. En cuanto a la fantasía llevada a la web... mejor juzga por ti mismo. ¿Estás ready para un poco de magia?

<video class="video-full" autoplay preload loop muted playsinline><source src="https://media.solublestudio.com/daedai8zs/video/upload/f_auto,q_auto/v1779358534/solubleweb/Codely_case/codely-block-5c9412ac4e14473db8615e2b6ae0a11b" type="video/mp4"></video>
<video class="video-full" autoplay preload loop muted playsinline><source src="https://media.solublestudio.com/daedai8zs/video/upload/f_auto,q_auto/v1779358534/solubleweb/Codely_case/codely-block-792780cb15d944aeb1f6b677d8a416ef" type="video/mp4"></video>
<video class="video-full" autoplay preload loop muted playsinline><source src="https://media.solublestudio.com/daedai8zs/video/upload/f_auto,q_auto/v1779358534/solubleweb/Codely_case/codely-block-4d30a774e44540a38b7910ae05f96d00" type="video/mp4"></video>

Validación de nuestro enfoque.

Ucademy

Ver caso

Ucademy

Ver caso

Ucademy

Ver caso

Ucademy

El reto
Especializar una EdTech de alto crecimiento sin fragmentar su esencia ni renunciar a una ambición global.
La solución
Un "mapa salvaje": arquitectura de endoso y sistema visual que dota de autonomía a cada vertical bajo un ecosistema común.
Ver caso

Punto

El reto
Posicionar una solución compleja de IA en un mercado tradicional, logrando una propuesta comprensible que genere confianza inmediata.
La solución
Un sistema visual y verbal basado en el orden y la claridad que trabaja para eliminar fricciones y el lastre operativo.
Ver caso
Ver todos
Hacemos que las empresas parezcan tan buenas como son
¿Hablamos?