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



User Research, Prototyping,
Visual Design


Figma, Photoshop,
Illustrator, InVision


February 2020



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!


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. 


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.



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. 

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. 


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. 

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.



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. 

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.



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


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. 

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. 

Site map

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



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. 

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. 

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. 



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. 


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. 


Interested in collaborating?