Diversity & Inclusivity Page at FreshBooks
July 2021
Lead Designer
Executives HR, Support Design, Engineering
Bringing a company’s values to life—without people, photos, or illustrations
As part of a broader company initiative, I was tasked with designing a new Diversity & Inclusivity page for FreshBooks’ corporate site. The goal was to communicate our values around equity, representation, and belonging, while also sharing the progress we had made as a company. This project came directly from the CEO and HR team and needed to strike the right tone—transparent, hopeful, and honest. But this wasn’t just about writing copy and laying out a few visuals. It was about translating a complex, nuanced cultural narrative into a digital experience that felt authentic, inclusive, and aligned with the new brand—during one of the most limiting moments in recent memory.
The Challenge
This project came with a unique set of creative constraints:
No team photography: Due to COVID lockdowns, there were no new employee photoshoots, and I wasn’t allowed to use pre-pandemic office photos unless individuals were members of the internal Diversity team.
No illustrations: The recently refreshed FreshBooks brand system had removed all character illustrations and figurative artwork from its visual language.
Limited visuals: Outside of typography, layout, and color, the only visual asset available to me was the brand’s new abstract leaf shape—a geometric symbol inspired by growth and transformation.
Designing a page about people, without using any people or human-centric imagery, was the core paradox I had to work through.
Goals
To guide the design process within the tight creative and contextual constraints, I established a set of clear design goals. These goals ensured that the page would not only meet the brand and stakeholder requirements, but also resonate with visitors in a meaningful and respectful way:
Communicate FreshBooks' Diversity Journey Authentically
Craft a narrative-driven page that transparently tells the story of where the company started, where it is now, and where it's headed—with a tone that feels honest, grounded, and aspirational.Align with the Evolved Brand System
Ensure visual consistency with the new FreshBooks brand guidelines, which removed illustrations and emphasized abstract geometry, by using the brand’s leaf motif in creative and meaningful ways.Create a Visually Engaging Page Without Photography
Design a rich, compelling experience despite the absence of team photos or human imagery—using layout, typography, color, and motion to convey warmth and inclusion.Highlight the Internal Diversity Team with Respect and Visibility
Elevate the contributions of the Diversity team through visual focus and dedicated content blocks, while following the brand’s visual constraints.Balance Structure with Emotion
Maintain a clear information hierarchy and layout structure that supports scanning, while still evoking empathy, sincerity, and forward momentum.
Approach
I embraced the constraints as a creative brief in disguise.
Build around narrative structure
With limited visual assets to work with, the content became the foundation of the experience. I approached the design as a storytelling challenge—structuring the flow to create a sense of momentum, honesty, and reflection. The goal was to guide the visitor through a thoughtful journey: acknowledging past efforts, recognizing present realities, and pointing toward future commitments. By shaping the content into a coherent, emotionally resonant narrative, I was able to create engagement and meaning without relying on typical visual cues like photography or illustration. The story itself became the visual spine of the page.Use the leaf motif with purpose
I used the brand’s new leaf shape as more than just decoration—it became a narrative and visual device. The shapes were layered, cropped, and animated subtly to imply movement and growth. They helped visually break up the content while suggesting forward momentum and progress.Design for clarity and trust
I leaned into strong typography, structured grids, and whitespace to give the content breathing room. A subdued colour palette reinforced the serious and respectful tone of the message. I also created dedicated highlight blocks to introduce the Diversity team members and gave their section more visual presence to honour their leadership.
Final Designs
The page launched on time and was well-received internally, especially by the Diversity team and executive leadership. It struck a tone of honesty and progress without relying on the typical visual tropes companies often lean on.
This project was a reminder that visual storytelling doesn’t always require people or pictures—it just requires intent. With the right structure and visual restraint, even abstract shapes and words can tell a very human story.
To bring depth and energy to an otherwise minimal visual system, I incorporated subtle motion throughout the page. Animations were used to introduce elements with softness and intention—like gently shifting leaf shapes, fade-ins for content blocks, and micro-interactions on hover. These dynamic touches helped guide attention, add visual interest, and give the page a more modern, engaging feel—all without overpowering the seriousness of the subject matter. Motion became a quiet but effective way to signal progress, reinforce flow, and breathe life into a static layout.
In the hero, I used the FreshBooks leaf shape in a variety of colors and sizes to visually represent the concept of diversity. Each leaf was intentionally different—subtle variations in scale, placement, and hue conveyed individuality within unity. The composition created a sense of movement and energy while reinforcing the idea that diversity isn’t about sameness—it’s about strength through difference. This simple yet symbolic use of the brand element set the tone for the rest of the page.
To visualize FreshBooks’ Diversity and Inclusivity journey, I designed a custom timeline that followed the shape of the FreshBooks logo, using its upward arc to symbolize progress and optimism. Key milestones were placed along the path, and each point featured a hover interaction that revealed deeper context—allowing visitors to explore the significance of each moment in a more engaging and meaningful way.
Adding animation wasn’t just a stylistic choice—it was essential to bringing the page to life. With so few visual elements to work with, motion played a key role in creating rhythm, drawing attention, and making the experience feel dynamic. Animations helped soften transitions, guide the eye through content, and give interactive elements a sense of responsiveness and intent. It added just enough energy to keep visitors engaged, while still respecting the tone and subject matter of the page.
