An Adoption & Grant Making Website

UX & UI Design Project 

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

The Kailey Hope Foundation was founded for two reasons:

1. Offer grants to prospective adoptee couples to support their adoption journey
2. Provide a place where donors can give donations to help fund an adoption


The Process:


To start, we first looked at the main users of the website and landed on 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