Get a Free Trial
Creating, executing, and maintaining reliable tests has never been easier.
The mabl team spends a lot of time thinking about the connection between software testing and the customer experience. That mindset impacts everyone on the mabl team, including those who manage the user experience across our website. As mabl’s Web Development Co-op, I’ve spent the last six months establishing what a better user experience looks like for the mabl community, what it takes to create those experiences, and of course, how we can test those changes. Now that my time at mabl is coming to a close, it seems like a prime opportunity to share these projects.
Working at the Intersection of Design, Brand, and Quality
Quality, particularly when defined by the perspective of the end user, encompasses functional and non-functional aspects. This includes anything from accessibility to API functionality, to performance and navigation. When thinking about how we could improve the user experience on our own website, we decided to focus on two key quality aspects: web performance and internationalization for our mabl Japan community.
Using CSS Modularization to Improve Mabl.com Performance
CSS (Cascading Style Sheets) is a style sheet language that’s used to edit HTML web components, including color, font, and layout features like borders. Since CSS can be used to create rulesets, it’s particularly useful when creating consistent, beautiful customer experiences at scale. When we started this project, mabl had a gigantic codebase that encompassed ~10,000 lines of code. This impacted how quickly the site loaded, particularly on mobile devices. By chopping those 10,000 lines of code into cleaner, modularized CSS components, we were able to significantly improve page load times.
The mabl team relies on Google Lighthouse to continuously monitor and improve web performance. On desktop, our site has been optimized to maintain a near-perfect score of 100, but those optimizations weren’t delivering the same high-quality experience on mobile. Mabl.com had an original mobile performance score of 58, which was fine, but hardly ideal. Shifting from a large, monolithic codebase to a more agile CSS components model not only improved our performance score, but has also made it easier to routinely review and archive any unused components. Our team can manage performance more efficiently over time, improving the user experience for the long term. Mabl.com now has a mobile performance score of 97, and we’ve reduced our average load speed to 2.8 seconds. These improvements ensure that everyone has a fast experience across all devices, and are an important step in building a better code base structure.
Improving the User Experience for Japanese Language Web Visitors
The mabl community in Japan has grown by orders of magnitude since starting in 2019. In response to this organic demand, the mabl team has launched and expanded Japanese language resources, including localized versions of mabl University and help documentation. To further enhance the user experience across our Japanese site, we recently introduced a few enhancements.
First, we introduced an improved font for Japanese, which covers the full Japanese character set while maintaining the distinct look and feel of mabl. We also updated our translations for stronger brand cohesion. Japanese language users will also notice that it’s easier to find valuable resources on software testing, test automation, and software development. The library now features a top resources section, which helps highlight the most important articles, videos, and guides to site visitors. The end result is a faster, higher quality user experience for our mabl Japan community.
We also made a subtle, but impactful, change to the language toggle button in the upper left hand corner of mabl.com. Users moving between the English and the Japanese version of the mabl website can select a language option from a menu, rather than simply clicking the globe icon. This sets the stage for multi-language support on mabl.com, so it’ll be easier for our team to add other languages to our site in the future.
These changes are real-world examples of how mabl delivers our vision of quality: building better software fundamentally means delivering better user experiences. These changes make the user experience better for multilingual users, and make it easier for our team to expand language offerings as mabl grows.
Software Quality Informs Better Coding Practices and Better User Experiences
As much as we talk about building quality into development pipelines, true quality engineering demands continuous improvement for the entire user experience, including in production environments. By considering the perspective of the end user in our website updates, we were able to improve the customer journey on mabl.com and make our site architecture easier to maintain in the long-term.
