To learn how to use Adobe XD, and as part of my UX Design certification course, I chose the design prompt of creating a [hypothetical] charity website for the most endangered sea mammal in the world - the vaquita. Despite the fact that this charity isn't real, I wanted this project to raise awareness of the vaquita's struggle as well as the efforts being made to save the species.
---
As I went through the design process, I focused mainly on the design of the desktop format - but I did complete a couple of low fidelity wireframes for a mobile version as well.
I started with five paper wireframes for the homepage and then highlighted which areas I liked best for, not just the homepage, but also other pages as well as the mobile version.
The areas outlined in orange are the areas I kept in mind going forward.
From there, I refined the ideas for both the desktop webpage as well as the mobile version.
These became the main ideas for the setup of each version’s homepage moving into designing the digital wireframes.
---
---
Once I had the low-fidelity digital wireframes put together, I started to map out the user flow.
---
Before I could start on the high fidelity prototype, I wanted to create a logo for this charity group as well as a simple graphic of the vaquita for the homepage. There aren't many reference photos of the vaquita because it is such a rare and elusive species.
For reference, I relied on a piece created by Frédérique Lucas (found on Porpoise.org) so I could make sure to produce an accurate representation the animal.
---
Using Adobe Illustrator, I created the full body vaquita graphic for the homepage as well as both the main logo image and mini logo image I was planning to use throughout the website design.
---
---
I used the graphic in other areas throughout the website - such as for the donation button as well as the donation confirmation page.
---
---
From there, all I had left to do was add the supporting text and pictures. I wanted to provide some basic information on the vaquita along with links to where people can learn more.
---
---
After creating the interactions and linking everything together, the project was done!
It was so exciting to see it all come together~
---
You can explore both prototypes below:
---
Please see the source info at the bottom of this page for the photos used in this project.
---
Additional Sources for Photos Used:
---
---
View other case studies from my UX Design certification course: