Kustomer has been working with DevriX on a WordPress development retainer plan 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:
- 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.
DevriX takes the time to truly understand your goals and challenges, and then outlines the best course of action. They are reliable, knowledgeable and fast-paced, functioning more as an extension of our own team than a third-party agency.
— Kustomer, on partnering with DevriX
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.
Kustomer uses over 72 technological products and services including Google Analytics, WordPress, and G Suite (formerly Google Apps for Work).
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
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 – 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 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:
- There were a lot of fields and settings for seemingly basic sections (components).
- Most pages (as page templates) were hardcoded with specific fields.
- 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:
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:
- Keep existing landing pages as they were.
- Build new landing pages when needed with UI/UX fields that better explain each element, build separate sections properly and give helping tips.
- Remove the need for inline styles and allow global style management through CSS.
- 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.
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.
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
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:
- Removing similar elements and replacing them with a consistent one. Example—Two buttons with different classes and HTML structure were merged into one.
- Reducing color variations — Slight hue differences were merged into the one defined by the marketing and brandings team at Kustomer.
- Defining stronger typography rules — Reduce font properties and variations like size, color, line-height and more. Set rules for heading size and spacing. Use more consistent colors.
- Spacing — Reduce the spacing differences between elements to create a more coherent look and feel across different sections and landing pages.
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.
Success Indicators
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.
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?
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.