I designed the Climate change website for the second Google UX Design Course project. Climate change has had massive effects across the globe. Currently, the earth is heating at a rapid pace. This has caused several parts of the world to experience weather they have not before and can change ecosystems and cause mass migrations on a scale we have not yet seen. Climate change is something that many young people are concerned about. I wanted to create a website where users can go and donate to a climate change cause they are most passionate about. I was more comfortable with this project since it was also a web design project. As someone passionate about climate change, I found this website to be a rewarding experience to design for.
Users want a website to inform them about different climate change initiatives and learn about them. They also want to donate to a cause they are passionate about. Some users want to make their donations recurring so they don't need to remember to return to the site and donate again.
Create a website so users can easily find information about donating to a climate change initiative and find the donation flow easy to use.
Going into this climate change project, I wanted to see what I could do to make the world better for our future. Climate change is always on my mind as it affects people from all over the world. During my research, I found that people have different reasons to give their money to charities that help with climate change. It can be pushing for better green energy initiatives or ensuring our oceans stay clean. I wanted to create a site that would offer users the choice of what ambition they can put their money towards. I also intend to make the donation process easy with different payment methods and a way to make a recurring donation.
My research on climate change donation sites was broader. I created a persona of a person who wants to learn about and donate to climate change causes that are personal to them. This research included what kind of check-out process the user needed and what information and call to action they required on the website.
My wireframes for the climate change site were more manageable for me to design. Coming from a web design background at my current job, I knew what placement I wanted for my headers, navigation, and main content. However, this time around, for my flow, I want to sink my teeth a bit more into Figma's prototyping features. I wanted to create an overlay so users dont need to leave the page when they want to donate. The overlay feature in Figma was beneficial for both my wireframing and prototyping needs.
1: No way to move back to the previous screen
2: No easy way to leave the confirmation page
As with the arcade app I designed, I struggled with the colors for the climate change app. Ultimately, I decided on blue as a calming color for users to see when they visit the website. As for the buttons, since I went with an overlay view for the main flow and a white background, I went with a dark blue color. I wanted interactions, and the buttons needed to change color when the user hovered over them in the design. Interactions like this are widespread throughout the web.
During the testing phase of the Hi-Fi Climate Change Website, user feedback was overwhelmingly positive. Users appreciated the intuitive flow, the pleasing use of colors, and the thoughtful layout. They found the donation process straightforward and flexible, allowing them to exit at any point if they changed their mind. This positive user experience validated the website's design and functionality effectiveness.
Creating a website always has its challenges. During the design process, I wanted to determine what users wanted from an easy checkout process while also trying to make the design consistent and easy to follow. Since this is a donation site, I also wanted to ensure users had content to read and make an informed choice when choosing a different cause to donate to. One key point I learned is that navigation is essential. I needed to make navigation elements more noticeable on the page. My user feedback reflected this when testing the wireframes. There were multiple ideas in my head when trying to make this work. In the end, the user feedback reinforced my confidence in the design choices I chose for the website.
