Hope 4 Kids
Redesign
Featuring an upgraded adoption process, volunteering, and donating user flow for desktop.
Hope 4 Kids
About
Hope 4 Kids is a non-profit, full-service adoption agency that works with hopeful adoptive families & biological mothers to facilitate a successful & lasting union with children & their new families. Their website also acts as a fruitful resource for those interested in adoption, those who have already adopted, and mothers in need of professional help, support, or advice. Though based in the U.S., Hope 4 Kids offers their services to communities in South Africa
Tools
Figma
Goggle Forms/Drive/Sldies
VS Code
Bootstrap
Github
Project
The project’s objectives were to solve fundamental usability issues presented on the Department of Energy website & mobile application. To do so, a variety of users were observed using the site, both before and after redesign. During the process, the hierarchy of information and navigation were reorganized & reconstructed, while the site also received new responsive breakpoints with corresponding designs. Overall, the redesign was observed to be successful in enhancing user experience.
Jump to a Section
(empathize)
Stakeholder Contact
Our first priority was attempting to get cooperation & input from the agency
Unfortunately, they failed to get back to us, so each step of the design process is based heavily on the users’ wants/needs and partially on what we believed would be best for the organization’s goals and purpose.
To begin the redesign process, it was decided to jump straight into usability testing after the initial evaluation of the site to shed light on the features that should be kept, improved, or scrapped.
Usability Testing I
The purpose
In designing our usability testing methodological approach, we sought to collect qualitative data detailing the ease at which users moved through the original site while gauging their experiences with the main functions of the site – adoption education, volunteering information, and eliciting donations.
the tasks
Participants were asked to complete 1-1 interviews that included navigating 3 user scenarios and answering 5 questions applicable to each scenario.
what were the outcomes?
Users were:
- Frustrated by the inefficiency of navigating through the site (i.e., broken links and buttons and disorienting navigation).
- Confused by the lack of descriptive information about the adoption process and were unsure what exactly ‘Hope 4 Kids’ mission was.
- Unlikely to donate because of the lack of transparency regarding how donations will be used and how the non-profit aids in adoption.
how were the results implemented?
First and foremost, the central navigation, links, and buttons were fixed to take users to the appropriate places around the site. The taxonomy and architecture underwent a redesign to educate and inform users about the adoption process while streamlining volunteering and donating. Finally, a ChatBot feature was integrated to further help guide users to the information they may be seeking.
Affinity Diagram
To analyze the data collected in usability testing, an affinity map was formulated with transcribed and categorized user statements.
Empathy Map
Using the affinity diagram, participant behaviors, emotions, gains, and pain points were combined to form a potential user profile through an empathy map.
Proto-Persona
The concepts detailed through our empathy were further refined into a proto-persona.
Competitor Analysis
Following testing, & before delving into UI redesign, we felt it important to get a sense of what is & is not successful on competing sites.
The Effective & the Not-So-Effective Aspects of Competing Sites
clean & simple
A streamlined & straightforward UI helps to guide users to the information they're searching for.
easily reachable
Offering more than one method of communication (i.e. chatbot, forms, buttons, & contact page) is effective.
trust & credibility
Establish legitimacy by displaying certifications, merits, partners, projects, & success.
visual mistakes
Steer clear of grainy images (common with non-profits), walls of text, & inconsistent color schemes
lack of grid layout
Confusing page structures & non-sensical typography lead to hard-to-read pages and overlapping text
Redlining
Homepage
Nav bar disappears when trying to select drop-down menu choice
Video and info does not align with margin or grid
Green box and text do not align with margin or grid
Spacing.
The ‘Give Today’ and ‘Get in Touch’ seem connected, but are not. One is for donation and the other is for contact
Difficult to read text due to color choice
Support & Donate
‘Learn more’ is non-operational
Secondary nav is non-operational
‘Learn more’ button opens the windows mail app on desktop
Extra space is unnecessary; button opens desktop mail app
Missing description; spacing is off; button opens desktop mail app
Button opens desktop mail app; image does not convey the ‘provide hope’ message
Not accessible: grey font / grey buttons on grey background.
(define)
Once we had gotten to know & understand our users, we compiled significant pain points, personality traits, desires, & motivations to build our problem statement and base our redesign on.
User Persona
User Insights
Statement
Online users interested in adoption, volunteering, or donating may be easily discouraged by the issues of the site and turn elsewhere to fulfill their needs.
Users who are looking to find out more about the adoption process need a transparent and easy-to-use source of information that makes it simple to learn more and volunteer/donate.
Problem
Statement
Streamlining navigation and improving the information architecture for users seeking to understand how adoption works and how they can participate will make the experience transparent, responsive, and fruitful for visitors.
How might we improve the transparency, intuitiveness, and overall functionality of the Hope 4 Kids site?
User Flow
To make it easier to organize and create an entire user flow, we started with creating 3 basic flows for the main purposes of the website. We then connected all the flows together into the main user flow
(ideate)
Information Architecture & Design
UI Style Tile
& beginning header and footer mockups
Site Map
Assembled referencing the original site navigation, our constructed user flows, and suggestions derived from usability testing.
(prototype & test)
Once we had gotten to know & understand our users, we compiled significant pain points, personality traits, desires, & motivations to build our problem statement and base our redesign on.
Lo-fi
Prototypes
Using data from the card sorting, a new site map was constructed implementing a generalized version of the categories suggested by the participants. Each category is intended to cater to the most likely users of DOE’s site, such as the climate concious, students & teachers, home renovators, and business owners.
Mid-fI
Prototype
Using data from the card sorting, a new site map was constructed implementing a generalized version of the categories suggested by the participants. Each category is intended to cater to the most likely users of DOE’s site, such as the climate concious, students & teachers, home renovators, and business owners.
Usability Testing II
The purpose
To assess if the iterations made to hope4kids.com increased the clarity and function of the main features of the site.
The Goals
To determine what features worked and which needed further revision on the mid-fi prototype.
the tasks
Starting from the homepage for each task, participants were asked to:
- find information about the adoption process and determine how to move forward with an adoption facilitated by the non-profit.
- move through the site as if they were seeking information for volunteering
- find more information geared toward donations and attempt to donate.
what were the outcomes?
Users identified:
- Further issues with the navigation and inconsistent button shapes.
- A need for more information regarding the importance of donating and what donations accomplish.
- Awkwardness in the adoption process step flow.
how were the results implemented?
In designing the hi-fi prototype: the navigation was enlarged and simplified for ease of use; buttons, images, and page content was streamlined and advanced; and the adoption process interactive feature was iterated for increased intuitiveness.
hi-fi
Prototype
After addressing issues found in user testing, the design was further simplified and iterated. This consisted of changing the hero image and formatting, highlighting the email sign-up process, and modifying headers & footers.
final
Prototype & Navigation
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn’t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here