Overview
All God's Children is a ministry focused on orphan care that operates globally and was established in 1991. Their services include both domestic and international adoption options.
Our belief is that we can assist users in quickly locating relevant information on the All God’s Children website by providing an information architecture that is more intuitive, with simple layouts and navigation.
Problem: Users who visit allgodschildren.org find it distracting and at times confusing to navigate through.
Solution: To revamp the allgodschildren.org website in order to facilitate users in finding relevant information more efficiently. This can be achieved through the implementation of an intuitive information architecture, featuring uncomplicated layouts and navigation.
UX/UI Designer
My Role
Figma, Miro, InVision, JigJam, Zoom, Adobe Illustrator, Slack and otter.ai
Tools
Kimberlyn Donnelly, Jobey Wright, Ozlem Cakmak, Sara Slick & Myself
Team
Methodology:
Our primary objective was to address the following inquiries:
1. Who is the target audience of the website?
2. What is the main objective of the homepage?
3. What is the agency's mission statement?
To address this project, we employed the subsequent methodology:
User Research
Definition & Ideation
Prototyping
Testing & Iteration
Our research began by closely examining the services provided by All God's Children International in order to identify potential areas for improvement in their user flow. After identifying tasks that were of high priority to both the user and the agency, we recognized the significant role played by the bright red "Donate" button, which was prominently displayed on most screens.
Site Analysis
User Research
“You can make a difference by giving to vulnerable children and families through All God’s Children International!”
-All God’s Children International Donation
During the site analysis we found the potential answers to the three questions we determined during the methodology phase.
1. Users: Prospective Adoptive Parents & Donators
2. Purpose: To provide donation options
3. Mission: To provide the love and care that every child deserves
Heuristic Evaluation
To assess the user-friendliness of the site, we conducted a heuristic evaluation and marked areas for improvement with red line annotations. Our evaluation covered not only the homepage, but also three additional pages.
We proceeded to conduct an AA compliance test on the color palette utilized throughout the site to ensure that it adhered to accessibility standards. Following the analysis, we identified certain accessibility concerns that necessitated the development of a revised style guide.
User Interviews
Ideal User
The ideal participants for our research would be couples or individuals that are interested in adoption, or donating to an adoption agency.
Research Goals
We set three main research objectives, to narrow down and identify the factors that motivates users to be physically active:
1. The steps users would take when considering adoption
2. How someone decides the nonprofit they will donate to
3. What motivates someone to donate
Survey
To add to our user interviews, we conduction an initial survey. We prepared a questionnaire and sent it out to our target demographic via social media. Our goal was to understand the thoughts and actions of those looking to donate to an adoption agency, and identify pain points and needs in regards to donating to a non-profit. 81 people respond to our survey and these are our key findings:
Survey - Key Findings
81 Responses
93% - Know what a non-profit is
50% - Are highly likely to donate to a non-profit
20% - Are highly likely to donate to an adoption non-profit
80% - Know someone that is adopted
Persona
In order to gain a better understanding of our users' requirements, we developed a persona, which enabled us to identify and address the common pain points experienced by our users.
Subsequently, we formulated a user scenario to ascertain the process by which the Anderson family would navigate and leverage the website.
-
The Andersons want to expand their family. Having children was always apart of their dream life. They wanted to prioritize traveling, being financially stable and spend time together before trying. Now they are ready for a son/daughter.
-
After years of trying to get pregnant, with no success, a close family friend refers The Anderson family to, “All Gods Children” over a dinner party the Andersons had planned. They would end up looking up the website and got excited about the prospect that maybe this is what was destiny. They schedule an appointment to speak with someone at the agency and then they are so touched by the children's stories they decide to make a donation to All Gods Children.
User Path
1. The bright red donate button makes it noticeable and simple to find, but the color is not aesthetic.
2. The donate page is text heavy and confusing.
3. Many boxes to fill out and over complicated to make a donation.
Definition & Ideation
Next, we transitioned into the ideation phase, during which we utilized strategic and creative methods to devise various redesign concepts.
Storyboard
To empathize with our user ‘The Andersons’ better we created a storyboard. The storyboard helped us to define their user journey and getting to know them better.
Value-Proposition
A Value Proposition Canvas was used for the positioning of All God's Children's website and services around their users' values and needs.
Card Sorting
We conducted a card sorting exercise to assess the current sitemap, enabling us to visually manipulate site information and identify areas for improvement.
After analyzing the feedback and completing the card sorting exercise, we developed a new information architecture with the aim of enhancing navigation and minimizing clutter.
This is our final sitemap:
Prototyping
After reviewing the outcomes of the ideation and definition process, we established a list of prioritized features. To begin this process, we crafted a user flow:
Low Fidelity Sketches
Keeping our users and their pain points in mind, we started the prototyping process by sketching on paper. We then performed preliminary user testing by importing the sketches into Figma and created hot spots.
Mid-Fidelity Wireframes
Following the completion of the sketches, we utilized Figma to produce mid-fidelity wireframes. To ensure that the design was user-friendly, intuitive, and effective, we conducted multiple usability tests.
Here is a user flow that presents recommendations to review:
Mobile
Desktop
Testing & Iterating
We performed one-on-one usability testing online for our mid-fi prototype, to get valuable feedback on our design. This pointed out areas of opportunities for improvement, some pain points and confirmed some of our decision choices. We assigned 3 tasks for our users to complete:
1. Make a donation
Success Rate: 95%
2. Fill out the pre-app adoption form
Success Rate: 95%
3. Sponsor a child
Success Rate: 80%
Iterations
Two of the navigation icons were confusing and not intuitive.
Users were not sure if their donation was a success or not, so we added an overlay to let user know their donation went through.
According to the results of the A/B test we conducted, with the splash-screen and logo featuring the orange background emerged as the clear winner, as 90% of the users tested preferred it. Users provided feedback stating that this color choice was easier on the eyes.
A/B TESTING
10% preferred the red splash-screen
90% preferred the red splash-screen
Hi-Fidelity Prototype
Once we had analyzed the results of the usability tests on our mid-fi wireframes and made the necessary iterations based on the findings, we proceeded to the next stage in our design process, which involved creating high fidelity prototypes.
UI Style Tile
Final Product - High Fidelity
High Fidelity Prototype in Action
Next Steps & Reflections
Significant teamwork and coordination were essential to accomplish such a challenging project within a restricted timeframe. We gained proficiency in efficient communication through online meetings and chat rooms, and we also acquired the ability to collaborate on several tasks simultaneously.
Moving forward, our plan includes the development of a carousel featuring testimonials on the website's main page, as well as conducting additional testing and research to enhance our understanding of our users. Finally, we intend to redesign the logo, as some users were unable to recognize the parent-child motif until it was brought to their attention.
More Projects...