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
After the first meeting, the team really had many, many ideas to bring to the new website, so it was necessary to prioritize and organize the most viable ones.
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. It took me some time to update the passwords and finally transfer the domain.
Development
Now with the access passwords and the approved layout, i moved on to developing the website. I needed to understand and apply techniques such as Pixel Perfect and Responsive Development to bring the bests results.
The website should also be Mobile first because the experience on the cell phone different from the previous website had to be stunning.
To facilitate international donations, we realized that it would be very important to create the website in Portuguese and English. Therefore, I made the English version and before final delivery, I asked an English teacher for a general review.
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
Receiving donations from other countries is not something that is easy to apply in a website. It took a lot of study time to make this work.
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 | 2024 © All rights reserved.
