The Middlemarch Foundation and its counterpart, the Middlemarch Fund, were established to combat San Diego's middle-income housing gap. I was brought onboard to design the website for the Middlemarch Foundation. While The Middlemarch Fund's website was designed for developers and laden with industry jargon, I was tasked with tailoring the Foundation's website to communicate with a broader user group: potential investors.
San Diego investors were unconvinced about the pressing need to address the region's middle-income housing gap. This lack of support hindered Middlemarch's founder in securing investments to develop middle-income housing. Our goal was to utilize the Middlemarch Foundation's website to narrate the story of San Diego's millions of middle-income individuals, persuading investors that addressing this issue would enhance the region's economic and social well-being, subsequently benefiting their institutions.
A responsive website that utilizes a content strategy to effectively convey to investors the mission of the Middlemarch Foundation, the middle-income housing crisis it aims to address, and the reasons why investors should help this cause.
The founder of the Middlemarch Fund was having trouble garnering investments that she could then disburse to real estate developers to build middle-income housing. To address this, she decided to create the Middlemarch Foundation, a companion non-profit organization that would be more appealing to investors looking to make a social impact (and get a nice tax write-off for their contribution).
She wanted a fresh new website for this new organization, so I sat down with her to create a game plan for the project.
Show potential investors who we are, what we do, and why they should care.
Social impact investors from regional anchor institutions.
Secondary competitors include the San Diego Foundation, Mission Driven Finance, and Local Initiatives Support Corp (LISC).
I did a UX audit of the Middlemarch Fund’s website to identify any areas for improvement for the Foundation’s new website.
The existing website looked very professional, but was aimed at developers seeking funding. I could see where the founder’s concerns were stemming from—the Fund website didn’t speak to investors.
I evaluated the websites of three nonprofits similar to the Middlemarch Foundation (San Diego Foundation, Mission Driven Finance, and LISC) and compared their strengths and weaknesses to identify potential key features for the site build.
Every single site went deep into the metrics surrounding the impact their organization had on their communities.
These sites include detailed information about who their donors are, how they allocate their funds, etc.
To round out my research, I spent some time interviewing users and stakeholders (again) to uncover insights about users’ beliefs, attitudes, and motivations surrounding nonprofit giving.
The founder wasn’t able to provide metrics or site analytics for the current website, making it difficult to assess its effectiveness and identify areas for improvement. As a result, I had to rely heavily on the insights gathered from conversations with the founder, competitive analysis, and user interviews to guide my design decisions moving forward.
Gathering the insights from my research, I created a series of problem statements, which I then translated into features for the website.
Before I started sketching layouts, I needed to determine how these features would be organized into pages, and how those pages would relate to each other and establish the site’s navigation. So I came up with a simple sitemap to hash it all out.
I created high-fidelity mockups of the site pages to share with the founder of Middlemarch.
To test the site’s navigation and messaging, I conducted an unmoderated usability test via Maze.
To measure the success of the website’s design, I needed to discover the following during testing:
Despite the overall success of usability testing, there were still a few areas for improvement, so I iterated on my screens to incorporate user feedback.
Initially, the CTAs suffered from dull, nondescript copy, thus missing an opportunity to guide users through the site to arrive at the desired actions. I revised the microcopy to something more exciting and descriptive, indicating to users what action they could take by clicking each button.
During testing, users noted that it was a long scroll to find CTAs on certain pages. So I added more CTAs throughout each page to give users multiple points of action. This made the website more navigable and invited the user to explore more.
The name was misleading users because actually investing was not possible from that page. So I renamed it to “Impact” because it was more descriptive of the content users would find there.
Many users did not understand that, in order to invest, you had to submit a contact form. To avoid frustrating users and losing leads, I updated the copy on the Contact page to include clear instructions about how to invest and what to expect after submitting an inquiry.
A redesigned website that would appeal to social impact investors and drive investments for the organization.
In addition to providing the client with final page designs, I gave her a wrap-up document with a summary of features and a tentative roadmap for further development:
