User Interface Design
Project Manager, 3 Developers, 2 UX Designers, Creative Director, Product Designer, myself
Adobe XD, Zepplin
August 2020 - February 2021
Chamberlain is the parent company of LiftMaster and MyQ. I was brought on to the product team to help execute a redesign of their eCommerce dealer partner portal. Their old portal was difficult to use and their customers were having to make frequent calls to Chamberlain support. They also wanted to expand the portal to enable them to tackle more verticals.
The problems with the old portal were that it was solely focused on eCommerce and they needed to expand to a broader ecosystem of services, it wasn't built to support mobile devices and need to be built to better encourage upsell opportunities and product discovery, and needed to built to provide personalized capabilities for the unique roles of our visitors
The target KPIs are support call deflection, visit frequency, and order growth.
The main goals of the revamped website were:
The following information architecture diagram was developed to guide page and component development and ensure each design served the larger project goals.
We used a modified version of the Atomic design process but beginning first with developing our grid and determining general sizing guidelines for various elements including type, images and form components.
On benefit 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 being a few accent hues.
In the atomic design process, atoms are the most basic building blocks of an organism (in this case, a web page) These included buttons, input fields, links and more.
The molecules are the next level up and are made of the atoms. These include things like forms, search bars, menus etc.
As we continued designing pages for the design system, I organized components as symbols to be used as a Zepplin library for future projects. This way, every team member and future designer would access the most current designs, saving time for the important work.
We designed various pages and use-cases on 3 different breakpoints using the components we had developed. The page designs were based on the low fidelity prototypes created by the UX team.
This robust design system ensured Chamberlain had a great-looking initial launch that met and exceeded our KPI goals. It was built to be fluid, flexible and future-proof.
Feedback on the design? Want to chat over coffee about design systems? Find me on LinkedIn.