.png)
Covenant House Digital Impact Report and UX Evaluation
Charity for youth experiencing homelessness, Covenant House, needs more user-friendly templates for its digital Impact Reports. An UX evaluation and outlines for improving the accessibility of the charity’s digital Annual Report would also be provided.
Strategy:
Research including competitive benchmarking, user personas, heuristics analysis, accessibility and WCAG testing culminate in digital templates and prototypes for passing onto the team.
Tools: Figma, Adobe InDesign, Photoshop, Illustrator and Quicktime.
Timeframe: Freelance project over 5 weeks.
Impact:
• Improved Donor Engagement: Streamlined and user-friendly Impact Reports are expected to increase donor engagement by making it easier to understand the charity's work and impact. This would lead to higher donation rates and increased overall fundraising.
• Accessibility for All: Enhanced accessibility features will ensure Covenant House's digital reports and annual report are inclusive and accessible for a wider audience, potentially including visually impaired donors or those with learning disabilities.
• Streamlined Workflow: The provided digital templates will save Covenant House staff valuable time and resources when creating future reports, allowing them to focus on their core mission.
The charity
Since 1972, Covenant House has opened its doors to over 1.5 million young people experiencing homelessness and trafficking. No one is ever turned away without support of some kind. And their services are available at no cost.
%20(1).png)
Background
COMPETITIVE BENCHMARKING
In 34 cities across five countries (United States, Canada, Mexico, Honduras and Guatemala), more than 2,200 young people sleep in a Covenant House bed each night. Through a strengths-based, trauma-informed practice model, they ‘help young people discover and develop their power to overcome adversity and achieve their dreams’.
To show off their achievements and demonstrate transparency, the charity produces yearly Impact Reports — one that shows figures from the organisation in general and individual Site Reports from each of their 34 cities. As well as these, Covenant House also provides a digital Annual Report on their website.
Defining objectives
To find out exactly what the charity needed, I first sat down with David Howard (Senior Vice President, Research, Evaluation & Learning), Lindsay Adamski (Associate Vice President, Data Analytics and Reporting) and Andrew Schrynemakers (Manager, Brand and Communications), all from Covenant House, over video call.
%20(1).png)
The main issue the charity was facing, from the perspective of their reporting, was that they wanted them to be visually appealing but the staff producing the reports weren’t necessarily very experienced with design software. So my task was to take their existing templates, which were created with the help of another designer and which the team was quite pleased with, and make them as user-friendly as possible.
During our initial interview, we also discussed Covenant House’s brand guidelines, including their corporate colours, fonts and elements. While these strict guidelines might be viewed as a constraint, I saw them as an important aspect in maintaining uniform branding across all 34 sites.
Research
CHECKING OUT THE COMPETITION
After chatting to the team about the project, I set out to see what approach similar charities took to their impact reports. Unsurprisingly, infographic styles were employed across the board — very few photos were used, it was all about the numbers and icons. I used Competitive Benchmarking here to note what worked and what didn’t. I then researched infographic layouts in Visme and Figma for further inspiration.
From the charity’s perspective, I also made sure to read all of the information on www.covenanthouse.org to get a feel for their motivations and general style of communication.
.png)
.png)
.png)
.png)
Identifying target audience
In the case of this project, there were technically two distinct ‘users’ — the staff in Covenant House that would be using the templates AND the readers of the final Impact Reports. So I thought that coming up with different user personas would be useful here to define both sets of needs and make sure I kept both in mind. Brian M. Cashman is a real member of the Covenant House board of directors…
.png)
.png)
.png)
Design
Illustrating the issues
After agreeing to meet up with the team again in a week’s time, I promised to have 2 distinct options ready for them to see — 1 corporate version and another one that was bit more imaginative. With limitations on the brand colours and fonts, as well as a lack of images, the style of illustration used was going to do a lot of heavy lifting on both versions. Iconfinder.com and Freepik.com were my free vector finders of choice.
First up, the conservative version…
For these, I used icons that were leaning towards illustrations. To give them depth, I added a second colour in Indesign to make them duotones. As I told the team later, this style would make it easy for them to keep the illustrations consistent across all sites going forward.
For the more imaginative option, I went for colourful, cheerful styles. The issue with these (as I highlighted to the team) was consistency. Even within the small selection seen here, there are very different styles and that could get messy.
For the second page of the report, I mocked up these variations on the icon style. Again, I was conscious of the staff that would be laying out these reports in the future so I didn’t want to do anything too complicated in Photoshop or Illustrator.
Delivery
Between sketching and playing around in InDesign, I ended up with 3 options to show the team. Design devices included rounded geometric shapes or slanted lines (something that echoes a feature in the digital Annual Report) and visually dividing the page vertically. These were all devices that the team could easily replicate in future Impact Reports.
.jpg)
.jpg)
User feedback
The duotone effect should be easy once they had a tutorial to follow. In terms of colour, different options were requested to differentiate the 2023 reports from previous years. Some elements were also deemed as too much of a departure from the brand guidelines.
Taking on this feedback, I made the necessary changes and returned the following week with tweaked designs.
Iterate and Improve
Taking the elements that worked and the ones that didn’t, I met with Covenant House on a weekly basis until everyone was happy with the templates. The final InDesign layouts featured duotone illustrations, easy Illustrator pie and bar charts and simple design devices to replicate.
.jpg)
At this point, I also played around with the animation function in InDesign and added some interactivity. Although these animated elements were a fun digital addition, the team agreed that the Impact Reports needed to be a smaller and more portable format than the EPUB file seen here.
FUTURE-PROOFING THE REPORTS
With the Impact Report templates finished, I wanted to make sure that some of the trickier elements — ie. the doughnut pie charts, bar charts and duotones illustrations — were straightforward to replicate in the future. Using Quicktime to record my screen, I made video tutorials of each for Covenant House staff to follow.
“The video tutorials make it so easy to follow the steps that you took, even for a much less experienced Adobe user like me. They are a great resource for us and will help make the process of creating the reports for all of our sites go smoothly this year.” Lindsay Adamski, Covenant House International
Annual Report evaluation
TESTING ELEMENTS
My first move was to familiarise myself with the content and test all the interactive elements. The architecture of the report, as well as all the links, videos and infographics all function effectively. I also tested the loading speed of the report to ensure it performs well and doesn't frustrate users with slow loading times. Finally, I verified that the digital report is mobile-friendly and responsive on various devices and screen sizes.
Using Jakob Nielsen's 10 general principles for interaction design, next up was a usability-based heuristics analysis. The report scored highly on Principle 2 (Match between system and the real world. Use words, phrases, and concepts familiar to the user, rather than internal jargon.),
Principle 9 (Help users recognize, diagnose, and recover from errors) and Principle 10 (It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks.)
One area to improve upon was Principle 8 (Aesthetic and minimalist design. Interfaces should not contain information that is irrelevant or rarely needed.)
From an accessibility angle, one thing I noted was the colour contrast. Some copy, especially when it combined the brand’s blue and pink, was hard to read. So I ran each colour combination through WebAIM’s Contrast Checker and found that a few didn’t pass the Web Content Accessibility Guidelines (WCAG).
.png)
.png)
.png)
.png)
Final deliverables included:
• 3 video tutorials for creating the trickier elements within the reports.
• Outlines for the new digital Annual Report, along with files that the web development team can use.
.png)
Key takeaways
My own personal takeaways from this project included:
• That there’s always a user experience to consider. What looked like a straightforward graphic redesign was actually about creating a painless process for the Covenant House staff (the users).
• The importance of accessibility: Although I was aware of and had dealt with contrast/font size issues before, this project gave me hands on experience in contrast checking and WCA guidelines.
• How to make video tutorials. Although I’ve trained junior designers and walked people through various processes over the years, I had never actually recorded a tutorial so that was a new experience.
• How to use the interactive elements of InDesign. While, ultimately, the animations didn’t work for this particular project, it was useful experience to gain.
Next project >