Maui Jim Sunglasses

An Integrated Design System and Site Wide Performance Boost

Maui Jim sunglasses recently undertook a redesign project with the stated goal of improving the performance of their e-commerce site. Chromatic was responsible for all front-end development activities. As part of this effort, we conducted detailed performance audits and leveraged benchmarks that were utilized throughout the entire project and advised the team on all potential areas of improvement. A design system crafted using lean components provided a significant performance gain upon implementation.

mauijim.com

The Challenge

Maui Jim needed to upgrade their e-commerce platform and wanted to expand their international presence. On top of that, they realized the upgrade would be an ideal opportunity for a redesign and a performance improvement plan. A major software upgrade, expanding their international presence, and a redesign– All at the same time. That's an ambitious list, especially without an internal web design or development team. Enter Chromatic.

Maui Jim Styleguide Screenshot
Comprehensive styleguide for MauiJim.com

The Solution

Chromatic created independent, reusable components curated into a component library that houses the code for each individual component. This library provides a user interface that gets used as a reference by many different teams on the project. Most important, it guides the implementation of the components on any digital property in the Maui Jim digital ecosystem.

For Maui Jim’s performance audits, we benchmarked their current production site, three direct competitors, and three indirect competitors in a similar space with performant sites. Chromatic then created ambitious, aggressive goals from those benchmarks and got the entire team on board with achieving them. Adoption is half the battle.

They are very interested in results without sacrificing attention to the details along the way.

In Conclusion

The end result was a redesign that makes it easier to iterate on new designs, and whose Speed Index was improved to 1/4th of the time of their previous production site. More traditional metrics, such as Start Render and Load Time, were largely cut in half.

Tell us about your next project.

Ready to learn more about partnering with Chromatic? Drop us a line here.

Contact Us