UX/UI Design Case Studies

Yellow Brick House

Responsive Website Redesign

Establishing credibility and creating a safe space for victims and donors

The Back Story

Yellow Brick House (YBH) is a nonprofit based locally in Richmond Hill, Ontario, Canada. They offer support, shelter and counselling to victims of domestic abuse. 

According to the Canadian Women’s Foundation, The COVID-19 pandemic has led to spikes in domestic violence not just in Canada, but globally as well. Months of lockdowns and stay-at-home orders have left victims, many of whom were already facing violence from abusers, exposed to even more attacks. 

It was a crucial time for nonprofits such as YBH to reach out to victims in a way that didn’t draw unwanted attention to the victims themselves, as well as to provide a platform for donors to show their support in various ways.

The Task

My team (comprising of two other user experience designers) and I were tasked with reviewing the YBH website to assess any usability issues and to provide recommendations for a better user experience.

We got to work right away on our process, which involved 5 phases: Research, Define, Ideate, Prototype and Test… iterate and re-iterate!

Research and Discovery

After exploring the site and documenting any observations, we conducted 2 phases of qualitative and quantitative research on the pain points of users. We had one-on-one user interviews and distributed a Google survey. Our users came from all walks of life, between 16-60 years of age.

1. Phase 1 was used to get a general understanding of how users felt about donating online to nonprofits and if they understood the cause. (One-on-one interviews were conducted with 3 participants and the Google survey was completed by 12 participants).

2. Phase 2 was more defined and detailed in nature, thanks to insights from Phase 1 (One-on-one interviews were conducted with 5 participants and the Google survey was completed by 27 participants).

We also developed 2 separate proto-personas to help us describe our target users and audience, based on assumptions. Our two proto-personas were the victim persona and the donor persona. Because of time constraints, we focussed on the donor persona, but it was important to consider the victim persona for our user path.

This is what we found:

1. 67% of participants had never heard of YBH

2. 100% participants said they’d be happy to support the cause

3. An overwhelming 88% said that they would research this nonprofit either through google search, social media or the YBH website

Before being willing to donate or help in some way, all participants said that nonprofits should show credibility and accountability. They also felt that transparency was important and keeping their donors updated on their impact in the community from time to time was key.

Defining the Problem

With this valuable insight, we proceeded to define and frame the problem. A user persona and the following problem statement was developed:

The Yellow Brick House (YBH) website was designed to bring awareness to domestic violence issues and to provide easy ways for donors to show their support. We have observed that users don’t trust nonprofits because they don’t show enough credibility, which is preventing them from donating. How might we improve the user experience when visiting the YBH website so that donors are successful based on feeling good about donating to a worthy nonprofit with an important cause?

A Competitor and SWOT Analysis helped us assess the strengths and weaknesses of similar sites and a Heuristic Evaluation was conducted on the current site to see if it followed best practices. 

Our core findings at this stage revealed the following:

1. The YBH had an aesthetically weak front-facing website compared to other similar sites, optically not able to be perceived as a viable nonprofit.

2. Users found the site to be unengaging and although the menu served its purpose, more could be done to help users navigate the site more easily.

3. Their donation page looked unprofessional and there seemed to be a lack of cohesive branding on linked pages.

4. Users couldn’t quickly search the site to verify credibility, accountability or impact to satisfy them enough to want to donate or volunteer. 

These findings were key when it came time to redesign the user interface. By addressing these concerns, we felt that the user experience could be drastically improved.

YBH is a credible and accountable nonprofit. Their printed materials, such as their Gratitude Report and brochure are well designed and include vital information such as who their board members are, their mission statement and vision, as well as where their funding comes from and how it’s being spent.

However, this crucial information wasn’t being communicated well on their website – there was a big disconnect. This was one of the main reasons why many users were hesitant to donate. If more than half of our users weren’t familiar with YBH, then we needed to ensure that when they landed on the website, the experience would be excellent, complete with engaging storytelling and visuals and that they’d feel compelled to donate!

Ideating Possible Solutions

In the ideate phase, our Affinity Diagram and Empathy Map helped us isolate the pain points of users. A UX scenario helped us stay focused on the objectives and served as a guiding light when empathizing with our users. A user flow diagram showed us areas of improvement we needed to focus on.

