top of page
Champion Institute
Aug 25, 2022 · 9 min read
Overview
An organization filling the gap in fatherless young men
PROJECT TASKS
Product Thinking, User Research, Information Architecture, Ideation, Wireframing, Visual Design, Prototyping, Testing
PROJECT ROLE
Product Designer, Frontend Developer
PROJECT TIMELINE
This project was started in Apr 2017 and is on-going.
CLIENT
Champion Institute
In this project stint, the goal was to create a web + mobile experience for a Houston-based nonprofit focused on fatherless young men.
How might we create a web experience for a nonprofit that is centered around fatherless youth but also appeals to donors?
The Process
In designing this web + mobile experience, I immediately noted a challenge from Day 1. The largest challenge during this project rested on visual communication, and using visuals to garner a deep enough response that it would drive the User to want to take action and donate.
Visuals are subjective, and what may be effective with some may not necessarily be the same with others. In identifying a single user group, donors, ensuring that the experience catered to video and imagery was going to be key in evoking an emotional response to give an unsolicited donation.
Product Thinking
Educating the public on the seriousness of fatherless youth
As a first step, I felt it was key to nail down the broader aspects before starting the processes of research and ideation.
What problem are we solving?
We want to creating a web + mobile experience that educates and persuades the public to donate toward a cause.
Who is our target audience?
Broadly speaking, our target audience is donors.
What is Champion Institute's vision?
Champion Institute knows the woes of not having a father-figure growing up and has a vision of inspiring fatherless youth across America to rise above and excel in spite of the challenge.
How will Champion Institute achieve the vision?
Champion Institute will achieve the vision by creating and running specialized programs that are geared towards helping youth excel spiritually, personally, academically, and professionally.
User Research
Understanding the Users and gathering the data
It was clear that qualitative data was going to be the most useful for this project. Learning how Users view nonprofits, nonprofits they're familiar with, and interaction with nonprofits was going to be imperative in shaping this web experience.
Discovery Interviews
What are your thoughts about nonprofit organizations?
Overwhelmingly, Users didn't have any overly positive or negative sentiments toward nonprofit organizations.
Tell me about a time you've volunteered?
These responses varied for the most part, but what was consistent was that Users claimed to enjoy their time volunteering and would do it again.
What organizational causes would you be in support of?
For the most part, Users shared that causes relating to children would be ones they'd support? Climate was a close second.
How do you think organizations can make more of an impact?
In general, Users felt there should be more education surrounding the causes of organizations.
Reflection on Responses
As a general takeaway from the responses, I felt that Users were passionate and had a positive outlook when it came to causes they believed in. I purposefully did not question users on donations because I didn't want them to self-reflect. Instead, I posed the question on a time they volunteered. Time is an invaluable asset, so it's likely that they'd be willing to give monetarily if they're willing to give with their time.
Ideation
What do Users want in using this experience?
As a User, I should be able to...
LEARN ABOUT THE ORGANIZATION
LEARN ABOUT THE CAUSE THE ORGANIZATION IS SERVING
SEE SOCIAL PROOF THAT THE ORGANIZATION IS IMPACTFUL
In conversations with the client, we established a baseline for the experience and identified the main aspects Users should have in the experience.
The aspect of learning about the organization and becoming educated on the Cause was going to be paramount in the experience. A lot of the "learn" objectives could be achieved through imagery rather than text, which gives us an opportunity to bring clarity to organizational values more quickly as well as garnering an emotional response.
We complied the list in an order of priority.
HAVE THE ABILITY TO DONATE
LEARN WAYS I CAN FOLLOW AND BE INVOLVED
CONTACT THE ORGANIZATION
Information Architecture
Keeping The Journey Simple
From the start, it was important we keep the journey simple for the User. Purposefully, we avoided adding any third-layer tiers of information that may deflect from the user tasks we set out during ideation. We also wanted to ensure that applicable landing pages had a flow into the Give(donation) page. Strategically, it was included to be a call-to-action.
Many of the landing pages in this architecture included early project initiatives that captured information from Users that we could use for engagement opportunities down the road. The IA for this web experience is still evolving.
Landing Page Iterations
Starting in 2017 up unto now, we've explored different visuals that communicate the organizational values of Champion Institute. In 2019 we did a complete visual overhaul and restructuring of the site. In this restructuring, we opt'd for new imagery that was more diverse, and tested using a Hero Video on the landing page as opposed to a static image. The video, upon testing proved to be much more effective with higher click-through engagement upon making the switch.
2019 Landing Page Experience(On-Going)
Taking what we learned in the first iteration, we took a new approach. For the Hero, we opt'd to use a video which has proven to boost click-through engagement with Users. Users have claimed that the video had a powerful impact on them and encompassed all of the organizational values without scrolling or page-surfing. All of this was accomplished above the fold.
Users claim that this landing page feels cleaner and users are drawn to the imagery and headlines more than they were with the initial iteration. In this iteration, we also felt it was important to highlight statistics to further drive impact and support for the Cause.
Above The Fold
We're currently testing an above the fold that only shows video without complementary text. With how impactful the video is, the text almost feels unnecessary. This testing is on-going.
Below The Fold
From the hypothesis formed in the 2017 iteration, it was proven to be correct. Incorporating more visuals and lessening text has caused Users to slow down in their scroll-through of the site. User claim they are more inclined to read the text when there is an accompanying visual.
2017 Landing Page Experience
In 2017 we opted to use a palette of blues as the foundation of the brand identity. The color palette evoked tones of strength, security, and light enough to feel youthful. The font selection was kept simple for easy readability, and conservative enough that it doesn't detract from the visuals.
In this iteration, there were a lot of aspects that turned out to not work well in testing:
Above The Fold
This aspect didn't work well because it placed more emphasis reading body-text for context than the visual. The Hero Image also had an unnecessary blue filter over it which diminished its impact.
Below The Fold
The body of the page was overly text heavy. Most users claim not reading the text and scrolled to the bottom of the page without doing any reading. A hypothesis I formed here is that adding visuals to the text may help slow down the experience.
Additionally, the call-to-actions for donations were over done. Users claimed the multiple donation buttons were a "turn off". Seeing that the body text was most likely not read, it left the donation buttons without context, making the User feel as if the experience is centered money rather than the Cause.
Visual Design
End-User Experience
Reflection
Lessons learned
While this project is still on-going, there is has been a lot lessons learned. Qualitative user research has really been instrumental in shaping the experience thus far. There have been significant improvements to the user journey and major refinements to the UI. Along with these enhancements since the first iteration, there has been a notable increase in engagement and conversion.
bottom of page