Índice
- ¿Qué es?
- ¿Cómo nace?
- Requisitos de desarrollo que afectan al diseño
- Creación de marca
- Creación del blog
- Conclusión
1. ¿Qué es?
Sirviendo Código es un proyecto con la intención de dar un espacio inclusivo para compartir conocimiento del mundo IT. Pero eso es ahora, ya que en el momento del encargo empezó siendo un blog. La idea era crear un canal digital dentro de la comunidad en donde la colaboración, el buen rollo y el código sean los protagonistas. Ahora no es sólo un blog, y por eso la guía de marca de este proyecto resulta tan importante.
El nombre ya estaba elegido, y viene de la expresión de los años 80, “Serving Cunt”, que se utilizaba al participar “dándolo todo” en los ballrooms de la comunidad LGTBI, concretamente con el movimiento drag de Nueva York. Así formaron el juego de palabras para expresar que quieres demostrar tu máximo potencial dentro de la comunidad tech.
Como referencias se nos facilitan blogs como Adictos al trabajo, Baeldung o Medium. De esta manera, comenzamos con una revisión de dichos blogs para analizar la forma en la que tienen estructurados los artículos, cómo se realizan las búsquedas, sus flujos de navegación o la información facilitada a los usuarios. Así es como nos aseguramos seguir patrones que los usuarios están acostumbrados.
2. ¿Cómo nace?
A partir de este punto, comenzamos a investigar a los usuarios, para lo que utilizamos prácticas habituales como es la creación de user persona, concretamente dos que nos ayudan a entender el público objetivo. Así es como creamos con dos perfiles extremos, los perfiles ficticios de Paúl, desarrollador Python senior, con una personalidad introvertida que quiere estar al día dentro de su entorno laboral sin salir de su zona de confort, y Sofía, más joven, entry level, pero una profesional curiosa y creativa, que suele estar en búsqueda de nuevos desafíos y oportunidades de aprendizaje. Es tech-savvy y disfruta resolviendo problemas complejos y, a diferencia de Paúl, su naturaleza sociable la lleva a participar activamente en discusiones técnicas y a compartir sus conocimientos con otros. Son dos perfiles opuestos, pero con interés común en la comunidad tech, en aprender y en compartir, y que puedan ser reconocidos por su trabajo e implicación.
Los Retos, el How May We (HMW) o los problemas a resolver que nos encontramos fueron:
- ¿Cómo podríamos hacer que el blog pase a ser un sitio de referencia del sector?
- ¿Qué hacer diferente para que los autores prefieren escribir en este blog antes que en otros sitios?
- ¿Cómo dar protagonismo a los escritores de artículos sobre lenguajes de programación en el blog?
Para responder a estas preguntas, realizamos una lluvia de ideas, que junto con el análisis de los competidores, nos dieron insights interesantes como:
- Dar reconocimiento y recompensas a personas que escriben: “¡Celebremos el increíble trabajo de nuestros autores!”
- Aumentar la participación de la comunidad, con desafíos, fomentando debates y comentarios de los artículos y un buen movimiento en las redes sociales.
- Desarrollar habilidades de escritura para los escritores interesados: Organizar talleres periódicos sobre técnicas de escritura, optimización SEO y estructura de contenido.
- Plan de implementación del blog, con una estrategia de contenido, estudiando qué artículos son los más consultados, desarrollar un calendario de contenido o tener ciertos temas bases, además de marketing, colaborando con influencers, correo electrónico o campañas en redes sociales y eventos.
Pero estas acciones se quedaban fuera de cómo estructurar y formar el propio blog. Son ideas que iban más allá, así que nos centramos en lo que afectaba al producto en concreto. En definitiva, vimos la importancia de analizar las métricas de rendimiento del blog y las publicaciones con mejor rendimiento en función del tráfico, las acciones y los comentarios, de esta forma “bajar a tierra” o, mejor dicho, al blog, esos insights.
Al mismo tiempo, elaboramos un flujo de navegación que nos ayudaría mucho con estos retos:
Estos elementos ya nos ayudaron a empezar a ver aspectos que eran imprescindibles a incorporar en el blog.
3. Requisitos de desarrollo que afectan al diseño
Por requerimiento del cliente, el desarrollo sería en WordPress, por lo que adaptamos el diseño a este entorno. Tuvimos en cuenta funcionalidades como:
- Un diseño que se adapte a diferentes dispositivos, es crucial para retener a los usuarios y mejorar la experiencia de lectura. Como métricas relevantes tendríamos la tasa de rebote o el tiempo de permanencia en la página.
- Sistema de valoración y retroalimentación, para que los usuarios puedan calificar el contenido, y permitir feedback específico sobre los artículos. De este modo obtendremos calificaciones promedio de los artículos y tasas de participación en la valoración.
- Los perfiles detallados de los autores, incluyendo biografía o datos curiosos que ayudan a empatizar al lector, enlaces a redes sociales y otros trabajos publicados, además pueden ayudar a establecer su credibilidad y atraer a lectores interesados en seguir su trabajo.
- Facilitar el compartir contenido en redes sociales para aumentar el alcance y atraer movimiento, así optimizamos los motores de búsqueda (SEO) y se puede analizar el tráfico orgánico, el número de veces compartido, y el tráfico desde redes sociales.
- Una función de búsqueda avanzada y una categorización clara del contenido (por lenguaje, nivel de dificultad, tipo de contenido) mejoran la navegación y la usabilidad. Esta categorización del contenido se irá detallando según vayan subiendo artículos al blog.
A futuro valoramos otras opciones como permitir a los usuarios comentar y discutir el contenido para fomentar la participación, proporcionando feedback valioso para los autores, que los usuarios reciban notificaciones de nuevos artículos o comentarios para tener visitas recurrentes. Otra opción sería crear un dashboard para los autores, que muestre métricas de rendimiento de sus artículos (como vistas, tiempo de lectura, comentarios), para que puedan entender mejor su audiencia y ajustar su contenido.
Pero este ciclo continuo de mejora, basándose en las métricas y el feedback directo de los usuarios para asegurar que el blog evolucione y se adapte a las necesidades de la audiencia, es algo que le corresponde al cliente aplicar, con lo cual nosotras facilitamos la posibilidad de que lo lleven a cabo, con los elementos y secciones diseñadas.
En este punto teniendo en cuenta al cliente en todo el proceso de diseño, con reuniones semanales mostrando los avances, compartimos la importancia de los contrastes de color y la tipografía para que el blog sea legible por todas las personas. Así es como planteamos el diseño de marca de “Sirviendo Código”, para que el producto sea coherente y refleje la identidad visual de la comunidad.
4. Creación de marca
Con estas referencias y el brief del cliente, buscamos diferenciarnos de los blogs y comunidades ya existentes, con ello captar la atención de nuevos lectores y autores. Para conseguirlo, fue necesario pensar en la identidad visual, diseñar “cómo se ve” Sirviendo Código en el mundo IT, de esta forma crear confianza y credibilidad, generando conexión con los usuarios y, que a su vez, el cliente se sienta identificado.
Uno de los elementos fundamentales dentro de la comunicación visual son los colores. Para esta comunidad se escogieron 4 principales:
- Azul profundo que transmite confianza y profesionalidad.
- Blanco neutro para dar equilibrio y crear un espacio claro y acogedor.
- Azul que otorga energía, apelando a la creatividad y nuevas ideas
- Variante turquesa, que entrega toques de frescura e innovación a la marca.
Una vez decididos los colores de la marca, realizamos un análisis de los colores a aplicar en el blog, con contraste de fondo versus primer plano, es decir, el texto superpuesto, para trabajar directamente con los tonos adecuados en cuanto a los estándares de las WCAG.
En cuanto a la tipografía, para textos en general, se decidió por la familia “Rounded Mplus 1c”, obtenida desde Google Fonts. Es una tipografía amigable y accesible, mantiene la legibilidad en diversos tamaños y resoluciones, lo que facilita la lectura de textos en diferentes dispositivos.
La tipografía para el logotipo tenía un desafío mayor, necesitábamos decantar por una que refleje la personalidad de Sirviendo Código, y que tuviera coherencia con la marca y el mundo IT, que sugiera innovación pero a la vez simple de leer. Fue así como el cliente se decide por “Tachyon regular”, fuente de Adobe Font. Es una tipografía que transmite innovación y tecnología, que elegimos por su estilo futurista con líneas geométricas, apelando a la personalidad de la comunidad y con la cual el cliente se sintiera identificado.
Por último, nuestra compañera Belen Demafelis fue la encargada de diseñar el símbolo representativo de la marca, el isotipo. Es un elemento gráfico con mayor impacto visual, sin necesidad de leer texto, creando memorabilidad, el cual consolida la identidad. Así se crea el “bot” de Sirviendo Código que, literalmente, porta una bandeja para servir código a la comunidad. La imagen apela a la tecnología y automatización, a la vez que “sirve” código a los compañeros, dentro de este espacio para compartir con otros.
5. Creación del blog
En paralelo al diseño de marca, como hemos comentado, fuimos planteando la estructura del blog y las funcionalidades. Así avanzamos, a la vez con el cliente, en cada vista necesaria para el blog.
Una vez que todas las vistas en baja fidelidad estaban seleccionadas nos pusimos a desarrollarlas en media, y de nuevo dando a elegir al cliente, en este caso entre tres opciones de color diferentes:
Y así con cada vista fuimos evolucionando, para realizar un prototipo que podamos usar en la ejecución de un test de usuario que realizamos para validar las elecciones del cliente y el diseño potencial del blog, con la intención de confirmar la usabilidad y flujo.
Conseguimos un total de 7 participantes finales que respondieron y realizaron las diferentes tareas planteadas. Con ellas comprobamos si el usuario entiende que está en un blog, y si la interacción, para leer los artículos, llegar a la información del autor o ponerse en contacto, es clara y comprensible, y qué elementos llaman más la atención.
Los resultados fueron bastante concluyentes y las respuestas a las preguntas, claras y concisas, con porcentajes de acierto desde 87,5% y varias tareas al 100%. Dejamos link a los resultados e imágenes con interacciones de calor de algunas vistas.
Por último compartimos el Prototipo para interactuar con el diseño propuesto. Si surge alguna sugerencia o comentario, puedes escribirnos directamente a nuestras redes, y así mejoramos nuestras habilidades con el feedback.
6. Conclusión
Sirviendo Código es más que un proyecto de diseño de un blog. Es un proyecto del que estar orgullosas, por el concepto de la marca, del espacio, por el trato que tuvimos con los stakeholders, incluso a pesar de que no se haya desarrollado exactamente cómo diseñamos el blog (algo que siempre puede suceder), hemos aprendido la importancia de la comunicación constante con las personas que desarrollan y con el propio cliente. Y como, también a pesar de los inconvenientes que pueda haber (y que siempre habrá), es un proyecto que está creciendo y es genial ver el desarrollo que está teniendo, porque si un blog ya es interesante, Sirviendo Código es mucho más.
