Challenge
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
Solution
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. 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. 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. 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. 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.
Results
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. 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.
Want fresh marketing stories in your inbox?
Get the weekly email that makes you a marketing genius.
Stay informed and inspired, for free.