UX Case Study: Mavis McMullen Housing Society
The Background
Mavis McMullen Housing Society is a non-profit committed to providing women-led, affordable housing for at-risk families living in Vancouver. A board member of the non-profit, Shannon Thompson, came to our team looking to redesign the current website. As a feminist with a non-profit background, I was especially excited to tackle this project. With my experience, expertise and passion secured under my belt, I felt confident in hitting the ground leaping.
ETA: 2.5 weeks
And leaps we made. In just under three weeks, we pivoted through the process outlined below. SPOILER ALERT: we did a damn good job. A damn good job she says? Is that so? Oh yes, why yes it is. I am so extremely proud of what we’ve accomplished and I can’t wait to show you. Stay tuned!
Meet the team
Before I divulge any further, let me first introduce you to the dream team via Bitmoji. I’m the one on the furthest right. I tend to express my enthusiasm using a thumbs up, so I thought why not have Bitmoji me do the same?
Meet the challenge
On December 5th 2018 — we set out to meet our client, Shannon Thompson, a Board Member of Mavis McMullen. During our meeting with Shannon, we wanted to get a better idea of the current challenges the organization faces with regards to their website.
In our discussion, Shannon expressed the need for more donations to support programming for residents of Mavis McMullen.
Currently, the organization receives a meagre $10/year online in donations. And while they receive funding from BC Housing to cover the operational costs of running two buildings in Vancouver, there isn’t any additional funding provided to pay for programming and services.
It also became clear in our conversation that updating the visual and brand identity of Mavis McMullen could be a first step taken to raise more awareness about the organization, and increase its donations.
The Goals
After our meeting with Shannon, the business and project goals were in clear view:
To create a safe community and living space for women and their families in the Downtown Eastside and East Vancouver.
- Attract funding on Mavis McMullen’s website to to support additional programs and services for lower income women and families.
- Establish a branding identity to 1) increase awareness 2) attract donors or community partners
- To help others, especially at-risk, low-income groups
- Easily find relevant information about an organization in terms of spending, impact, mission and values
Domain Research
With our goals fresh in mind, we began our research phase of our project. The first thing we set out to do is look at other organizations within the same domain to explore the types of features incorporated into their websites, and more generally, what they did well versus what they didn’t do so well.
We decided to categorize our findings in the chart above and found that there were certain consistencies across websites. Transparency, for example, was an emphasis. It was communicated via different means, including FAQ’s and Annual Reports. The donate page itself often articulated the specific impact of a donation i.e what the money would be used for.
Another thing we noticed was that each organization included various giving options on their donate page e.g. giving monthly, giving today. We also found that the donate button was consistently placed on the top right side of these desktop websites. These insights would be important for us later on, in our design of the donate page and button.
Secondary Research
Through our domain research, we started to get an idea of the features we wanted to include on the website. To get an even better idea though, we decided to do some secondary research. We came across an article that explored certain psychological principles to better understand what motivates people to give. The two that we found especially insightful were:
This principle suggests that people are more likely to donate to a cause when they are presented with a single, identifiable victim’s story than when presented with a group of victims.
Goal proximity suggests that people are more likely to give when you are closer to reaching your fundraising goal.
Surveys and Interviews
Next, we moved onto our survey and interview portion of our research. We wanted to learn more about behaviours and motivations for donating, experiences donating online and attitudes towards low-income housing.
Affinity Diagram
We then created an affinity diagram using the qualitative data from our survey and interviews by grouping together common ideas to give us insight into our potential users.
Research Findings
After analyzing our research data, a few things stood out. The information people wanted to see prior to donating to an organization was key, as it helped us understand what content needed to be featured on the website, and how it could be prioritized.
We then grouped common dislikes of online websites people donate to, and found that concerns about security and legitimacy of an organization were paramount. In terms of content presentation: people liked good visuals, a clear message and easy navigation. Additionally, a desire to help others was cited as the top motivation to donate in our survey.
Some additional findings are noted below. Many of our interview respondents consistently identified homelessness as the most pressing issue locally. When asked about opinions on low-income housing, people had varying attitudes:
“My opinion of low income housing is mixed. Im all for it, people need help sometimes. I lived in some as a child. But crime and poverty go hand in hand.”
By interviewing and surveying our potential users, we got to know them better and figured out what their goals are as a donor:
- To help others, especially at-risk, low-income groups
- Easily find relevant information about an organization in terms of spending, impact, mission and values
Persona
Using our research, we created our target persona. Meet Jordan Wong, a family-oriented professional with a desire to help those in need:
Storyboard
To illustrate why Jordan might want to visit Mavis McMullen’s website, we created a storyboard:
Jordan is a working professional and mother to a four year old toddler named Jessica. She resides in a condo with her family in Burnaby.
Jordan passes by the downtown Eastside on her commute home from work. Jessica is often with her on this commute as her daycare is located nearby Jordan’s office. While gazing out the window on one of their drives home, Jessica asks Jordan, “Mommy, why is that lady sleeping on the sidewalk?”
Jordan recalls this incident to a friend over the phone, and tells her that as a woman and a mother, she feels compelled to help other women in need. Her friend recommends checking out Mavis McMullen Housing Society, a non-profit that provides affordable housing for low-income women and their families.
Jordan hangs up the phone and calls Jessica over to sit next to her while she reads passages from the Mavis McMullen website about how the non-profit has impacted the lives of its residents.
Userflow
We then visualized what a user flow would look like once a user like Jordan opens the Mavis McMullen website:
One possible flow could entail landing on the Homepage and then navigating to About Us in an effort to learn more about the organization. Once a user is convinced of Mavis McMullen’s legitimacy and impact, s/he may click on Support Us to learn more about the different ways to support the non-profit. At this point, the user decides to donate money and navigates to the donation form to do that. The donation form is accessible from every page of the website.
Sitemap
We created a before and after version of the site map to illustrate the changes we made in our design:
The main difference is that in our redesign, we added a donate page with an embedded donate form. This is consistent with our domain research findings, as other non-profits typically do the same.
We also removed the News tab after our client mentioned that the organization didn’t have the resources or volunteers to update this page.
Prototyping
Once we understood the user flows through the website, we began to design our screens. We created low, mid and hi-fidelity mobile and desktop prototypes. We sketched our lo-fidelity prototypes on paper, and designed mid and hi-fidelity on Sketch. In between, we tested each prototype and applied changes going forward in the next iteration.
While designing our screens, we made reference to our research findings and incorporated specific design elements as a result:
On the home page, we featured a single resident of Mavis McMullen and quoted her experiences living at Haley place i.e. how its positively impacted her. We wanted to entice users to donate to the organization and understood from the Identifiable Victim Effect that people are more likely to give when presented with a single person’s story.
Next, we including a progress bar in the Support Us page with a specific fundraising objective. According to the psychological principle Goal Proximity, people are more likely to give when they see an organization is closer to reaching its goal. By including a specific objective, we also wanted to increase transparency with the public.
In our research, we found that users highly valued transparency — and so we included a few donation FAQ’s to help communicate that.
We also included the donate button on the top right side of the page on desktop — this ties in with our domain research in which we found that the donate button is consistently placed here across several non-profit websites. On mobile, we placed the donate button at the bottom of the screen — which is more easily accessible as its closer to where a user’s thumbs sits while they are using their phone.
As mentioned earlier, we conducted user testing for each prototype we designed. We completed a total of 14 user tests with the following tasks:
- Where would you go to learn more about the impact of Mavis McMullen?
- Find out what physical items you could donate to the organization.
- Learn more about volunteering with Mavis McMullen.
- Find out about vacancy at Mavis McMullen Place.
The key findings we observed from our testing results include:
Finding #1
On the ‘Support Us’ page, we originally had information about donating money, physical items and volunteering communicated to the user as s/he scrolled down the page. After we tested low-fi, we realized that if a user solely wants to learn more about volunteering, they have to scroll all the way to the bottom to get there. To save time for the user, we added three buckets in mid-fi: donate money, donate physical items, volunteer. Once you click these buckets, it takes you to the corresponding section on a different part of the page.
Finding #2
Our mid-fi testing feedback for this same page included moving the current fundraising goal to the top of the page in hi-fi, since our project goal is to attract funding to the website.
Finding #3
In low-fi testing — our users had to read through the building description before learning about vacancy. The feedback we got was that if they knew about vacancy sooner, they wouldn’t read any further. In hi-fi then, we decided to place the vacancy message at the top of the page in red, so that it’s the first thing users see.
Finding #4
In our mid-fi prototype, our donation form was a single page. However, during testing we found that users were overwhelmed by the lengthy, content-heavy page, and preferred to have the form broken down into short sections. We implemented this in hi-fi along with a progress bar at the top, to show users which stage they’re at in the process.
And now for the final prototypes reveal:
Desktop Prototype:
Mobile Prototype:
So, did we solve the problem? Let’s remind ourselves of what the problem is:
In our discussion, Shannon expressed the need for more donations to support programming for residents of Mavis McMullen.
As a first step to attracting more donations to Mavis McMullen, we’ve updated the website and brought it up to a standard similar to other organizations within its domain. Prior to the rebrand, it was challenging to simply find the donate button on the website itself. Once Mavis McMullen updates their current website with our rebrand, we’ll have a better idea of whether more online donations are being made. For now though, I think we’ve positioned the company to receive more online donations with our rebrand and I’m looking forward to see the result!
In terms of future considerations, we’d like to include:
- Designated FAQ page
Since our research showed that users highly value transparency, we’d like to go further in addressing it by creating a designated FAQ page answering additional questions. Additionally, we’d feature the FAQ’s in the footer, so that its accessible from any page of the website.
- Online application for housing
Once there’s vacant units to rent, it would be more convenient for users to fill out a fillable, online application for housing. Currently, this isn’t available on the Mavis McMullen website.
- Address mixed opinions about low-income housing
To help dispel negative opinions about low income housing, it would be helpful to have more information about it on the website for donors and future residents to read.
- Separate pages under the tab ‘Support Us’
We’d also like to create three separate pages for the donate money, donate physical items and volunteer buckets on the Support Us page. By doing this, users can access each item immediately from the header, instead of having to click on the ‘Support Us’ page first to view it.
Thank you for reading my case study — I hope you enjoyed reading it as much as I enjoyed writing it. If you have any feedback on it, please let me know. I would love to hear your opinion, as well as any constructive feedback you may have on how I can improve.
