FreshBooks Website Home Page Redesign
Jan 2024
Lead Designer
Product, Marketing Sales, Design, CRO Engineering, Exec
A Website Redesign That Was Overdue
FreshBooks is a cloud-based accounting platform built for small businesses, freelancers, and service-based professionals. It streamlines tasks like invoicing, expense tracking, time logging, and financial reporting, making it easier for users to manage their finances and focus on their work. I had the opportunity to work at FreshBooks as a designer for nearly 8 years, where I helped shape the user experience across a variety of projects—from product features to large-scale initiatives like a full website redesign. FreshBooks last underwent a full site redesign in 2016, powered by WordPress. Since then, the company refreshed its brand twice (in 2019 and again in 2023) leaving the website visually and strategically out of sync. In 2024, FreshBooks prioritized a comprehensive redesign to realign the site with the updated brand and evolving product, while also aiming to improve conversion rates and strengthen brand consistency across all touchpoints.
We Found Issues
As the business evolved and scaled rapidly, the website struggled to keep pace. It no longer reflected the maturity of the product or the clarity of the brand. Through a mix of internal audits and user research, we uncovered several critical issues impacting both user experience and business performance:
Outdated. The website was outdated and no longer matched the company’s visual identity and product.
CTA Confusion. Our research discovered that 78% of visitors thought the CTA buttons were confusing and unclear at times.
Overwhelming. Visitors experienced cognitive overload due to cluttered layouts and poor content hierarchy.
1st Impressions. At first glance visitors had difficulty understanding what FreshBooks is or does as a company.
Inconsistent. We found inconsistent design elements, including button styles, colors, and UI patterns.
Unorganized. We also found uneven layouts and spacing, revealing a lack of a cohesive grid system.
Bugs. The website had numerous bugs and broken experiences, stemming from legacy code and outdated components.
Accessibility. The website failed AA standards due to low-contrast CTA buttons and poor readability.
Challenges We Encountered
While multiple teams were aligned and committed to the website redesign, there were strategic business considerations that introduced certain constraints and limitations. These guardrails shaped the scope and approach of the project. Here are a few of the key challenges we had to navigate around:
Content. Content updates were off the table, which meant rethinking the website experience had clear boundaries. We had to design around existing copy, limiting how much we could shift messaging or restructure the narrative flow.
Dev Constraints. We faced technical constraints from the development team, particularly around performance. There was strong pushback on adding animations, as they were seen as a risk to meeting key website performance benchmarks.
Hesitancy. Stakeholders were cautious about momentous changes due to concerns that it could negatively impact conversion rates. We relied on previous CRO A/B testing to help drive our design decisions that helped align the team.
Redesign Goals
Based on the issues uncovered with the previous website, we aligned on a set of clear, strategic goals for the redesign—goals that would not only improve the user experience but also better support broader company objectives. These goals focused on increasing conversion rates, ensuring brand consistency, improving accessibility, and creating a scalable, modern design system that could grow with the business. By grounding our approach in both user insights and business needs, we aimed to deliver a website experience that felt cohesive, intuitive, and performance-driven.
Branding. Update the site’s visuals to reflect FreshBooks’ new modern brand identity with consistency and clarity.
Clarify CTAs. A key goal was to clarify CTA buttons by improving their labeling, hierarchy, and visual consistency to reduce user confusion.
Focus. Simplify page layouts and content to reduce cognitive overload, helping visitors focus and navigate without feeling overwhelmed.
Show what we are. Clearly communicate who we are and what we offer, making the product feel tangible from the moment visitors arrive.
UI Consistency. Establish a unified design system to ensure visual and functional consistency across the website and product, creating a seamless end-to-end experience.
Grid System. Implement a responsive grid system to organize content across all devices, ensuring the website feels clean, polished, and visually balanced.
Reduce friction. Reduce excessive clicks by improving UI elements, allowing users quicker access to important and relevant information.
Accessibility. Make sure the website passes AA Accessibility Standards so that all users, regardless of ability, can easily access and navigate the content.
Approach
Before diving into the redesign, I wanted to better understand who was visiting the website and how well it was meeting their needs. To gather these insights, I used a third-party tool called Ethnio to intercept visitors and schedule user interviews. After completing the interview process, clear patterns began to emerge—many of which confirmed our initial research findings:
The homepage hero was confusing and didn’t effectively communicate that FreshBooks is software.
Visitors were generally able to find the information they needed, but it often required more clicks than they preferred.
When evaluating accounting software, the most important factors were ease of use, feature set, fit for their specific needs, and price.
Our visitor segment
These insights were also consistent with our broader research, which showed that most website visitors were small businesses, typically falling into one of four groups:
Freelancers & side hustlers
Self-employed business owners
Businesses with contractors
Businesses with employees
With this in mind, I restructured the website’s information architecture to prioritize the content and messaging that mattered most to our key audiences. We also prioritized homepage features based on the specific needs and motivations of each visitor segment, ensuring the most relevant benefits were surfaced first. This segmentation-driven approach helped visitors see themselves in the product more quickly. We validated this structure through A/B testing, which gave us confidence in its effectiveness and impact on engagement.
Old vs New Brand
The updated brand introduced a darker, more modern color palette and replaced the iconic leaf with a new primary design element: a rounded doorway shape symbolizing openness and opportunity. Alongside these visual changes, the brand also refined its elemental hierarchy—defining clearer rules for typography, color usage, and visual components—to better guide design decisions across both product and marketing. This shift brought more clarity, cohesion, and flexibility to the overall design language.
Explorations
In the early stages of the redesign, I explored a range of concepts that balanced business goals with user needs. My focus was on creating a clean, modern experience that reflected the updated brand while improving usability across the site. I experimented with layout structures, typography, and visual hierarchy to bring clarity to key messaging and streamline the user journey. Using the global design system as a foundation, I iterated on multiple directions—testing different approaches to content density, imagery, and interaction patterns—to ensure the final design felt both intuitive and aligned with the needs of small business owners.
Final Design
The final design emerged after several rounds of concept exploration, ultimately landing on a direction we felt confident launching. The updated visual style features a darker, more modern color palette that aligns with the refreshed brand. Photography was removed from the hero section and replaced with product UI, offering a clear, immediate understanding of what FreshBooks does. The signature doorway shape evolved into a more angular form, adding energy to the layout and helping guide users' attention to key areas. We also removed promotional offers from the homepage, as A/B testing showed they didn’t positively impact conversions. Trust-building elements like star ratings were repositioned just below the hero but remained above the fold, enhanced with an auto-scroll effect to highlight more reviews and reinforce credibility.
A Key Area to Point Out
In the old design, the features section served as a jumping-off point to individual feature pages, but it used a carousel format that displayed only one feature at a time. Through user interviews, we discovered this interaction was a source of frustration—users had to click multiple times just to view all available options, adding unnecessary friction and slowing down their path to key information.
The redesigned section uses a bento box layout that displays all key features at once, allowing users to access any feature page with a single click. We prioritized the most popular features using insights from user interviews and heat maps, ensuring the most relevant content had greater visibility. To validate this direction, we created a prototype and tested it with users, which confirmed that the bento box approach offered a more intuitive and efficient experience. This redesign significantly improved usability and engagement compared to the previous version.
