Mavis McMullen Housing Society provides women-led housing for low-income, at-risk women and their families. The primary tenant is always a woman, so it greatly reduces the need for a woman to stay in an abusive relationship just to avoid homelessness. Our UX team worked with Mavis McMullen Housing Society to deliver their project goal: a modernized website that presents information clearly and attracts donors.
Meet our amazing team:
As a UX designer, my role was to conduct research, put together a user persona, design some user flows, wireframes, etc. and eventually create mid-fi prototypes for both desktop and mobile formats. After testing, they were improved with UI elements to create hi-fi prototypes.
While the project focused primarily on UX, we all helped with UI as well. Winnie was more experienced than the rest of us in UI, so she took the lead in the UI portion of the project. Since good UI was one of the things that the original website lacked, we felt that it was necessary for us to create better UI for Mavis McMullen Housing Society. This included a logo redesign.
Design process
The project was split into 4 segments:
- Research (weeks 1–2)
- 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:
- Domain research
- Survey
- Interviews
- Gut test (UI)
These methods helped us gather data for the planning stage.
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.
We also looked at other websites such as the ISSofBC, The Bloom Group, UNICEF, and Aunt Leah’s. Ultimately, a significant amount of our inspiration came from the YWCA, since their website is quite well-designed. Our donation page was ultimately inspired by UNICEF’s, after we realized that embedded forms from CanadaHelps were customizable in appearance, not just in content.
Survey
We surveyed 21 people about charities, why they would donate, etc. A key finding from the survey was broken down as follows:
As seen above, the most important factor is transparency. Donors wanted to know how their funds would be used. Aside from that, they wanted to know what the organization has accomplished as well as their mission and values. This meant that our new website must clearly explain how funds will be used, which is information that’s not found on the old website.
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.
Below are our findings:
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.
We then highlighted certain categories to help us decide what to do with our design:
Not every category was highlighted. This is because some of the questions we asked were more broad and led to answers that weren’t particularly relevant to our design. For example, some people liked to donate to big, well-known charities with global reach, and Mavis McMullen Housing Society is very much a local charity that serves one particular area.
Even so, those who donated to global charities often provided other insights. For example, transparency was still a key issue, so that’s one of the things we decided to focus on.
Planning
Using the data we gathered, we put together the following:
- User persona
- 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):
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.
With the sitemap finished, we went on to create a user flow for donors.
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.
After the user flow diagram, we did a design studio session that gave us an idea as to how some of the pages would look.
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:
Ideas for the Support Us page varied more, though it wasn’t long before we all agreed that there needed to be a progress bar for donations:
With a basic idea of what we needed for some of the more important pages, we moved on to paper prototypes.
Paper prototypes (desktop)
We started off by drawing some paper prototypes of how we thought the website should look. Here is the home page:
Testing showed that the home page was easy enough to navigate. We did end up changing some of the headings to really grab users’ attention though.
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.
Since some sections of the home page weren’t impactful enough, we added more text and changed some of the headings:
In addition, the progress bar for the fundraising goal has also gone through some changes. The biggest changes were that we added an explanation for the progress bar itself, as well as a call to action:
We also decided to keep the wishlist separate, both to give the organization a little more leeway and to enable users to see more than just the current, most pressing item on the list.
We decided that a fixed header was necessary to ensure that the donate button is visible at all times. Having the entire top nav bar visible also meant that the user could navigate more easily.
When all the screens were finished, we made a clickable prototype using InVision:
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.
Note that the top nav bar is visible even if you scroll down, just like on the desktop site.
Here is the clickable prototype:
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:
- Find out about the impact of Mavis McMullen Housing Society
- Find out about donating physical items
- Find out about volunteering
- Find out about the housing provided by Mavis McMullen Housing Society
Here are the findings that led us to make changes to our design:
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:
Later, when we tested the mid-fi prototype, we found that the current fundraising goal should be more prominent on the page. So we moved it to the top:
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.
Our initial design only mentioned the number of vacancies under the description of each building. In part due to lack of contrasting UI elements, this was quite hard to find, and some users failed to find it altogether. This is why we decided to add a notice at the tope of the page to tell users that Mavis McMullen Housing Society is unable to accomodate more tenants at this time.
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.
After we found that the donation form provided by CanadaHelps can be customized in quite a number of ways, we decided to split the original form into multiple pages and customize its colours.
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.
Following RED Academy’s design process, we believe that we were able to design a responsive website that solves the problem and meets Mavis McMullen Housing Society’s goals.
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.
With these features added, we believe that Mavis McMullen Housing Society’s website will become even more usable.