2022 – Web design and dev
Improving the
digital sponsorship
experience
2022 – Web design and dev
Improving
the digital sponsorship experience
My Role
UX/ UI – Research, Visual design,
Interaction design, Web developer
Team
Daniela Álvares (Reconstruir manager)
Saimon Dias (Reconstruir Director)
Timeline
2 months, launched in February 2022
Overview
See it live at projetoreconstruir.org.br.
Projeto Reconstruir is a Nonprofit Social Organization that assisting 75 children and adolescents from the Community “Morro das Pedras” in Belo Horizonte, since 2005. I volunteered to modernize and improve the experience on the institution’s website and I had the honor of them accepting.
Problem statement
The institution’s website had been built in an old platform, was very unstable, had a lot of important information hidden and its appearance was not interesting or professional.
Main Goals
Enhance experience with intuitive navigation and stunning interactions on web and mobile
Modernize the design of the institution’s website representing their identity and values
Integrating new modern features to elevate the platform’s capabilities
Facilitate the learning curve for those who access the website for the first time
Research & analysis
First meeting
In this meeting we collected more insights and aligned what else would be interesting to include in this first version of the website.
Prioritization
The team really had a lot of improvement ideas to apply to the new website, so it was necessary to prioritize and organize the most viable ones to implement in the first version.
Must have
• Mobile-first
• Fixed and highlighted donation button at the top
• Plugin that allows international donations
• Cookie plugin for GDPR & CCPA
Could have
• Contact Form Plugin
• Newsletters
• Testimonies from sponsors and children’s family
• Custom monthly campaign banners
Won’t have
• Waiting list for parents who want their children in the project
• Featured social networks at the top
Moodboard and styleguide
I built a moodboard of references, including the main assets such as colors, fonts, logo and other elements in a styleguide to facilitate quick access and speed up the construction of the website layout.
Ideation process
After collecting references from websites that the team already liked, I aligned them with the moodboard, and built the hi-fi layout of just the first 2 sessions (mob and web) to facilitate the presentation of ideas and the approval process.
Second meeting
At the second meeting, after the presentation the layout was approved. Did they give some feedbacks about that points:
What is the important information to highlight when talking about the project
Do not highlight big numbers
Adjust some details about the project in the layout
Bringing a photo of a child from the project highlighted in the main banner
Challenge: transferring the domain
A challenge arose at this stage: transferring the domain from the old website to the new hosting service, however, the passwords were not working.
Everything went well, but it took me some time to update the passwords before starting the implementation.
Development
🟢 With access passwords and the approved layout, I moved on to developing the website. I applied Pixel Perfect and Responsive Development techniques to ensure the best results.
🟢 Since the mobile experience needed to be significantly improved compared to the previous website, I adopted a Mobile-First approach.
🟢 To facilitate international donations, I created the website in both Portuguese and English. Before the final delivery, I had the English version reviewed by an English teacher.
The new website
With animations and online! 😁
Learnings & opinions
About the easy way
We usually want to take the easy way out. But it was interesting to learn a new tool to develop this website. This gave me more authority over my opinions in front of the team.
Default is a temptation
Using “default” when configuring plugins is tempting, however, there are rules that need to be configured in a custom way to obtain the best final results.
Words and terms
Carrying out voluntary work for a social project requires great care with the words and terms used. Everyone should have this experience at some point in their career.
Schedule meetings
Scheduling alignment meetings in advance helps you visualize deadlines and keep them up to date.
Request access
Requesting all access at the beginning is very important, as it helps you visualize the challenges you will face in other stages of the project.
About donations
Implementing the feature to receive donations from other countries is not an easy task. It took more time but the end result was worth the effort.
Volunteer work continues
The volunteer work it’s not over, i continue to take care of the website and provide maintenance whenever requested. 😁
Designed by Marcus Martins | 2025 © All rights reserved.