Modernizing a non-profit organization’s website to increase donations and volunteer engagement— A UX Case Study
Overview
The Oakland Literacy Council (OLC) has been serving adults in Oakland County, Michigan who struggle to read, write, and understand English since 1984. Over the last 35 years, they have helped thousands of students gain self-sufficiency, confidence, and become proficient readers, writers, and communicators.
As it kicks off its 36th year, the OLC is looking to update its visual brand to better reflect its mission in 2021.
As such, over the course of a week, I designed a high-fidelity concept for a modern, engaging landing page intended to increase online donations and volunteer engagement.
Design Process
Discover
The current OLC website landing page is outdated, overcrowded, and is a hodgepodge of color. However, as a former development & fundraising associate for a small literacy organization myself, I understand the impulse to show as much content to potential donors, volunteers, and students as possible in hopes of winning their support or participation.
I evaluated the current site for usability with the following user goals in mind:
- As a donor, I want to be able to make an online donation quickly and easily.
- As a volunteer, I want to sign up to tutor adult learning students.
- As a student, I want to enroll in OLC programming.
The current site makes it easy for students and tutors to find the resources they need but potential donors are given a far less efficient experience. Student and Tutor resources are prominently displayed on the lower, more noticeable navigation bar, while the link to Donate is almost hidden on the thin uppermost navigation bar or in a variety of text links under the hero image.
While I believe the color scheme and typography were intended to feel neighborly and welcoming without feeling too casual, the navigation bar headers and text links fail to meet WCAG contrast compliance on the current background. My recommendation would be to use this brand modernization as an opportunity to make sure all aspects of the site are WCAG compliant, starting with the color palette.
Before jumping into redesigning, I looked at other literacy, adult education, and community-strengthening organizations of all sizes and scopes to better understand non-profit web design conventions. The best experiences were clear, concise, and easily navigable; buttons and calls to action were catchy and prominent while images, videos, and testimonials were favored over dense blocks of text.
Define
How might we expand this opportunity to refresh the OLC brand to better serve all of its users, increase online donations, and strengthen volunteer engagement.
Develop
Given the outdated look of the site and the contrast shortcomings, my top priority was updating the color palette to be contrast-compliant while still maintaining a welcoming and neighborly feel.
I first updated the logo. Rather than starting from scratch, I wanted to incorporate elements and styles from the current page to keep the overall brand consistent and stable. I used the blue-green italicized Lato headers as inspiration and designed a sleeker, softer, and simpler logo that is easy to spot without being overpowering.
From there I built out the rest of the color palette and typography.
Sketching & Wireframing: When sketching out my initial wireframes for the updated OLC Landing page, I prioritized placement of calls to action and essential content for my three user stories: donors, volunteers, and students.
I knew I wanted the page to rely on clean, distinct, and modular sections that would make it easy for users to find relevent information quickly while giving the OLC flexibility to rearrange content and elements as needed.
Using Figma, I further developed the sketches into wireframes and a mid-fidelity concept to test and get feedback on the direction I was heading.
I recevied insightful feedback on element sizing, section hierarchy, and header copy that informed my subsequet iterations. I adjusted section headings to be more informative than filler, sections were rearranged into a more intuitive cadence, and buttons and photos were adjusted to more appropriate scales.
Deliver
The final high-fidelity concept for the Oakland Literacy Council landing page is informative without being overwhelming, easy to navigate, and optimistic.
Conclusion & Next Steps
Since this is only a landing page concept, I envision expanding this design to some of the interior pages (Donate, Student Enrollment, and Volunteer Sign Up pages) in the same style in order to develop an interactive prototype to test usability. I will consider this concept a success if–once live–the Oakland Literacy Council sees an increase in online donations, allowing it to recruit, train, and retain more volunteer tutors; offer group and online learning opportunities to more students; and equip students and volunteers with the tools and equipment they need to succeed.
