Chamberlain, an industry leader in smart home automation, needed a modern rethinking of the purchase order system their dealers partners used to purchase inventory.
I was brought on to the product team to help redesign this system in an effort to reduce support calls, increase dealer visit frequency and order growth, and allow Chamberlain to expand to a broader ecosystem of services.
One problem with the old portal was that it focused solely on eCommerce, and they needed to expand to a broader ecosystem of services. The other was that it wasn't built to support mobile devices and needed to be redesigned to better encourage upsell opportunities and product discovery.
A robust set of information architecture documents were created to clearly map the entirety of the updated dealer portal. As you can see below, great care was taken to plan the application down to the smallest detail.
One of the benefits of working with a company as large as Chamberlain is the pre-existing brand collateral, including typography, colors, and styles. We did not need to reinvent the wheel but instead apply their existing design language to a suite of modern, mobile-friendly tools.
The system was built with the existing Lift Master brand colors. The only addition was a few accent hues.
Like the color choices, the design system implemented existing brand type for all modules.
We used a modified version of the Atomic design process by beginning with developing our grid and determining layout guidelines for various elements, including images and form components.
In the atomic design process, atoms are the most basic building blocks of an organism (in this case, a web page). These included things such as buttons, input fields, and links.
The molecules are the next level up and are made of atoms. These include two or more atoms that function together—like a form field.
Once the individual components were created, we grouped them into a higher level of design (organisms) and then further into templates or pages.
After all these levels were completed, we organized everything as one cohesive system in Zeplin. This way, every team member and future designer could access the most current designs, saving time for the important work.
Click here to view adobe xd files
Click the arrows below the image to scroll through screens
Click the arrows below the image to scroll through screens
Click the arrows below the image to scroll through screens
Once the designs were complete, they were handed over to the engineering team, who would add final touches and implement them.
To ensure that everyone was on the same page, we had bi-weekly handoff meetings where my design team would meet with the engineers and managers and take them through our changes.
A modern interface that will grow with Chamberlain
60% fewer Support calls
+7.2% average order value
The most immediate effect we saw in the new portal was a massive 60% reduction in support calls. This was mainly due to the increased discoverability of product features in the new portal. Improvements were also made to ensure their products were more accessible, which led to increased sales across every vertical.
After implementing this system, they saw an increase in upsell opportunities when the new system made it possible to shift their focus towards increasing average order value.
Thanks to the utilization of the Atomic design system, we ensured that their design system would thrive, just like their business.
