Redesigning the Beanfield Customer Portal 

My role was Lead UX Designer for the entire duration of this project, and Product Owner for the last 16 months. 

I spearheaded the complete redesign of the Beanfield customer portal, an essential self-service tool for both our residential and commercial clients. The existing portal was severely outdated, inaccessible, and struggling to meet modern user needs, leading to high friction and escalating support costs. It also lacked essential tools our customers needed, such as contact management.

Our primary goal was to transform the platform into a modern, usable, and WCAG-compliant digital experience, built on our scalable design system, Hopscotch,  to future-proof the product. The project was executed in two strategic stages: Residential first, followed by a tailored approach for our Commercial users.

To provide a focused look at the more sophisticated UX challenges, this case study will concentrate specifically on the redesign of the commercial customer portal. I'll showcase how we adapted the foundational design system to support the unique needs of business customers, including crucial features for bulk management and team collaboration.

The core challenges of the old portal were clear:

• The look and feel of the old portal did not match the digital brand anymore. Our marketing team had updated digital assets and brand guidelines, and the portal did not match anymore. We also had a new design system that all of our other products were using.

• The old portal did not comply with accessibility requirements of CRTC, or WCAG, posing a legal and ethical risk.

• The old platform couldn't support new features or business requirements, leading to poor adoption, user frustration, and high call volume to customer service.

• The old portal was not designed to be responsive.

• Goals of the Redesign: Explicitly state the desired outcomes.

  • Increase user satisfaction (measured by SUS)

  • Achieve WCAG 2.1 AA accessibility compliance.

  • Reduce support calls by enabling self-service features.

  • Future-proof the design with a scalable design system.

Design and Iteration:

• We were able to use the Hopscotch Design system, which is designed and built to support accessibility requirements, and provides consistency and efficiency for designers and developers.

• Wireframing & Prototyping

• Usability Testing:
  We conducted two rounds of remote usability testing for the Commercial prototype, proving our initial contact management workflow concept. We made adjustments to copy and some micro-interactions based on the feedback we received.

Information Architecture:

• I used a multi-level left navigation drawer for the navigation of this tool. This helped both improve usability, and become consistent with other Hopscotch Design System Applications.

Since the MVP version of this product is about to be released next week, I do not have any data to show as of now, but I can share how I'm planning to measure success.

Quantifiable Results:

• Accessibility: Achieved WCAG 2.1 AA compliance.

• Usability:
  I will be conducting usability testing in the production environment to measure how task completion time has changed for main workflows like bill payments.
  Business Impact:
  I am anticipating %35 less calls to our customer experience team, since certain services used to be only available via phone calls before this release.

Qualitative Results:

• Since we have added new features that did not exist before, we already know the user happiness will significantly improve.

• Having a single source of truth design system for out entire product portfolio makes stakeholders and developer's lives easier as we improve this application, making it easy to make small changes when needed.