An Adoption & Grant Making Website

UX & UI Design Project 

 
Screen Shot 2018-11-15 at 8.23.26 PM.png
 
 

The Process:

 
 

To start, we first looked at the main users of the website and landed on catering to two personas:


1. Donors

- Wanting to contribute to an adoption

2. Adopters
- Seeking financial assistance


With this in mind, we created a very rough wireframe of the home page structure.

 
Screen Shot 2018-11-13 at 9.09.18 PM.png
 
 
 

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.


Main CTAs:
- About the foundation
- Donate


Secondary CTAs:
- 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.

 
Screen Shot 2018-11-13 at 9.01.27 PM.png
 
 
 

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.

Link to Prototype

 
 
 

Donation Form

 
 

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

 
 
 

Header Designs

 
 
Screen Shot 2018-07-26 at 12.22.59 PM.png
 
 
Screen Shot 2018-07-26 at 10.48.12 AM.png
 
 
 
 
 

From the ground up.

The full process from paper layouts, wireframes, to low and high fidelity design. 

Screen Shot 2018-07-26 at 12.25.13 PM.png