Website
Service
Website Migration
Custom WordPress Theme
Custom Plugin Development
Technologies Used
PHP, SCSS, JS (ES6), WordPress, Babel, MySQL, React, Next.js, Bootstrap 5
I was introduced to the company through a shared connection. I had a blast working with Rewind as a freelancer and later joined as a full-time employee. During my time at Rewind, I’ve worked on many different projects, many of which included their marketing websites.
Rewind helps businesses protect their SaaS and cloud data. Their backups solution has integrations with several apps like Shopify, BigCommerce, QuickBooks Online, Github, and more. Just like any other SaaS company, their online presence and brand are very important aspects of their business.
Rewind’s website was originally made using a visual builder (Divi). Divi worked well while the team (and the site) was small and didn’t have a developer, but became a burden once the site became too big to manage every page one by one. The site was slow (10s fully loaded time) and relied heavily on many additional plugins to handle things like sliders, forms, and popups.
All 700 pages of the website were made using Divi, which meant that you couldn’t disable it until every single one of them is not using the builder. The challenge was to convert pages into parts instead of doing everything at once. Both variants also had to look identical to keep a good user experience. The project had to be broken down into phases:
Website overhaul outcomes:
Rewind's website has several integrations to help meet the needs of its internal teams.
The site pulls all of the partners using the PartnerStack API and caches them via WordPress transients. This data is used throughout the site to personalize partner-related landing pages with partner-specific data. The site is also able to generate partner-specific landing pages without creating entries in the database using custom rewrite rules.
There is a form integration that styles HubSpot forms and adds new variants to them: a pop-up form and a multi-step form. Certain user actions are captured with HubSpot’s custom behavioral events.
Started as a Divi extension, this custom WordPress plugin is meant to show pricing for different products Rewind has to offer. Everything is controlled via WP admin: you can edit text, hide/show certain elements, and choose different price formulas (per-item calculations, tiered pricing, plan pricing, or a mix of 3). From a technical standpoint, the backend functionality is organized into PHP classes to make it easier to extend and manage. The front end uses vanilla ES6 Javascript and SCSS. The plugin is made to be extended outside of its code: there are several WordPress hooks baked in to let you add new features without changing the source code. There is also a custom JavaScript event that lets you make changes to the frontend based on the interaction with the price slider. This is used to personalize the page (like updating CTAs based on the slider value) and also tracking (like sending a GA event whenever a certain plan is shown to see demand).
Price slider outcomes:
As the site evolved, I had a chance to create a suite of custom Gutenberg blocks using React. The blocks are mirroring the component library created by the design team. This addition to the website allowed Rewind to create landing pages 3 times faster and enable more non-technical people to create them.
Custom block outcomes:
Every feature listed above is thoroughly explained in over 20 pages of documentation. There are docs explaining how to use the theme, where to edit the pages, and even what components are available. There is also a document for the third-party agencies that go over our setup and how to properly work with the site.
This project included setting up Google Analytics events for the most important actions on the website, such as: