State of Modern Philanthropy
Integrated Team:
Justin Bascos - UX/UI Designer
Irene Webber - Art Director, Illustrator
Sarah Augsbach - Illustrator, Animator
Elizabeth Pun - Copywriter
Kevin Freiberger - Web Developer
Overview
Each year, Classy releases, Classy releases this report to help nonprofit professionals make informed decisions through current industry trends. This report weaves data points into storytelling, which can be an overwhelming read if not balanced with visuals. Wanting to make a good user experience as customers and prospects navigated our report, my priorities in the project were to identify gaps in our current design, work with our dev to understand his limitations in updates to the UI, and plan for new ways to introduce engaging visuals throughout.
Working in tandem with Irene and Sarah, we successfully pitched our vision and executed the report alongside supporting promotional assets, ensuring that this campaign was cohesive and delivered within 3 weeks. The report ended up garnering 30,000+ views and driving $1.1 million in sourced pipeline.
Competitive Analysis
Before touching wireframes I kicked off this project by sourcing web reports from similar B2B companies, as well as marketing and design agencies to identify their strengths and weaknesses. My goal was to not only figure out what we should emulate but also what we should avoid. This analysis helped guide the design process, enabling us to create delight while boosting Classy’s brand equity as a thought leader in the nonprofit space.
Insight #1:
A Type Ramp Designed for Scanability
The current Classy type ramp utilized Telegraf extra-bold as the primary headline font. Though great for punchy, concise marketing copy, the heavy weight of Telegraf does not lend itself well to long-form content.
Therefore, I created a new type ramp reserved for our web reports. I elevated Cooper as the headline typeface from its usual designation to quotes. The more delicate serif font felt at home with our long-form content, giving our reports a more editorial look and feel.
Insight #2:
Graphs Created for Web Responsiveness
A growing number of our users access our long-form content using mobile devices making a responsive design one of my top priorities.
To ensure an optimal viewing experience for our users, I set up my files to accommodate two versions of graphics that the team would create (one that looks good on desktop, and one for mobile). I then worked in tandem with Irene and Sarah to ensure that their work was properly showcased within the report’s layout.
Insight #3:
An Accessible Table of Contents & Easy Navigation
Understanding how important and brief user attention can be, it was important for us to have an interactive and easily accessible table of contents (TOC) for users to interact with throughout the report.
Instead of a sticky nav bar at the top of the page I chose to design the TOC in the left rail, maintaining our older demographic of users’ established mental models.
Using the TOC, readers can quickly assess the content and decide where to focus their attention.
Conclusion
Our collaborative design strategy, guided by a thorough competitive analysis, allowed us to elevate Classy's web report for 2023. Emphasizing scanability, web responsiveness, and user-friendly navigation, our team’s approach amplified the report's impact YoY. Achieving 30,000+ views and $1.1 million in sourced pipeline, our design choices affirm Classy's influence as a thought leader in the nonprofit sector.