Projects / Filadd Review
A web redesign job
In 2024, I learned about an opening for a frontend developer at a startup called Filadd. It would be one of many applications I would make that year, but this opportunity particularly caught my attention: in addition to requiring the technologies I specialized in, it offered a hybrid work model (half office, half home office), which I loved. The service consisted of a platform where students from various countries could access exams and notes from their university courses, with extra benefits available through memberships.
After my first interview, I wanted to prepare well for the next meeting and decided to explore Filadd's website. There, I found several design and usability problems that hindered the experience and weakened the brand's image. I did well in the second interview, but later I was informed that they had canceled the search for staff and would be in touch about future opportunities. At that point, I decided to take a leap: redesign Filadd's homepage, showing how I could add value, so that they would really consider me for those “future opportunities”.
Identified problems
The site had a good starting point, with a clear hero that communicated you could find “notes, exams, and virtual classes for your career”. However, the overall structure and copywriting had significant problems: on one hand, it failed to apply basic web design principles (balance, alignment, repetition, etc.), and on the other, there was insufficient conceptual clarity to understand how the platform actually worked.
Header
A header without links to internal pages, and the option to “Upload Files” available without being logged in.
Hero
A hero that answered the questions “what do we do” and “how do we help”, but it was too small in height and had corporate graphics that gave it a generic, uninspired look.
Notes Search
A notes search with excellent functionality, but with a very improvable UI. In list items, if there are no images, there’s no justification for using cards. Also, care must be taken with the number of items displayed to avoid excessive repetition (it’s better to have the options to “show more” and “show less” through a button). A detail for later: here we have the option to choose the country where we want to search.
Statistics
This section provided some value, but it wasn't enough: it still lacked an explanation of how the platform actually worked.
La Academia
La Academia was a benefit accessible through a membership. It was good to inform about it, but presenting it here with so much emphasis interrupted the narrative since it hadn't been explained yet how the platform worked: one could assume that the service was synonymous with “online courses”. Again, the option to choose the country appears here.
Filadd Profesional
The promotion of a service for professionals was fine, but since it wasn’t the last section, it also interrupted the narrative.
Testimonials
A poorly placed testimonial section with very little care.
Footer
A footer that didn’t include links, except to the About Us page. Only from there could you access other pages like Blog and FAQ, but also through their respective footers. A treasure hunt, more or less.
Header
A header without links to internal pages, and the option to “Upload Files” available without being logged in.
Hero
A hero that answered the questions “what do we do” and “how do we help”, but it was too small in height and had corporate graphics that gave it a generic, uninspired look.
Notes Search
A notes search with excellent functionality, but with a very improvable UI. In list items, if there are no images, there’s no justification for using cards. Also, care must be taken with the number of items displayed to avoid excessive repetition (it’s better to have the options to “show more” and “show less” through a button). A detail for later: here we have the option to choose the country where we want to search.
Statistics
This section provided some value, but it wasn't enough: it still lacked an explanation of how the platform actually worked.
La Academia
La Academia was a benefit accessible through a membership. It was good to inform about it, but presenting it here with so much emphasis interrupted the narrative since it hadn't been explained yet how the platform worked: one could assume that the service was synonymous with “online courses”. Again, the option to choose the country appears here.
Filadd Profesional
The promotion of a service for professionals was fine, but since it wasn’t the last section, it also interrupted the narrative.
Testimonials
A poorly placed testimonial section with very little care.
Footer
A footer that didn’t include links, except to the About Us page. Only from there could you access other pages like Blog and FAQ, but also through their respective footers. A treasure hunt, more or less.
General design
Finally, there were significant style differences between pages. Some, like the FAQ page, were created directly as published Notion pages. This lack of visual coherence and integration directly affected the brand’s image, giving a sense of improvisation and, therefore, a lack of professionalism.
General design
Finally, there were significant style differences between pages. Some, like the FAQ page, were created directly as published Notion pages. This lack of visual coherence and integration directly affected the brand’s image, giving a sense of improvisation and, therefore, a lack of professionalism.
A new narrative
My goal was to create a homepage that guided users through a clear and persuasive story, from understanding what Filadd is to converting them into active users. All the sections prepare the person to reach a final CTA designed to maximize conversion: a form that allows them to quickly create an account, without having to go to any menu, modal, or different page.
Header
A header that includes links to all relevant pages. The country selection is done once and globally.
Hero
A cleaner hero without drawings that increases the page longevity. It has more height than the original, but not too much, to still show a good portion of the next section in the viewport.
Notes Search
Providing such a functionality right when accessing the site was the greatest success of the original design. Now, the search simply becomes more intuitive and elegant. I'll go into more details about this component later (the space in this layout is a bit tight).
Statistics
I added some data I found on the About Us page. This is undoubtedly the right place for them to add value to the proposal.
Step-by-step explanation
I consolidated here the information I found scattered across the various pages (some of which were only accessible after registering). These were fundamental aspects of the service, so it was important to group them into a single, clear, and accessible space.
Photographs are very important on any website, and this is the right place to have them. I only included stock photos as references: ideally, you should always have your own material aligned with the brand image you want to achieve.
La Academia
La Academia doesn't have its own section but is mentioned as part of the “steps to follow”, clarifying that the service is not exclusively about online courses.
Testimonials
It was very important that the testimonials appear directly after the section explaining how Filadd works to give legitimacy to it. I gathered the comments I could find from the various pages and artificially completed them for illustrative purposes.
CTA
Now, the most important section: the entire page structure is designed to direct users toward this conversion form. Most conversions tend to occur after reading testimonials, so this is the right place.
Filadd Profesional
I wasn’t fully convinced to keep this section. Let me explain: imagine you reach the footer, and the page ends, okay? If you go back up and the first thing you see is the registration form again, you’d still be tempted to fill it out; but this section distracts the user a bit and interrupts the favorable conversion flow. In short, an ideal candidate for an A/B test.
Footer
The footer includes the same links as the header to facilitate navigation without needing to scroll up. It also incorporates links to legal information and displays contact details directly.
Header
A header that includes links to all relevant pages. The country selection is done once and globally.
Hero
A cleaner hero without drawings that increases the page longevity. It has more height than the original, but not too much, to still show a good portion of the next section in the viewport.
Notes Search
Providing such a functionality right when accessing the site was the greatest success of the original design. Now, the search simply becomes more intuitive and elegant. I'll go into more details about this component later (the space in this layout is a bit tight).
Statistics
I added some data I found on the About Us page. This is undoubtedly the right place for them to add value to the proposal.
Step-by-step explanation
I consolidated here the information I found scattered across the various pages (some of which were only accessible after registering). These were fundamental aspects of the service, so it was important to group them into a single, clear, and accessible space.
Photographs are very important on any website, and this is the right place to have them. I only included stock photos as references: ideally, you should always have your own material aligned with the brand image you want to achieve.
La Academia
La Academia doesn't have its own section but is mentioned as part of the “steps to follow”, clarifying that the service is not exclusively about online courses.
Testimonials
It was very important that the testimonials appear directly after the section explaining how Filadd works to give legitimacy to it. I gathered the comments I could find from the various pages and artificially completed them for illustrative purposes.
CTA
Now, the most important section: the entire page structure is designed to direct users toward this conversion form. Most conversions tend to occur after reading testimonials, so this is the right place.
Filadd Profesional
I wasn’t fully convinced to keep this section. Let me explain: imagine you reach the footer, and the page ends, okay? If you go back up and the first thing you see is the registration form again, you’d still be tempted to fill it out; but this section distracts the user a bit and interrupts the favorable conversion flow. In short, an ideal candidate for an A/B test.
Footer
The footer includes the same links as the header to facilitate navigation without needing to scroll up. It also incorporates links to legal information and displays contact details directly.
General design
Clearly, I didn't redesign all the pages, but maintaining the new header and footer, along with a coherent design line, would be more than enough to start. This would help project a more solid and professional service, giving more confidence to pay for a membership.
General design
Clearly, I didn't redesign all the pages, but maintaining the new header and footer, along with a coherent design line, would be more than enough to start. This would help project a more solid and professional service, giving more confidence to pay for a membership.
The Search Engine
A step counter adds dynamism and clarity to the search process. It also allows users to go back at any time by clicking on the icons. The title changes dynamically, guiding the user with a casual and friendly tone.
The most intuitive approach is to include a search example directly in the placeholder. I chose a university from inland Argentina to highlight how deep the search can be. For the default list, I opted for a weighted order rather than alphabetical: the most important or most searched universities appear first. It could also consider the user's location to personalize that order.
The item list looks more polished, with a smooth animation when transitioning and without resorting to cards. Fewer items are displayed initially, leaving the rest accessible through a “See all” button that expands the list. I also included a breadcrumb to improve navigation. At one point, I implemented a back arrow to go back but later removed it. However, now that I think about it, it doesn’t seem like a bad idea...
The result?
In the end, Filadd congratulated me on the design and improvements I had proposed. They told me once again that they would keep me in mind for future opportunities... Hey! If it were up to me, this review wouldn’t end like this. But look on the bright side: I have a nice project to show in my portfolio, and you made it all the way through these lines. Hello!