MNP Debt

Screenshots of the MNP Debt home page on various devices.

The MNP Debt website provides people with quality advice they can trust for solutions to their business and personal finances.

But as is the case with many large multidisciplinary organizations where communications isn’t really the focus, the digital eco-system for MNP Debt had grown over time to amass siloed content on a legacy CMS framework not optimized for accessibility, mobile or tablet screens in any way. Beyond that and the obviously out-of-date aesthetics, the navigation and content structure were found to be difficult for both the consumers of the site and the authors maintaining the content.

MNP’s Digital Integrations team successfully implemented a complete overhaul of the MNP Debt digital platform.

Team composition

Senior Manager (Lisa Prentiss), UX designer (myself), and Senior Business Analyst (Vicki Gardner) worked from the Ottawa office remotely with the Senior Vice-President of Marketing (Randy Mowat) and content authors located at the Calgary office. The developer team was based in Ottawa.

My responsibilities

I spearheaded research, facilitated workshops, conducted user studies, validated designs, and managed UI development for the Minimum Viable Product (MVP).

  • Agile Scrum Stand-up meetings, Sprint Planning, and User Story validation.
  • Created high fidelity prototypes and UI Style guide in Adobe creative suite software.
  • Tested scenarios using personas and customer journeys.
  • Sketched storyboards, wireframed user flows, and prototyped with annotations for front-end development compliant with WCAG 2.0 (AA) accessibility standards.

Analysis and synthesis

Interdisciplinary stakeholders collaborated in a multi-phased process that began with an initial meeting to determine a strategy for the short to long-term business goals and the user and business needs of the project.

One of the main challenges was to create a meaningful yet flexible Information Architecture and navigation with a robust search feature that would appeal both to users as well as content authors.

Discovery Phase: Establish understanding of the problem statement and solutions.

  • Evaluated brand and marketing context.
  • User research activities included card sorting, surveys and interviews.
  • Audits showed up to 80% of the content was non-compliant to accessibility standards and up to 60% of pages were uncategorized and unsearchable.
  • Moderated whiteboard workshops producing a service blueprint.
  • And defined the Key Performance Indicators (KPI).

Design Phase: Test hypotheses and experimentation.

  • Facilitated design workshops (understand, sketch, decide, prototype, test).
  • Defined a solution with high-fidelity prototypes.
  • Formulated planning and prioritized features for development sprints.

Development Phase: Create the MVP.

  • Created UI style guide for development of grid and components deployed to Sitecore’s Live testing environment.
  • Performed enhancements to designs through iterative process with usability testing sessions.
  • Completed content migration and addressed authoring needs.
  • Tested for accessibility compliance.

Delivery Phase: Final implementation.

  • Validated designs and accessibility for deployment to Live public server.
  • Reviewed analytics and tracking of KPI with report of measurements for continuous improvement purposes.

Conclusion

With a user-centric approach the Digital integrations team performed a world-class overhaul of the MNP Debt digital platform.

Clear hierarchy, enhanced readability and coherent branding for the personal and corporate services gives visitors and authors easy, meaningful access to financial advice, media files, FAQ, directory, and contacts.

  • Simple, flexible and modular component-based style guide.
  • Intuitive navigation and searchable taxonomy with segmented topics with filtered results (3 themes, 5 types, 8 categories).
  • Legibility and usability were enhanced by applying gestalt principles with accessibility compliance.
  • New look built on the loyalty and trust associated with brand familiarity.

Home page

Before

Screenshot of the Home page before the re-design updates.

Home page

After

Screenshot of the Home page after the re-design updates were applied.

Corporate page

Before

Screenshot of the Corporate landing page before the re-design updates.

Corporate page

After

Screenshot of the Corporate landing page before the re-design updates were applied.

The new website was build with modular components, accessibility and progressive enhancement for optimal usability on mobile and desktop devices.

Screenshot of the new search topics.
Screenshot of the Ottawa West office page with contact and map widgets.