Projects showcase - Page
One of the most important pages, in the website, is the projects showcase. Which gives the user a insight into what the organization does, meaning it has the need to be a convincing and visually interesting page, to convert possible donors or sponsors.
The plan would be to have a hero area for the seasonal and most important events, to draw the attention, this would be the Christimas, Easter, São João.
The change in the wireframe to this low fidelity prototype was decided after discussing with the Dev team and Project manager about how feasible would it be to add those kinds of features, with a small team of volunteers and a tight schedule. So we had to find a way to work around this challenge, while keeping the idea to still have a seasonal project highlighted and a look into others ongoing or regular.
After more discussions the dev team, now with one more volunteer, was able to work on different features, so we went back to the original idea and thus the high fidelity prototype was made, but with a couple changes. Having the slider being the subhero area for it to highlight the most important projects and have a CTA to draw in more conversions was the most important change.
Volunteer - Page
Another important page is the volunteer offers. A page meant to share what the organization is needing in help, meaning its importance is very high since as a non-profit, volunteers is the only way to have workers, here is the first ideia for it, would look like a job board, with the spots available and a form for applying
The first prototype was meant to show the idea, how the interaction would look, we decided to take off the form and work as a normal job board. That was to make the user feel more familiar with how he could apply, since it function as a job board and to not be redudant since we have a form on the footer as a easy and fast way to contact for doubts or offers.
Then we changed the images to stock imagery for each job searched, the font, images and colors were all from the design system we created and maintened.
Footer Component
In the design system each designer was in charge on creating a diferent component. Mine was the footer. To create it I first decided to understand what made a footer, the result of my research is this first prototype, an idea of what it needs to look like and have: A simple navigation as a safety net, a way to quickly contact the organization.
I then made a design to simplify it, as the navigation on a footer needs to be succinct, and decided to add social media links as the social media of the organization is highly used and needs to be shown, as is one of the most used instruments to attract donors.
The change in the form was also a decision to made it simpler, as its destined to be a form of fast contact, so all those extras were unecessary, a request was made for the footer also show the address, as a form of fast recognition for all types of users even those geographically distant.
The color change was needed as we underwent a whole rebrand middle project, so the design system was remade and the colors for the CTAs and background were changed.
Takeways
Team working, Goal oriented work, Multidisciplinary team
I learned a lot from this project, from what it is to have an actual team with a leader and other designers, seeing the different ways of approaching a problem or a idea.
I learned also very good habits to use when in Figma, such as how to better space using frames and auto layout and how that makes it easier to design and even to deliver to the dev team.
Also my first time with an actual design system, created from scratch with text styles, color styles and a overall style guide.
And it was my first time working with a dev team, and how it can impact the design itself, with different ways of coding of organizing the deliveries
Made by João Victor - 2025
