The Covenant House Case Study is a responsive website re-design for Covenant House California.

CHC_Flow

MY ROLE

User Research, Prototyping,
Visual Design

TOOLS

Figma, Photoshop,
Illustrator, InVision

TIMELINE

February 2020

background-image

THE PROBLEM

The Covenant House website is difficult to navigate.

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!

OUR SOLUTION

A newly designed website and brand identity that focuses  on telling the CHC mission story.

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. 

EMPATHIZE

We wanted to design for a cause.
How it started

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. 

About Covenant House

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.

The Protopersona

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.

chc_proto

RESEARCH

Having conversations and learning about our users. 
Qualitative Research

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. 

talk_1
Talk_2
User Interviews

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. 

Surveys

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. 

chc_survey_r
Affinity Diagram

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.

chc_affinitydiagram_2

DEFINE

Defining our objectives.
User Persona

With the key insights gathered from the affinity diagram, we created a user persona that we aimed to design for. 

chc_userpersona1
Competitive Analysis

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.

chc_comp_analysis

IDEATE

Identifying and exploring creative solutions.
Heuristic evaluation

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.

Feature Prioritization

With all the useful insights from our research, we brainstormed possible solutions for this re-design. Ultimately, we chose these as high-priority features:

  • Branding and Storytelling: photo-imagery, icons, mission statement  
  • Information Architecture: information organization
  • Donation CTA: donation options
CHC_prior

PROTOTYPE

Developing the wireframes.
Lo-fi prototyping and early usability testing

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. 

chc_lofi
Card sorting

With the site navigation being an integral part of the website, we looked into re-designing the navigation to be less confusing to visitors. We conducted nine open card sorting activities to get an understanding of how people organize information into categories. 

cardsort
Site map

We analyzed data collected from the previous card sorting activity and updated the site map accordingly.

chc_site3
test3

REFINE

Redesigning the CHC website.
Updating the logo

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. 

chclogowork
Updating the branding guidelines

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. 

CHC_style1
High fidelity prototype

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. 

CHC_Donate
chc_final

NEXT STEPS

The road ahead.
Talk with staff and volunteers

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.

Follow up with Shelby

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. 

Monitor KPIs

We want to connect with the web team and look at their Google Analytics data to get insight on website traffic donations. 

Connecting Covenant House to the Bay Area

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. 

KEY TAKEAWAYS

What I learned from this project.

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. 

CONTACT

Interested in collaborating?

OTHER