In April 2018, Infusionsoft underwent a comprehensive rebranding project, focusing on enhancing customer experience. The initiative included a vibrant new color palette with improved contrast for better usability, a switch to a readable yet personality-filled font, and a simplified logo design. The website underwent significant changes, featuring streamlined navigation, user-friendly controls, and the removal of barriers like gated content, offering free access to educational materials.
Timeline
During the second half of 2017, the marketing and brand design teams engaged with an agency, ZURB, to help with reimagining and redesigning the Infusionsoft brand and website. The goal for this project was to publicly launch the new website in mid-April of 2018. The final deliverables from the ZURB team would include a set of brand guidelines and a style guide for the website. They would also deliver a basic style system and some HTML for new components created with Foundation for Sites, a front-end framework for creating responsive websites.
In February 2018, development began. Since this brand refresh was so extensive, we made the decision to start with a fresh new Laravel installation with an all new style-base rather than starting with our existing repository for a few reasons:
- The “Knowledge Center” (Infusionsoft's blog) would be moved off of it's subdomain and onto the primary domain.
- We could take advantage of the latest version of Laravel
- We wanted to migrate our Gulp-based asset compilation process to Laravel Mix, a more modern Webpack-based bundler.
- Changes made to the existing live website would not cause “git merge hell” on launch day
to launch 🚀
After ZURB delivered final assets to us, our internal brand designers took the final brand guidelines and began applying the new styles to existing pages that were not part of the scope of deliverables from ZURB. Design and development worked in tandem until all pages were completed.
Project challenges
One of the major oversights during this project was the stack that the web deliverables from ZURB were developed with:
- Their build system was a Gulp and Webpack bundler that output static CSS, JS, and HTML. We would be using Laravel Mix.
- The templates, pages, and components were written using the Handlebars templating system. We were using Laravel Blade.
- The Javascript was written using jQuery, which we were actively trying to replace with vanilla JS. Browser APIs and general cross-browser compatibility was getting much better and jQuery was starting to be seen as unnecessary.
While the SCSS written by ZURB could easily be ported over, things like the Handlebars templates were not compatible with the templating system we were using. This meant that most HTML and Javascript had to be re-written. While this slowed down development, we were still able to port everything over in time.
Ready for takeoff 🚀
In the days leading up to launch day, we completed our production checklist, including syncing with our SEO manager to ensure all SEO metadata was in place, ensuring all redirects from the old blog to the new were set up, updated sitemaps were ready to submit to Google for crawling, and testing all lead forms with our marketing operations team.
On April 18th, 2018, the new Infusionsoft website went live to the world. We monitored the performance of the site in real-time to ensure that everything was operating smoothly and make sure that there were no spikes in server errors and/or broken pages sending 404s.
Post-launch & Keap
We continued to incrementally redesign pages that only got a quick refresh during the initial launch. We also created and launched a dedicated “Brand” page (hidden behind Okta authentication) as a fast-follow to send out to our partners to help them update their branding of our products and advertising.
Our relationship with ZURB continued even after launch, as we contracted them to help us design a set of interactive demos that would help us showcase a real-world example of how Infusionsoft could help you run your business: capture and meet leads, earn deals, and get paid. These demos were then developed by our team and launched across various pages on our website.
Less than a year after the launch of the new website, Infusionsoft rebranded to Keap.