Ultimately, these areas were:

1. For victims, to show them how to go about getting help from YBH

2. Allowing users to easily see the services and programs that YBH offered

3. To show the user that YBH was credible, accountable and transparent

4. For users to quickly and easily make a donation on the website

We plotted these as being high impact, low complexity on our Feature Prioritization Matrix.

Information Architecture

Our card sorting was one of the most valuable exercises in this project. We were surprised to see how relevant and crucial information was either hidden or non-existent, and less important information was more prevalent on their site. After re-organizing and structuring the cards, we finalized a sitemap. 

Prototyping our Vision

We developed wireframes based on our user flow. I developed the initial wireframe and then worked with another designer to expand on those wireframes, while incorporating feedback from our third team member. Once we were all happy with it, we proceeded to create a clickable prototype. Our moodboards were the inspiration for our UI Style Tile and Style Guide. 

Test, Test, Test

When it came time to test our prototype, we developed a Usability Testing Plan, outlining 4 different tasks for users to complete. 

These tasks were:

1. How would the user start getting help from YBH?

2. How would the user check the services and programs provided by YBH?

3. If the user wanted to check the legitimacy and credibility of YBH, how would they do that?

4. How could the user make a donation through the YBH website?

All user feedback was recorded and transcribed. We once again used a prioritization matrix to help us decide which iterations would be high impact and low complexity and updated our prototypes accordingly.

We then brought our low fidelity prototypes into high fidelity. 

Here’s a funny story! When we started exploring imagery to use for our homepage, we selected strong images we thought were impactful and would compel donors to help. After conducting some quick testing on what users thought of these visuals, we soon realized that the imagery could be seen as “scary” by potential victims and some donors may have had second thoughts about donating because of the strong visuals!

We then had to take a step back and think about how to position the “flavour” and “tone” of the site. How could we make it look lighter and friendlier, but still engaging enough so that potential donors would be moved to help, and victims could feel safe and comfortable using the site to get help and access resources?

Design Evolution from first iteration (left) to final iteration (right)

Measuring our Success

To gauge the success of our efforts, we compared the overall experience of users completing the tasks first on the old site, then on the redesigned one.

Our metric was the success rate and ease of use when completing tasks. The average success rate of completing tasks on the original site was 70%, whereas it was 100% on the new one. 

However, when comparing how much easier it was to use and navigate, there was a noticeable difference. On a scale of 1 to 5, with 1 being easiest and 5 being most difficult, users found the new site much easier to navigate and were able to complete tasks considerably faster. Not only that, but they commented that it looked more professional, engaging and was more visually in line with their branding, thus improving credibility.

Future Opportunities and Next Steps

In the future, we’d like to develop the website further, by implementing the following features:

• Users being able to receive updates and/or stories of how their donations were used

• Allow users to give feedback on their experience directly through the YBH website in real-time

• Create an online store, so YBH could sell merchandise with empowering messages to increase awareness and generate funding

Partner with well-known brands to support the cause, like grocery stores to supply shelters with food and hygiene items, apparel stores for clothing and home renovation stores to outfit shelters with furniture and building supplies. These partnerships would be promoted on the YBH website to increase credibility, and on each respective retail site demonstrating corporate social responsibility. It’s good for businesses!

Final Thoughts

And finally...how did we successfully work together as a team? We used a Kanban board to keep us organized and to manage the workflow. We met via Zoom and communicated through Slack. We conducted stand-ups every other day.

We also researched and educated ourselves on various aspects of domestic violence issues, as it was important to be able to empathize with victims and donors alike. Through our research and conducting user testing, we were stunned to find that domestic abuse is more common than we thought! In fact, some of our test participants had either directly experienced or knew someone close who had such experiences. This fuelled us further and kept us motivated to help a valuable nonprofit improve their site so that they’d be able to gain more support, funding and traction to continue the important work they do. 

At the time that this case study was conducted, we reached out to stakeholders at YBH. They showed interest in discussing the findings and reviewing the recommendations we had. Unfortunately, we were unable to connect after concluding our project. We will continue to reach out to them in the hopes that our recommendations will be used to expand awareness and support of their cause.

This project was enjoyable to work on because we engaged in meaningful work. We were able to make a difference in some small way… and that’s what makes it all worthwhile!