An Adoption & Grant Making Website
UX & UI Design Project
To start, we first looked at the main users of the website and landed on catering to two personas:
- Wanting to contribute to an adoption
- Seeking financial assistance
With this in mind, we created a very rough wireframe of the home page structure.
As the overall layout of the website begins to take shape, we then begin refining the wireframes into clear blocks.
We experiment with a non-CTA header/hero, and a simplified home page with two main, and two secondary CTAs.
- About the foundation
- Adoption information
- Donation information
*About the foundation is the main home page CTA as page flow guides users to donation or adoption info.
*Donate CTA is visible on all pages via a global header.
We then begin experimenting with low-fidelity design, header treatments, simple branding concepts, and color.
Very rough design - a quick draft to show general styling concept from the wireframes.
We then move into high-fidelity design, as the finishing touches are made on branding, color, and overall site structure. The About CTA moves into the hero image and Donate becomes an outlined button w/ a colored hover-state.
The full site ended up with 22 pages and it took about 10 hours of design and research work to complete.
To reduce the number of entry fields on each page, the donation form was broken into a three step process.
- Select Payment Method
- Enter Contact Details
- Share Your Story (optional)
*Share Your Story entries are shared as
donor testimonials on-site