Creating a website from 0
From research to test
The Brazilian non-profit organization Patinhas que Brilham came to me asking for a website that could translate and propagate their beautiful mission of animals rescue, care and adoption program.
They helped more than 5.000 animals over the last 10 years.
The Brazilian non-profit organization Patinhas que Brilham came to me asking for a website that could translate and propagate their beautiful mission of animals rescue, care and adoption program.
They helped more than 5.000 animals over the last 10 years.
Creating a website
from 0
From research to test
Research
Vanessa, Patinhas Que Brilham's manager gave to me some websites as reference of what she would like to see in their own. I studied the benchmarkings and found some patterns about content organization. I also used GhatGPT to come with ideas for the website sections. Then, I decided to run a Tree Testing with some friends and Patinhas Que Brilham collaborators as a way to start the project and elaborate the information architecture.
Research
Vanessa, Patinhas Que Brilham's manager, gave to me some websites as reference of what she would like to see in their own. I studied the benchmarkings and found some patterns in the organization. I also used GhatGPT to come with ideas for the website sections. Then, I decided to run a Tree Testing with some friends and Patinhas Que Brilham collaborators as a way to start the project and elaborate the information architecture.
Tree testing: how does it work?
Tree testing is a quantitative research where we can see user's preferences for content disposal. It is like asking for someone: "If you would want to buy a bread, in what session of the grocery shop do you think it would be?" and, then, use the user's mental models of organization to display the infos on the website.
Tree testing: how does it work?
Tree testing is a quantitative research where we can see user's preferences for content disposal. It is like asking for someone: "If you would want to buy a bread, in what session of the grocery shop do you think it would be?" and, then, use the user's mental models of organization to display the infos on the website.
The research counted with 32 answers and the instructions were:
"Welcome to this study and thank you for agreeing to participate!
We are Ong Patinhas que Brilham and we are organizing our new website, can you help us? 🐾
The activity should take no more than 5 minutes to complete and your response will help us organize the content of our website. Your participation is very important to us!"
The research counted with 32 answers and the instructions were:
"Welcome to this study and thank you for agreeing to participate!
We are Ong Patinhas que Brilham and we are organizing our new website, can you help us? 🐾
The activity should take no more than 5 minutes to complete and your response will help us organize the content of our website. Your participation is very important to us!"
The research counted with 32 answers and the instructions were:
- Welcome to this study and thank you for agreeing to participate!
We are Ong Patinhas que Brilham and we are organizing our new website, can you help us? 🐾
The activity should take no more than 5 minutes to complete and your response will help us organize the content of our website. Your participation is very important to us!
First question: Within the website, where would you click to find information on how to volunteer?
First question: Within the website, where would you click to find information on how to volunteer?
Start
About us
Adopt
Be part (93%)
Events
Start
About us
Adopt
Be part (93%)
Events
Within our website, where would you go to find out more about the NGO?
Start
About us (96,9%)
Adopt
Be part
Events
Within our website, where would you go to find out more about the NGO?
Start
About us (96,9%)
Adopt
Be part
Events
Within the website, where would you go to find out about the NGO's financial transparency?
Home (3.1%)
About us (87.5%)
Adopt
Be part
Events (9.4%)
Inside the website, where would you click to talk to us?
"Send message" button (12.5%)
“Contact us on WhatsApp" button (43.8%)
"Access our Facebook" button
"Contact" session (40.6%)
"Access our Instagram" button
(Answer not mandatory) Based on the previous questions, did you miss any sections that could exist on the website?
"I think it's important to have a "donate" session, a session with the NGO's positions. Take a look at the requirements on the Selo Doar and Melhores Ongs websites that can help you."
"No. Everything perfect"
"No"
Inside the website, where would you click to talk to us?
"Send message" button (12.5%)
“Contact us on WhatsApp" button (43.8%)
"Access our Facebook" button
"Contact" session (40.6%)
"Access our Instagram" button
(Answer not mandatory) Based on the previous questions, did you miss any sections that could exist on the website?
"I think it's important to have a "donate" session, a session with the NGO's positions. Take a look at the requirements on the Selo Doar and Melhores Ongs websites that can help you."
"No. Everything perfect"
"No"
Information Architecture
Information Architecture
Have done the research, I set an information architecture with what people gave to me, also validating it with the Patinhas Que Brilham staff.
Information Architecture
Have done the research, I set an information architecture with what people gave to me, also validating it with the Patinhas Que Brilham staff.
The website
The website
I did the website on Wix, so my ideation process happened all inside Wix this time. I ideated and iterated together with the Non-profit manager sitting at my side, so we could test with the employees and make adjustments in person.
Time to visit and navigate yourself! Try to access it from a computer, tablet or smartphone, all of them works! 😊
The website
I did the website on Wix, so my ideation process happened all inside Wix this time. I ideated and iterated together with the Non-profit manager sitting at my side, so we could test with the employees and make adjustments in person.
Time to visit and navigate yourself! Try to access it from a computer, tablet or smartphone, all of them works! 😊
Test, validation and quality checking
I also invited 5 friends to navigate in the mobile and desktop version to capture feedbacks about the usability and I also did a double check to see if they were find everything they wanted inside the website. I also worked closely and in person with the Patinhas Que Brilham's manager and stakeholder, Vanessa, once a week for around 2 months during the time I was designing the website to make sure she was liking the result and if I putted all the information needed in the website.
I also navigated throught it a bunch of times to garantee all the pages were working and the buttons were linked to the right places.
Me on the left and Patinhas Que Brilham's staff on the right
Watching a user navigating through the website
Test, validation
and quality checking
I also invited 5 friends to navigate in the mobile and desktop version to capture feedbacks about the usability and I also did a double check to see if they were find everything they wanted inside the website. I also worked closely and in person with the Patinhas Que Brilham's manager and stakeholder, Vanessa, once a week for around 2 months during the time I was designing the website to make sure she was liking the result and if I putted all the information needed in the website.
I also navigated throught it a bunch of times to garantee all the pages were working and the buttons were linked to the right places.
Me on the left and Patinhas Que Brilham's staff on the right
Watching a user navigating through the website
Accessibility
I made the website using Wix, so I made sure the fonts I was using were in a good size to read it, if the colors chosen were making enough contrast with the background, and if all images had a cohesive image description for screen readers.
Accessibility
I made the website using Wix, so I made sure the fonts I was using were in a good size to read it, if the colors chosen were making enough contrast with the background, and if all images had a cohesive image description for screen readers.
Gathering some data
I like to follow how the products I am working on are performing, so I activated the analytics Wix part to track the user's behavior in the website.
AndI have some data to show to you!
335
Visits in the website in the last month
Coming from mostly
organic search
New visitors (98%) x applicants (2%) - last 3 months
Sessions per device -
last 3 months
home
adopt
contact
the most visited pages per session
Most visited pages per session
home - 301visits
adopt - 94 visits
contact - 35 visits
talk to us
most clicked button
Most clicked buttons
Talk to us - 10 (at home)
Instagram - 5 (at home)
Enter in contact do adopt - 4 (at adopt session)
Wix also offers 10 users navigations records for month, and with it I could see where users were navigating and their areas of interest inside the website.
Test, validation and quality checking
I invited 5 friends to navigate in the mobile and desktop version to capture feedbacks about the usability and I also did a double check to see if they were find everything they wanted inside the website. I also worked closely and in person with the Patinhas Que Brilham's manager and stakeholder, Vanessa, once a week for around 2 months during the time I was designing the website to make sure she was liking the result and if I putted all the information needed in the website.
I also navigated throught it a bunch of times to garantee all the pages were working and the buttons were linked to the right places.
Me on the left and Patinhas Que Brilham's staff on the right
Accessibility
I made the website using Wix, so I made sure the fonts I was using were in a good size to read it, if the colors chosen were making enough contrast with the background, and if all images had a cohesive image description for screen readers.
Gathering some data
I like to follow how the products I am working on are performing, so I activated the analytics Wix part to track the user's behavior in the website.
Here I have some data to show to you:
335
Visits in the website in the last month
Coming from mostly
organic search
New visitors (98%) x applicants (2%) - last 3 months
Sessions per device -
last 3 months
Most visited pages per sessions
home - 301visits
adopt - 94 visits
contact - 35 visits
Most clicked buttons
Talk to us - 10 (at home)
Instagram - 5 (at home)
Enter in contact do adopt - 4 (at adopt session)
Wix also offers 10 users navigations records for month, and with it I could see where users were navigating and their areas of interest inside the website.
Constraints I faced and lessons that I learned
Constraints I faced and lessons that I learned
It was my first time designing a full website and also using Wix to do it. It was fun and challenging because Wix has some difficulties to do design and also bugs, so I needed to review the end version a lot of times to make sure it was working.
I felt very grateful to do this project near the non-profit organization manager, because she, as stakeholder, gave me important hints of what they wanted to see. At the other hand,
I did tests with the users, validating what they wanted to see and where inside the website. Now I want to keep tracking the navigation records to see if there is something else on the user experience I can improve.
After the website was on air, I kept tracking the data of it, like number of access and page and buttons clicks. Then, I notice that the website inbox had 16 new messages, all no read. The non-profit team was not entering in the website to read their messages, so I removed the forms to people enter in contact from the contact page and inserted the WhatsApp button, a place that the non-profit is alware everyday to look new messages.
It was my first time designing a full website and also using Wix to do it. It was fun and challenging because Wix has some difficulties to do design and also bugs, so I needed to review the end version a lot of times to make sure it was working.
I felt very grateful to do this project near the non-profit organization manager, because she, as stakeholder, gave me important hints of what they wanted to see. At the other hand,
I did tests with the users, validating what they wanted to see and where inside the website. Now I want to keep tracking the navigation records to see if there is something else on the user experience I can improve.
After the website was on air, I kept tracking the data of it, like number of access and page and buttons clicks. Then, I notice that the website inbox had 16 new messages, all no read. The non-profit team was not entering in the website to read their messages, so I removed the forms to people enter in contact from the contact page and inserted the WhatsApp button, a place that the non-profit is alware everyday to look new messages.
I had a scenario I didn't preview coming right after implementation: medicines can have difficult names to say and write, and the voice search listener doesn't get correctly all the words people are saying.
So, I needed to do a manual treatment and correct the most popular terms people were searching by voice and were not having a return. It is a machine learning that needs training, but that will work well after it.
Original contact page, with the contact form
Original contact page, with the contact form
Original contact page, with the contact form
Modified contact page, with the WhatsApp button
Modified contact page, with the WhatsApp button
Modified contact page, with the WhatsApp button
Thank you! 🙌
Thank you! 🙌
Gathering some data
I like to follow how the products I am working on are performing, so I activated the analytics Wix part to track the user's behavior in the website.
Here I have some data to show to you:
335
Visits in the website
in the last month
Coming from mostly
organic search
New visitors (98%)
x applicants (2%) - last 3 months
Sessions per device -
last 3 months
Most visited pages per sessions
home - 301visits
adopt - 94 visits
contact - 35 visits
Most clicked buttons
Talk to us - 10 (at home)
Instagram - 5 (at home)
Enter in contact do adopt - 4 (at adopt session)
Wix also offers 10 users navigations records for month, and with it I could see where users were navigating and their areas of interest inside the website.
Creating a website
from 0
From research to test
The Brazilian non-profit organization Patinhas que Brilham came to me asking for a website that could translate and propagate their beautiful mission of animals rescue, care and adoption program, having helped more than 5.000 animals over 10 years.