Housing Up
How might we enable a D.C. nonprofit to increase donations through strategic storytelling?
Housing Up, recognized as a leading nonprofit affordable housing developer in the District of Columbia, builds thriving communities by developing affordable housing and offering comprehensive support services to homeless and low-income families. Since 2010, they have developed or preserved 372 units of housing for low-income families, all of whom have incomes below 60% of the area median income (AMI).
Over the years, their website evolved with no branding or communications strategy to help support their organizational need for growth. In 2018, the organization had an increased focus on fundraising, so their website needed a facelift to showcase their organizational impact better and to attract donors. It was an exciting design challenge - to create a website experience for their partners and donors that would both tell their story of impact and entice people to support their mission through donations.
Photo credit: Housing Up
User Research, Needs Assessment
What are the gaps and opportunities?
With a goal of helping Housing Up telling a stronger brand story and get donations, I identified vital messaging as the building blocks for the UX. Starting with a needs assessment, I worked with the Housing Up team to outline their goals and objectives of the site, gaps and opportunities, their strategic goals, and how the website could help them achieve their organizational goals.
Because this was a reasonably low-budget site, I took a streamlined approach to the IA and user research. I worked closely with the client team to understand their pain points with the site and strategic goals, using these qualities as a foundation for the information architecture. Although usability testing and interviews were not part of the budget (though recommended), there were other ways I gathered and utilized user insights that were valuable to the user research process.
Instead of formal usability interviews, setting up one-on-one interviews with the Communication’s team helped me identify what key messaging was missing from the current site, and that the information architecture needed to support.
USER RESEARCH
Identifying audience needs
The website needed to be a comprehensive resource of information for all audiences, allowing Housing Up to tell their story while communicating clear pathways to action: donate, volunteer, partner with us, and learn more. Housing Up found that once people understood what they do, they were enthusiastic about supporting the organization. However, it was difficult for users to find this information on the old site. Given the importance of reaching multiple audiences at once, I based my design decisions on bringing the user needs of our three key audiences to the forefront of the website and UX strategy.
By knowing which audience you are writing for, you can write at a level that is meaningful for them. I used personas while designing the IA and UX to help me visualize the audience I was writing for and to ensure the UX was helping to meet user needs.
DESIGN RESEARCH
Designing for strategic storytelling
Housing Up needed a visual language that spoke to their audience and was both lively and unique. The client wanted to showcase their human impact and dedication to helping communities in need. Mood boards were a great design research tool to collect relevant examples of visual storytelling strategies and user interfaces that would help achieve the goals for both the brand the site experience. Through two moodboard concepts, “Warm and Friendly” (moodboard A), and “Colorful and Impact-focused” (moodboard B), these design research tools not only enabled me to not only hone in the client’s style preferences for the brand direction but also identify the foundation for design elements to eventually use in the digital style guide.
Although Housing Up had an existing brand style guide, this needed to be applied within a digital environment to enhance the storytelling capabilities of the website. I designed the digital style guide as the first step in the brand evolution for Housing Up to create a brand that focused on human impact but retained the playful and colorful design elements emulated in the logo.
DESIGNING FOR AUDIENCES
Potential donors + partners
Potential donors and partners needed a website experience where they could quickly learn more about Housing Up’s impact as well as how to donate and or volunteer. Through user research, I found that one of the key reasons people donate is because they feel emotionally moved by a family's story. Therefore, I structured the information architecture to emphasize messaging to illustrate how a donor’s dollars made an impact on Housing Up’s mission. Placement of prominent calls-to-action as global elements also helped facilitate potential donors and partners being able to complete essential user tasks.
DESIGNING FOR AUDIENCES
Families needing services
Families needing services had to quickly find the resources they required. I took a mobile-first approach to the design and UX, envisioning that this audience group’s needs were often very time-sensitive, and that they are often in a time of crisis. There were a variety of user scenarios to consider that influenced creating a frictionless experience for this audience group, so they could get the support they needed efficiently. One of the design decisions that helped address this goal was a strategy called “chunking” content to showcase impact, and modeling the messaging after a conversational interface. I’ve found that “chunking” makes web content more scannable by breaking it into manageable sections for users - which was particularly important for people in need of finding out what resources are available or a number to call for help.
When developing the site’s content, I kept the independent user tasks in mind and wrote to ensure I was helping them accomplish those tasks. Although the client team was responsible for a majority of the body content, I outlined the high-level messaging to support and facilitate the site goals, which also served as an outline for the client team.
DESIGNING FOR AUDIENCES
Existing Donors
From initial user research and one-on-one interviews with the client team, I found that existing donors need to find ways to stay engaged with the organization and stay up to date on Housing Up's work. Seeing how Housing Up was making a difference in families’ lives gave existing donors a sense of purpose and reassurance that their donations were making an impact. Many design decisions were aimed at addressing this audience need:
For example, featuring a persistent global element in the footer to encourage sign-ups and social engagement allows existing donors to follow real-time updates on Housing Up.
Additionally, along with prioritizing Housing Up’s efforts and impact throughout the website user experience, the latest news section served to provide existing donors with an opportunity to stay up to date Housing Up’s impact.
A NEW DIGITAL PRESENCE
Designing for Impact
For this project, we used WordPress as the content management system and created a series of reusable design elements that allowed us to keep the design and development costs low and provide Housing Up with an easy to use administration interface to update dynamic content (like stats, tables, and illustrations). I worked as the lead UX designer on this project, tackling the user research, information architecture, UX, and visual design, and worked with lead developer Jasand Pereza for the design extension and QA.
Housing Up's role as an organization to ensure families have access to safe, affordable housing and the chance to lead stable, independent lives was contingent on telling their story and soliciting support and donations. Their new human-centered digital presence helps propel Housing's organizational impact and strategic fundraising efforts.