DevriX Case Study
Case Study
Kustomer
Kustomer has been working with DevriX on a development retainer plan for WordPress since August 2019. In this case study, we will focus primarily on the provided services to support their marketing team’s needs, up until April, 2020, in the form of:
The Constraint
Overhauling the usability of editing content
The Rebuild
Major speed improvements across the website
About Kustomer
Kustomer
Kustomer uses over 72 technological products and services including Google Analytics, WordPress, and G Suite (formerly Google Apps for Work).
Overview
About Kustomer
Kustomer is a customer service CRM platform built for managing high support volume by optimizing experiences throughout the customer service journey. Their platform helps brands quickly resolve conversations on all digital channels by automating 40% of interactions via self-service, reducing handle times with intelligent routing, and driving omnichannel experiences between customers and agents.
A detailed overview with helpful short videos outlining the core features can be found on Kustomer’s product page.
Below you will find the problems we faced in the Kustomer WordPress and the solutions we used to solve them, which wouldn’t have been possible without the tremendous cooperation from the Kustomer team! Thanks to them, we were able to iterate quickly, deploy on a weekly basis and work consistently on new additions to the site for months.
The Challenge and Its Solutions
The Challenge and Its Solutions
Client note
Kustomeron DevriX proving solutions for them
“DevriX has been a lifesaver for us! Their team stepped into a hasty, problematic WP setup and started making incremental changes that had a tremendous impact on site performance, all without disrupting ongoing builds.”
- Kustomer, on DevriX proving solutions for them
Our discussions were focused on the marketing side: building better looking pages and fixing various visual imperfections throughout the site. This, together with general speed and codebase improvements, which were highly needed, were two of our top priorities.
For this case study, we will be mainly focusing on the marketing side along with the elements that culminated in a better overall experience for both editors and users.
The Marketing Team Needs
The Marketing Team Needs - Editing and Visuals
The Kustomer team had two basic requirements - an easy way to edit all landing pages and a way to easily make new components available in the building process.
They also needed to improve the content editing workflow. The previous implementation of the site utilized Advanced Custom Fields (or ACF for short) . It’s a widely used plugin, which adds the ability to set custom fields through a UI. Users can manage them in a version control system (Git) and pull data easily through the front-end.
A note on Gutenberg
Gutenberg was disabled on the site through the classic editor plugin. It also requires more development, additional time and resources as well as a complete reworking of a lot of elements. For now, Gutenberg is not an option for the landing pages.
The first step
The first step was to investigate the codebase and the UI of these fields - how were they laid down, what data structures they had and so on.
We uncovered a few major problems:
Fields and settings
There were a lot of fields and settings for seemingly basic sections (components).
Hardcoded templates
Most pages (as page templates) were hardcoded with specific fields.
Inline CSS
The editing team had to work with inline CSS to achieve the needed look.
All of these problems were fixed on an ongoing basis through each of our retainer services.
Let’s look at them in a bit more detail:
Fix the Overly Complicated Fields
Fix the Overly Complicated Fields:
The UI of the fields was hard to follow. There were a ton of labels and fields with cryptic messages. The approach we decided on was to keep them as they were for now. We had to create new pages and use the time we had smartly.
Here is the plan we used:
-
Step 01
Keep existing landing pages as they were.
-
Step 02
Build new landing pages when needed with UI/UX fields that better explain each element, build separate sections properly and give helping tips.
-
Step 03
Remove the need for inline styles and allow global style management through CSS.
-
Step 04
Work on a new page template that would allow the editors to pick the sections they want and reorder them.
Each section had to be customizable and allow for different content.
We iterated through points 1 and 3 for the first few months while working on 4 (a builder-like template). With this, we were able to deploy new visual improvements on the site on a weekly basis.
-
Overhauling the usability of editing content
-
Major speed improvements across the website
-
Thorough UI improvements across the whole site and all components to achieve a better consistency and define stronger branding
-
Providing the freedom to build new landing pages similar to a page builder, but taking out the potential issues that a real page builder creates.
-
A gradual reworking of the previous codebase
-
The ability to consult each major feature of the UX, UI, approach, and timeline.
For each field
For each field, we had a few basic requirements to follow:
-
Intuitive
Place the fields right where you would expect them to be.
-
Be Easy on the Eyes
Format the layout properly and hide unnecessary fields behind toggles based on their context.
-
Restrain the Edit Freedom
While this sounds counterintuitive, the goal behind this is to reduce all edge cases caused by custom “magic” numbers. Instead of a specific HEX value for a color, we were to build a select field where users could choose from predefined colors. This strengthens the branding as well.
-
Provide Help
As part of the fields and part of the “welcome” section where goals are explained.
Most of the time, the same team members worked on the content changes, but if there was a need to onboard new editors, we made sure the process would be straightforward.
Hardcoded templates
What did we do with the hardcoded templates?
We kept them as they were, but we also had a long term solution in mind - the “builder” template. The new builder pages would replace the old hardcoded ones one by one.
Little by little, this would remove all old page templates and we could simply delete them without worrying about lost pages or 404 content. In the end, templates were reduced from a dozen or more to just a couple in use.
Strengthening the brand
Strengthening the brand
One other task was to improve the visual consistency across the site. Various small colors, fonts and spacing differences created a disbalance across pages.
Some of the main things we tackled were:
All of the above required careful review and rewrites of the codebase (thousands of lines of CSS ) while keeping an eye on all other components that could be affected by the changes. Once again, it was an ongoing effort that spanned months.
We iterated through points 1 and 3 for the first few months while working on 4 (a builder-like template). With this, we were able to deploy new visual improvements on the site on a weekly basis.
Success Indicators
Success Indicators
over 90 new pages created with it
A couple of months after the release of our new landing page ‘builder’, there were over 90 new pages created with it, each with a different order, and different elements and content.
Almost every new page used the new builder and the dependence on a developer for new pages was diminished.
More than 20% reduction in styling code
With even more planned in the future.
Double down the time to first byte on the first load of the pages. We’ve fixed internal loading issues which have improved site loading times.
Pricing plans page
-
Over 90 new pages created with it
A couple of months after the release of our new landing page ‘builder’, there were over 90 new pages created with it, each with a different order, and different elements and content.
-
Almost every new page used the new builder
The dependence on a developer for new pages was diminished.
-
Double down the time to first byte on the first load of the pages
We’ve fixed internal loading issues which have improved site loading times.
-
Improved UX issues regarding mobile navigation and accessibility
By reworking the header component. This also allowed for more content to be displayed to site visitors.
-
New custom page templates build
Custom templates are still a need, but thanks to the approaches described above, there are far less.
-
More than 20% reduction in styling code
With even more planned in the future.
What Is Next?
What Is Next?
We see a bright future together. Strong and reliable communication between DevriX and Kustomer is a strong indicator of that. We hope to continue expanding our editing capabilities along with the introduction of Gutenberg, build new integrations and further rework older components.
All of this would allow the Kustomer team to showcase their products in the way they deserve.
UX is an ongoing endeavor. We continue to improve on the site’s speed, clickability, typography, mobile and browser support.
Get Started
We demonstrated what DevriX can do here.
Now let's talk about your platform.
If your website has become a constraint instead of a growth engine, DevriX can help you rebuild the foundation.