Chamberlain Group Partner Portal Redesign

I was a User Interface designer on the redesign of a partner portal (eCommerce) for Chamberlain Group that reduced support call deflection, and increased visit frequency & order growth.

Key Contributions

User Interface Design

Team

Project Manager, 3 Developers, 2 UX Designers, Creative Director, Product Designer, myself

Tools

Adobe XD, Zepplin

Timeline

6 Months
August 2020 - February 2021

The Client

Meet Chamberlain, a leader in smart home automation that needed a modern rethinking of their dealer partner eCommerce portal.

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 Goal

A responsive easy to navigate platform that expanded the clients product offerings

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:

Goal #1:
Create a modern responsive update to the portal
Goal #2:
Incorporate modern eCommerce conventions to encourage upsells
Goal #3:
Ensure new platform was intuitive to reduce calls to support

Information Architecture

Organizing the product with their users in mind

The following information architecture diagram was developed to guide page and component development and ensure each design served the larger project goals.

The Grid

The guiding light of this design

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.

Design Direction

Overview

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.

Atoms

The building blocks of the interface

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.

Molecules

Forms and menus and search bars, OH MY!

The molecules are the next level up and are made of the atoms. These include things like forms, search bars, menus etc.

Organisms and beyond

It's all coming together

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.

THE FINAL PRODUCT

A modern interface that will grow with Chamberlain

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.