The Covenant House Case Study is a responsive website re-design for Covenant House California.
User Research, Prototyping,
Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!
In this 2-week group project, our team redesigned the CHC website to be more mobile responsive and to tell the Covenant House story and mission statement. The project scope will include updating the company's visual branding and the full website update.
For this project, we chose to work with Covenant House California (CHC) becuase we wanted to d o our part and help fight the homelessness crisis in the SF Bay Area. We ultimately decided to direct our efforts with CHC because of their company values and mission statement.
Covenant House is a non-profit organization that that provides sanctuary and support for homeless and trafficked youth, ages 18-24 across the US and parts of Mexico/Canada. They serve over 4,700 youth a year, providing services to meet the physical, emotional, educational, vocational, and spiritual well-being of young people, in order to provide them with the best chance for success in independence.
We created an initial protopersona to start in a general direction from our group's experiences with non-profits. We started conducting interviews to get a pulse on our target audience shortly after.
We reached out to Shelly, CHC director, for an interview and pitched our project plan to re-design the CHC website. She was very excited to see where the project will go. We learned that"superstar" volunteers have been the only bridge between CHC and prominent tech firms. Shelly also expressed her frustrations in difficulties connecting with prominent tech companies around the bay area. From there, we shifted our focus to address some of these insights.
We conducted seven user interviews. We learned that all interviewees have donated or volunteered before. People are drawn to non-profits with good mission statements that connect with them. They're more inclined to trust non-profits either through word of mouth endorsements or through a company endorsement program. We also learned that people liked having convenient options to donate or volunteer, and loved hearing success stories and the direct impacts of their contributions.
We sent out an anonymous survey and received 33 responses. We learned from the surveys that 93% of respondents have donated or volunteered before, some even contributing annually. They discovered new non-profits primarily through word of mouth and online searches. When asked whether they wanted follow-up, 84% of respondents said they just wanted to help out.
The data collected from user interviews and surveys allowed us to understand the goals and pain points of our targeted audience. With these key insights, we created our user persona.
With the key insights gathered from the affinity diagram, we created a user persona that we aimed to design for.
We conducted an analysis of similar non-profit organizations that operated in the same space as CHC. We looked into their mission statements, company branding/reach, and services offered.
To ensure we addressed any and all critical elements in the CHC website, we conducted a heuristic evaluation and labeled elements that needed to be addressed.
With all the useful insights from our research, we brainstormed possible solutions for this re-design. Ultimately, we chose these as high-priority features:
We mocked up lo-fi pages that provided a general structure for the website, using a 12 column grid for desktop and a 2 column grid for mobile. We also applied a 3-column copy block in areas where we could tighten up content.
We conducted early usability tests to identify problems early on in the process. and noticed users were having difficulty with the original site navigation, many times confusing different pages for others.
We learned that branches get to customize the logo as long as it followed corporate guidelines, so we updated the CHC logo to be more unique. We started with some hand lettering concepts on paper before moving onto the digital space. We ultimately decided to re-design CHC to have two logo versions for more versatile use cases.
We researched into other Covenant House branches across the US and learned that some of them have different branding than the corporate website. Shelby also confirmed that each branch is in charge of their own website.
While keeping to the original Covenant House Colors the same, we added primary and secondary colors, icons and fonts to keep everything visually consistent and pleasing.
With the new site map, users were no longer experiencing problems with navigation, but still ran into difficultues with identifying links and CTAs. So, we made further changes to the CTA styling.
We want to understand how the Covenant House staff and volunteers interact with the website. While we re-designed the event page for more visibility, we want to see if there are other ways we can improve their experience.
In our last talk with Shelby, we were discussing plans to redesign the website. In our next meeting, we want to present all of our findings and hi-fidelity prototype either to hand off the project to their web team, or take the discussion further and talk about iterations, changes or the implementation process.
We want to connect with the web team and look at their Google Analytics data to get insight on website traffic donations.
Shelby mentioned that although the LA shelter has a lot of Hollywood figures to support its initiative, the bay area presence is lacking. We want to use design and research to help Covenant House California break the barrier the Silicon Valley crowd.
Overall, I had a wonderful time redesigning a Covenant House website because felt the potential impact this project can bring to CHC. It wasn't about how can we make a website prettier, but how can we make website more impactful for the right audience. As we finished the second iteration of the hi-fidelity prototype, I became curious; how can design and research help the organization in ways beyond just the website? Design can be applied to a variety of experiences that can be felt throughout the organization. The possibilities are endless.