Proyectos / Filadd Review
Un trabajo de rediseño web
En 2024 me enteré de una vacante para trabajar como frontend developer en una startup llamada Filadd. Sería una de las tantas postulaciones que haría ese año, pero esta oportunidad me llamó especialmente la atención: además de requerir las tecnologías en las que yo me especializaba, se trataba de un trabajo con una modalidad híbrida (mitad oficina, mitad home office), algo que me encantaba. El servicio consistía en una plataforma donde estudiantes de varios países podían acceder a exámenes y apuntes de sus carreras universitarias, con beneficios extra disponibles mediante membresías.
Después de mi primera entrevista, quise prepararme bien para el siguiente encuentro y decidí explorar el sitio web de Filadd. Allí, me encontré con varios problemas de diseño y usabilidad que dificultaban la experiencia y debilitaban la imagen de la marca. En la segunda entrevista me fue bien, pero más adelante me informaron que habían cancelado la búsqueda de personal y que estarían en contacto por futuras oportunidades. En ese momento, decidí tirarme a la pileta: rediseñar la página de inicio de Filadd, mostrando cómo podía aportar valor, para que realmente me tuvieran en cuenta para esas “futuras oportunidades”.
Problemas identificados
El sitio tenía un buen punto de partida, con un hero claro que comunicaba que podías encontrar “apuntes, exámenes y clases virtuales de tu carrera”. Sin embargo, la estructura general y el copywriting presentaban problemas importantes: por un lado, se fallaba en aplicar principios básicos del diseño web (balance, alineación, repetición, etc.), y por el otro, no había suficiente claridad conceptual para entender cómo funcionaba la plataforma realmente.
Header
Un header sin enlaces a las páginas internas, y con la opción de “Subir Archivos” disponible sin haberse iniciado una sesión.
Hero
Un hero que respondía muy bien a las preguntas “qué hacemos” y “cómo ayudamos”, pero que era demasiado pequeño en altura y con gráficos corporativos que daban un aspecto genérico y poco inspirado.
Buscador de Apuntes
Un buscador de apuntes con una funcionalidad excelente, pero con una UI muy mejorable. En los ítems de una lista, si no se cuenta con imágenes, no se justifica el uso de tarjetas. Además, hay que tener cuidado con la cantidad de ítems a mostrar para evitar una repetición excesiva (es mejor tener las opciones de “mostrar más y “mostrar menos” mediante un botón). Un detalle para más adelante: aquí tenemos la opción de elegir el país donde queremos realizar la búsqueda.
Estadísticas
Esta sección aportaba algo de valor, pero no era suficiente: aún faltaba explicar cómo funciona la plataforma en sí.
La Academia
La Academia era un beneficio al que se podía acceder mediante una membresía. Estaba bien informarlo, pero hacerlo aquí con tanta importancia cortaba un poco con la narrativa si aún no se había explicado cómo funcionaba la plataforma: uno podría creer que el servicio era sinónimo de “cursos online”. Nuevamente, aparece aquí la opción de elegir el país.
Filadd Profesional
La promoción de un servicio para profesionales que no está mal, pero que al no ser la última sección también interrumpía el relato.
Reseñas
Una sección de testimonios mal ubicada y con muy poco cariño.
Footer
Un footer que tampoco incluía links, salvo a la página Nosotros. Recién a partir de esa página se podía acceder a otras como Blog y Preguntas Frecuentes, pero también a través de sus respectivo footer. Una búsqueda del tesoro, más o menos.
Header
Un header sin enlaces a las páginas internas, y con la opción de “Subir Archivos” disponible sin haberse iniciado una sesión.
Hero
Un hero que respondía muy bien a las preguntas “qué hacemos” y “cómo ayudamos”, pero que era demasiado pequeño en altura y con gráficos corporativos que daban un aspecto genérico y poco inspirado.
Buscador de Apuntes
Un buscador de apuntes con una funcionalidad excelente, pero con una UI muy mejorable. En los ítems de una lista, si no se cuenta con imágenes, no se justifica el uso de tarjetas. Además, hay que tener cuidado con la cantidad de ítems a mostrar para evitar una repetición excesiva (es mejor tener las opciones de “mostrar más y “mostrar menos” mediante un botón). Un detalle para más adelante: aquí tenemos la opción de elegir el país donde queremos realizar la búsqueda.
Estadísticas
Esta sección aportaba algo de valor, pero no era suficiente: aún faltaba explicar cómo funciona la plataforma en sí.
La Academia
La Academia era un beneficio al que se podía acceder mediante una membresía. Estaba bien informarlo, pero hacerlo aquí con tanta importancia cortaba un poco con la narrativa si aún no se había explicado cómo funcionaba la plataforma: uno podría creer que el servicio era sinónimo de “cursos online”. Nuevamente, aparece aquí la opción de elegir el país.
Filadd Profesional
La promoción de un servicio para profesionales que no está mal, pero que al no ser la última sección también interrumpía el relato.
Reseñas
Una sección de testimonios mal ubicada y con muy poco cariño.
Footer
Un footer que tampoco incluía links, salvo a la página Nosotros. Recién a partir de esa página se podía acceder a otras como Blog y Preguntas Frecuentes, pero también a través de sus respectivo footer. Una búsqueda del tesoro, más o menos.
Diseño general
Por último, había diferencias significativas de estilo entre páginas. Algunas de ellas, como la de Preguntas Frecuentes, estaban creadas directamente como páginas publicadas de Notion. Esta falta de coherencia e integración visual afectaba directamente la imagen de la marca, dando una sensación de improvisación y, por lo tanto, de poca profesionalidad.
Diseño general
Por último, había diferencias significativas de estilo entre páginas. Algunas de ellas, como la de Preguntas Frecuentes, estaban creadas directamente como páginas publicadas de Notion. Esta falta de coherencia e integración visual afectaba directamente la imagen de la marca, dando una sensación de improvisación y, por lo tanto, de poca profesionalidad.
Una nueva narrativa
Mi objetivo fue crear una página de inicio que guiara a los usuarios a través de un relato claro y persuasivo, desde entender qué es Filadd hasta convertirlos en usuarios activos. Todas las secciones preparan a la persona para que llegue a un CTA final diseñado para maximizar la conversión: un formulario que permite crear rápidamente una cuenta, sin tener que ir a ningún menú, modal ni página diferente.
Header
Un header que incluye links a todas las páginas relevantes. La selección del país se realiza una sola vez y de forma global.
Hero
Un hero más limpio y sin dibujos que le da una mayor vigencia a la página. Cuenta con más altura que el original, pero sin exagerar para seguir mostrando en el viewport una buena porción de la sección siguiente.
Buscador de Apuntes
Dar una funcionalidad como esta ni bien se accede al sitio es el mayor acierto del diseño original. Ahora, el buscador simplemente pasa a ser más intuitivo y elegante. Luego profundizaré en los detalles de este componente (el espacio en este layout me quedó un poco chico).
Estadísticas
Incorporé algunos datos que encontré en la página Nosotros. Este es, sin duda, el lugar indicado para que aporten valor a la propuesta.
Explicación paso a paso
Consolidé aquí la información que pude encontrar dispersa en las distintas páginas (algunas de ellas, accesibles solo después de haberme registrado). Se trataban de aspectos fundamentales del servicio, por lo que era importante agruparlos en un único espacio claro y accesible.
Las fotografías son muy importantes en toda página web, y este es el lugar indicado para tenerlas. Incluí fotos de stock únicamente como referencia: lo ideal es siempre contar con un material propio alineado a la imagen de marca que se quiere lograr.
La Academia
La Academia no tiene una sección exclusiva, sino que se menciona como parte de “los pasos a seguir”, dejando en claro que el servicio no se trata exclusivamente de cursos online.
Reseñas
Era muy importante que los testimonios aparezcan directamente luego de la sección sobre cómo funciona Filadd para darle legitimidad a la misma. Reuní aquí los comentarios que pude encontrar en las distintas páginas y los completé un poco artificialmente con fines ilustrativos.
CTA
Ahora sí, la sección más importante: toda la estructura de la página está diseñada para dirigir a los usuarios hacia este formulario de conversión. La mayoría de las conversiones suelen ocurrir después de leer comentarios, así que este es el lugar óptimo.
Filadd Profesional
No me convenció del todo mantener esta sección. Me explico: imagina que llegas al footer y la página termina, ¿ok? Si vuelves hacia arriba y lo primero que ves es el formulario de registro nuevamente, todavía estarías tentado a completarlo; pero esta sección dispersa un poco al usuario e interrumpe ese flujo favorable para la conversión. En fin, un candidato ideal para hacer un test A/B.
Footer
El footer incluye los mismos enlaces que el header para facilitar la navegación sin necesidad de scrollear hacia arriba. También incorpora accesos a la información legal y muestra los datos de contacto de forma directa.
Header
Un header que incluye links a todas las páginas relevantes. La selección del país se realiza una sola vez y de forma global.
Hero
Un hero más limpio y sin dibujos que le da una mayor vigencia a la página. Cuenta con más altura que el original, pero sin exagerar para seguir mostrando en el viewport una buena porción de la sección siguiente.
Buscador de Apuntes
Dar una funcionalidad como esta ni bien se accede al sitio es el mayor acierto del diseño original. Ahora, el buscador simplemente pasa a ser más intuitivo y elegante. Luego profundizaré en los detalles de este componente (el espacio en este layout me quedó un poco chico).
Estadísticas
Incorporé algunos datos que encontré en la página Nosotros. Este es, sin duda, el lugar indicado para que aporten valor a la propuesta.
Explicación paso a paso
Consolidé aquí la información que pude encontrar dispersa en las distintas páginas (algunas de ellas, accesibles solo después de haberme registrado). Se trataban de aspectos fundamentales del servicio, por lo que era importante agruparlos en un único espacio claro y accesible.
Las fotografías son muy importantes en toda página web, y este es el lugar indicado para tenerlas. Incluí fotos de stock únicamente como referencia: lo ideal es siempre contar con un material propio alineado a la imagen de marca que se quiere lograr.
La Academia
La Academia no tiene una sección exclusiva, sino que se menciona como parte de “los pasos a seguir”, dejando en claro que el servicio no se trata exclusivamente de cursos online.
Reseñas
Era muy importante que los testimonios aparezcan directamente luego de la sección sobre cómo funciona Filadd para darle legitimidad a la misma. Reuní aquí los comentarios que pude encontrar en las distintas páginas y los completé un poco artificialmente con fines ilustrativos.
CTA
Ahora sí, la sección más importante: toda la estructura de la página está diseñada para dirigir a los usuarios hacia este formulario de conversión. La mayoría de las conversiones suelen ocurrir después de leer comentarios, así que este es el lugar óptimo.
Filadd Profesional
No me convenció del todo mantener esta sección. Me explico: imagina que llegas al footer y la página termina, ¿ok? Si vuelves hacia arriba y lo primero que ves es el formulario de registro nuevamente, todavía estarías tentado a completarlo; pero esta sección dispersa un poco al usuario e interrumpe ese flujo favorable para la conversión. En fin, un candidato ideal para hacer un test A/B.
Footer
El footer incluye los mismos enlaces que el header para facilitar la navegación sin necesidad de scrollear hacia arriba. También incorpora accesos a la información legal y muestra los datos de contacto de forma directa.
Diseño general
Claramente, no rediseñé todas las páginas, pero mantener los mismos header y footer, junto con una línea de diseño coherente, sería más que suficiente para comenzar. Esto ayudaría a proyectar un servicio más sólido y profesional, dando mayor confianza para pagar por una membresía.
Diseño general
Claramente, no rediseñé todas las páginas, pero mantener los mismos header y footer, junto con una línea de diseño coherente, sería más que suficiente para comenzar. Esto ayudaría a proyectar un servicio más sólido y profesional, dando mayor confianza para pagar por una membresía.
El Buscador
Un contador de pasos añade dinamismo y claridad al proceso de búsqueda. Además, permite retroceder en cualquier momento haciendo click en los íconos. El título cambia dinámicamente, guiando al usuario con un tono informal y amigable.
Lo más intuitivo es incluir un ejemplo de búsqueda directamente en el placeholder. Elegí una universidad del interior de Argetina para resaltar cuán profunda puede ser la búsqueda. Para la lista que se da por defecto, opté por un orden ponderado en lugar de alfabético: las universidades más importantes o más buscadas aparecen primero. También se podría tener en cuenta la ubicación del usuario para personalizar ese orden.
La lista de ítems tiene un aspecto más cuidado, con una animación suave al transicionar y sin recurrir a tarjetas. Se muestran menos ítems desde el principio, dejando el resto accesible mediante un botón “Ver todo” que amplía la lista. También incluí un breadcrumb para mejorar la navegación. En algún momento implementé una flecha hacia atrás para retroceder y luego la eliminé. Pero ahora que lo vuelvo a pensar, no parece una mala idea...
¿El resultado?
Al final, Filadd me felicitó por el diseño y las mejoras que había propuesto. Me dijeron, una vez más, que me tendrían en cuenta para futuras oportunidades… ¡Hey! Si fuera por mí, esta reseña no terminaría de esta forma. Pero mira el lado bueno: yo tengo un lindo proyecto para mostrar en mi portafolio y tú llegaste hasta el final de estas líneas. ¡Hola!