Mercy House Website Redesign

Time Scope:
Three weeks
Members:
Roy, Beck, Korrine
My Role:
UX / Visual Designer
Tools:
Miro, Figma, Trello, photoshop.
Deliverables:
High-fidelity figma prototype, presentation slide deck.

For this mission, our team set out to revive MercyHouse's website. For a non-profit organization that aims to help reduce homelessness within LA county, MercyHouse needed to improve their website in order to enhance experience for its potential users.

Introducing Cindy V.
A 29 years old Psychologist from Santa Ana. Cindy wants to volunteer and give back to her community. However, her concerns are that she doesn’t know where to look and oftentimes, the organization's website tends to be very vague and boring.
We originally made 4 personas to start our research but we choose Cindy to base our research on because our team notices the difficulty of trying look for volunteering opportunity from passed experiences. So we thought that a successful organization website needs to provide transparency with its information and encourages users to take action. Of course we'll back this up in research down below.

Research

Thanks to our Proto persona, Cindy, our team came up with 15 questions that we used to interview 5 individuals who had volunteered, in order to understand their volunteering experience, what motivates them to volunteer and their pain-points about finding volunteering opportunity, and here is the data that we found.

Affinitiy Diagram
By grouping our data within an affinity diagram and eliminating the repeated response, we found some common theme:
  • Volunteering opportunities are pass along through word of mouth
  • Individuals want to feel connected to the organization and it's cause before applying.
  • Volunteering website are often very vague about the infromation they provide
Our interviews had a few hiccups as some of our interviewee didn't show up but we were able to interview with some others and got our data just in time for the ideation phase.

Introducing natalie

Natalie works for the library so she sees a lot of homeless people roaming around looking for public services. Being such a humanitarian, she wants to do as much as she can to help those who are less fortunate than her. She believes that everyone should at least have a roof over their head. Even though she works as a librarian her dream is to work for a non-profit organization due to her passion for humanity. She sees working and volunteering at mercy house as a first-step to get her foot into non-profit work.

Problem Statement

Mercy House website was designed to showcase MercyHouse as an organization and their achievements. However, it is also serve as a bridge that connects the organization to people who are passionate in solving homelessness.
‍
Through surveys and interviews, we learned that most volunteering opportunities are pass through by word of mouth and users want to connect emotionally with the organization’s mission. We also found that Organization’s website often lacks representation of available volunteer openings.

How might we improve the website experience so that so that our users have an easier time navigating and finding volunteer opportunities/ways to help?

Ideation

Next, we construct our user journey and figure out the specific problem that we need to solve, our team is now almost ready to build the website. However, before this can happen, we need look at our story board to understand how our soon-to-be develop website will benefit our user in her journey.

This is somFrom Natalie's Journey, we can deduct that Mercy's house new website will not only be easy to use but also captivating, interactive and transparent with all of its data.e text inside of a div block.
With our storyboard developed, the last thing we needed to complete our ideation phase is our user flow. With the user flow, we can keep track of how many pages we will need in our prototyping phase.

User Flow

When developing our user flow, we knew from the beginning that we needed the homepage because that is where Natalie is starting and then continue connecting the dots based on her characteristics and motives. At the end we ended with 5 main pages (Home, About, Donate, and Get Involve)
Our team has a bit of trouble starting the user flow since we didn't know where to start but by looking back at our story board, we got a clearer understanding of how Natalie discover MercyHouse's website, which in turn will inform us about which page to show. Our team also decided to split up "Donate" and "Take Action" as two different section because we saw "Donate" as a sit back method which means that it is an option for those who want to help but cant do it physically while "Get Involve" is for people who want to be physically involve. Now that we have all the pieces we need, lets get prototyping!

Prototype

For this step, each team members made their own sketch of the website and from there we will pick the best ones to create. Fortunately enough, the team love my design because it was one of the most dynamic and interesting to look at. Therefore, we all agreed to use the design I made.
After deciding on the preliminary sketch that we are going to use, we went to Figma and build our first low-mid fidelity prototype and started user testing with it. Through our testing we found several things that the website can improve upon.

First iteration

Things that we need to fix after doing several user test:

  • The sizing of our contents are too large and inconsistent.
  • Our donate page and application page looks too plain and need more work.
  • Images with black gradient overlay is hard to see and very murky, needs to find a different way of displaying this information.
Based on our test, the overall design of the website looks good so we only had to worried about is correcting the minor changes. We'll first make a style guide to follow so as we make the changes we can start applying some of the elements from our style guides.

Style Guide

Colors
Type-face
Image Choice

For Colors, our team wanted to change up the current color scheme that is on the original website but still keep its clean look so we decided to use shades of red. We feel like red is an appropriate color to use since it is the color of love and compassion. To balance off the red we used shades of grays for our body and header text.

For our type choices, our team agreed upon a rounded and bubbly san-serif fonts because round letters are often perceived as more welcoming and friendly compare to the more narrow-looking serif fonts. So we choose "Poppins" from our header and "Quicksand" for body text.

We struggled the most with our image choice because we couldn't seems to make them consistent. Originally our team wanted to use real photography images because user might connect more with a real photo however, the images we got were from different sources therefore, their style are very different. Given the time we had, there weren't enough time for us to use an image manipulator so we opted to use vector png images which happens to flow really well into our design.

Second iteration

For the second iteration of our prototype we went ahead and applied our style guide to our pages, made improvements on our donate and volunteer pages and did more testing in preparation for our final iteration.

We tested our prototype with 5 people and found that besides our donate and volunteer page (which need more improvements) there are only a few minor things we need to tweak and they are:
  • More consistency needed throughout our web pages (hero images, shapes and navbar, spacing of certain elements)
  • Reduce the size of everything as well as the footer section taking up such a large space.
  • Choose a different type of image or use a photo manipulator to add a filter which would help with consistency.
Our biggest challenge at this stage was our donate and volunteer pages. Both of them, as you can see, are a bit boring compared to the other two pages. We also couldn't figure out how to make our images consistent. We've changing the images to add gradient overlay but none of this method works...until we tried replacing them with vector images!

Final Iteration

Finnally! we are at our final iteration, as you can see we've made significant changes cross all of our pages in order to add consistency. This is what we've done:
  • We went ahead and reduce all sizes throughout all of our content, spreading things out, made sure spacing were correct.
  • Added vector hero images to all of our web pages. Reduced the footer size, as well as removing fill from our navbar.
  • Replaced images on volunteer page with vector images and added call to action throughout the categories.

In conclusion...

Working on this project was very fun and exciting. In terms of teamwork, our team worked really well together and was always unison in decision making. Our strengths and weaknesses compliments each other, though there were some challenges that we've faced, we're so glad and happy to see how it turned out. Unfortunately this is as far as we got given the time limit, however, in the feature we hoped to fully build out a housing application page, add a more detail job/volunteer description page and changing the red button to a different color. Thank you for coming with me on this journey, I Hoped you enjoyed!

View Project 3-
BEAUTry out MercyHouse's Brand new Design!View Project 2-
ReadyToGo