UX Case Study: Mavis McMullen Housing Society

Meet our amazing team:

Design process

The project was split into 4 segments:

  • Planning (week 2)
  • Design (weeks 2–3)
  • Testing (weeks 2–3)

Research

Research goals

After the kick-off meeting with our client, we found that the most basic goal of the project was to modernize and revamp the website, which was designed in 2012. As a non-profit organization seeking donations, they would like to increase user friendliness primarily so that donors can be enticed to donate to them.

Research methods

We used the following research methods for this project:

  • Survey
  • Interviews
  • Gut test (UI)

Domain research

For domain research, we looked at the websites of various non-profit organizations and charities. Since Mavis McMullen Housing Society is a non-profit organization and therefore has no direct competitors, we focused on the general layout and features of similar websites.

YWCA: a major source of inspiration for our website’s basic layout.
DTES Women’s Centre: a source of inspiration for the features that our website needed.

Survey

We surveyed 21 people about charities, why they would donate, etc. A key finding from the survey was broken down as follows:

Interviews

We conducted 8 interviews with various people who donate to charities, in order to find out about the kinds of charities they donate to, their motivations for donating, what information they want to see, etc.

Affinity diagram

Using our research findings, we created an affinity diagram, which enables us to take the qualitative answers from surveys and interviews and use them to draw insights.

This category came up, but it wasn’t particularly relevant to our design.

Planning

Using the data we gathered, we put together the following:

  • Storyboard
  • Site map
  • User flow

User persona

Since the website is meant primarily for donors, our user persona needed to feature an individual who’s willing and able to donate money, and also well aware of the issues that Mavis McMullen Housing Society is trying to address:

Storyboard

Using the user persona, we created a storyboard to see how Jordan Wong got to the Mavis McMullen Housing Society’s website (and in a position where she would benefit from a modernized and better designed website):

Jordan Wong has a 4 year old daughter with her husband Robert.
She cooks food for her family.
On the way to and from work every day, she passes by the Downtown Eastside, where there are lots of homeless women.
She finds out about Mavis McMullen Housing Society from a friend.
To teach her daughter about the importance of giving, she visits Mavis McMullen Housing Society’s website with her daughter.

Sitemap

Since the old website did not contain many pages and was reasonably well-organized, our sitemap is somewhat similar. A key difference is that there is no longer a news page, and that the donate button is now constantly visible.

User flow

Since the ultimate goal was to get users to donate, we combined the various different ways a user could reach the donation form. They might choose to find out about the organization first, they might (then) look for ways to provide support, but ultimately, the donate button is always visible and can be reached from any page.

Design

Design studio

For the design studio session, we sketched out some ideas for the home page and the Support Us page. It wasn’t long before we made a decision on the home page:

Our earliest design for the home page
My initial designs for the Support Us page

Paper prototypes (desktop)

We started off by drawing some paper prototypes of how we thought the website should look. Here is the home page:

Mid-fi and hi-fi prototypes (desktop)

Creating the mid-fi prototypes was fairly straightforward, since we had paper prototypes drawn out already and we were able to divide up the labor. Further testing led us to change a few things, such as some headings on the home page.

The desktop home page in mid-fi
From paper to hi-fi
Evolution of the progress bar

Hi-fi prototypes (mobile)

After finalizing our desktop prototypes, we created screens on Sketch for every screen that we had on desktop. We decided to put the top nav bar in the hamburger menu, though notably, we decided to have the donate button hover at the bottom of the screen so that it’s visible at all times without cluttering the top nav bar.

The home page on mobile

Testing

We tested throughout the design process, totaling up to 14 user tests, which led us to make numerous changes along the way. For each stage, we gave our testers 4 tasks:

  1. Find out about donating physical items
  2. Find out about volunteering
  3. Find out about the housing provided by Mavis McMullen Housing Society

Support Us

The Support Us page went through a couple of changes. During the paper prototype stage, testing showed that we should mention the different ways people can donate:

Housing

While the website itself was primarily designed for donors, it was still very clear that occasionally, a prospective tenant would find herself on the website. This meant that it had to be clear how many vacancies were available, if there were any at all.

Donate

Our mid-fi design incorporated the most basic version of the embedded form from CanadaHelps. This form was quite long and did not fit our aesthetic, though it did still fulfill the necessary functions. Testing, however, showed that users preferred a shorter form, even if it would require multiple pages.

Summary

We understood that the goal of the project was to create a modernized, donor-friendly website for Mavis McMullen Housing Society. The old website had numerous problems, including poor user-friendliness, lack of transparency, etc.

Future considerations

Due to time constraints, we were not able to implement the following features, even though there is quite a bit of demand for them. However, they do represent useful functions and will probably be added at a later date.

Designated FAQ page

Currently, there’s no designated FAQ page. While the Support Us page does have some FAQs about donations, there could easily be more questions about other topics. A separate FAQ page would make it easier for users to find information, especially if prospective tenants were also using the website.

Online application for housing

Due to lack of housing units, there is currently no online application for housing. Ideally, there would be more space in the future, which means that an online application would prove to be useful.

Address attitudes towards low-income housing

The survey and interviews showed that not everyone is aware of low-income housing, nor do they realize how much of a problem housing can be in Vancouver. Going forward, this will have to change, and Mavis McMullen Housing Society would benefit significantly if people knew about these things.

Separate pages for “Support Us”

Since the Support Us page is quite long right now, it could potentially be split into 2 pages. This would reduce the need for scrolling and thereby increase readability.

Thank you for reading this UX case study for Mavis McMullen Housing Society’s website!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store