Revamping Legacy

Giving users autonomy over their portfolio management and eliminating business inefficiencies.

I led the design of a new self-serve reporting feature within an outdated legacy product, enabling users to easily generate customized reports. To support this, I created a modernized design system that not only elevated the reporting experience but also laid the foundation for a phased redesign of the entire platform, including improved navigation and usability.

Industry

Mortgage Insurance

Product

Web Application: MI Online

Project

Modernize a Legacy Product

My Role

I was brought into the Customer Experience Team as a solo UX/UI Designer to modernize and enhance MI Online

My responsibilities included: Requirement gathering, Research, Wireframes and Prototype, Usability testing/UAT/QA

Project Details

3 months - Remote

Team: Stakeholders (Sales Rep, Customer Ops, Loss Mgmt., Legal), Developers, Business Analysts, product owners, UX/UI Designer (me!)

Constraints & Challenges

Legacy product with a complex history

Tight timeline - short amount of time to get acquainted with the product, conduct research, and exploration

No direct access to external product users

Scope creep and shifting priorities

Labor force reduction (project manager was laid off) and lots of ambiguity

Bridging User Pain Points and Business Needs

We conducted a Customer Survey to better understand the current experience and identify user pain points and challenges. We also interviewed the Customer Care Team to learn about their challenges. Both internal and external surveys shared commonalities, revealing that the product modernization was critical to provide users with a smoother experience and instant access to data, and to eliminate time consuming manual tasks for the business.

Hypothesis

We believe that introducing a self-serve reporting feature while enhancing and unifying the look and feel of the MIO platform will boost customer engagement, enhance satisfaction, and significantly cut down on Customer Care team hours dedicated to report creation.

Objectives

Automate Reports

Allow users to create Portfolio data reports.

Implement A Design System

Adopt a cohesive and brand-aligned interface.

Eliminate Inefficiencies

Eliminate redundancies and confusion.

Finding Reports a Home

Before housing the Reports feature in the Navigation Menu, we wanted to ensure that the overall navigation was optimized, as customer feedback revealed flaws with the navigation.

I conducted a Card Sort and hosted an engaging workshop with cross-departmental Stakeholders to define the new Navigation Menu.

Existing Menu | Problem Areas

No indication of, if any, submenu items.

Small font

8+ navigation items

Not scannable

Inconsistent UI patterns.

Same functionalities listed under multiple primary navigation items.

Redesign | Iteration 1

Enhancements

  1. Removed redundancies and regrouped items based on the life cycle of a loan.

  2. Consistent UI patterns and interactions.

  3. Left side navigation panel because:

    • Easier to scan

    • Easier to scale as the product grows

    • Transitions naturally to smaller viewports

However…Feedback

  1. No clear indication which primary menu item had submenu items.

  2. Floating submenu items were problematic when opened over page content.

  3. To select a secondary navigation item the cursor could not leave the primary navigation item, making it hard to select.

Refine | Iteration 2

Enhancements

  1. Visual cues to indicate existence of submenu items.

  2. Removed floating submenu items, opening the submenu to the bottom of the primary navigation item.

  3. Modifications made the navigation format and pattern consistent across viewports.

Embracing Brand Guidelines

Design System & Style Guide

  • Developed a Design System and a Style Guide to ensure consistency across site.

  • Negotiated with the MKTG team approval of a new AA passing teal for text because the brand teal did not meet accessibility requirements.

Concepts: Brainstorming Solutions

After numerous conversations with stakeholders, data reviews, and wireframe iterations, we opted for a single page that would allow users to select their report parameters in the same page - we put this to the test with usertesting.com.

I designed two dashboard using different page structures and language, seeking to understand user preference and communication clarity.

Validating Concepts: Usability Test

Refining Concepts: Iterating for Success

Lessons Learned

Find back channels

  • When you are siloed from other resources working on the project (e.g., dev), find and connect with them to eliminate assumptions rework.

  • Identifying allies and champions for UX is important when the top does not see the value.

Be an educator

  • Help stakeholders understand how good UX and aligns with their goals.

  • You are your best advocate, express what and why you need, otherwise, no one will know.

Tap into the Community

  • It is scary to be a solo designer in a big project, push through the fear, reach to external designers who can share insights and tools to move forward.

Moving Forward

Push for strategic planning

  • There was a rush to push out the report system without key pieces in place, such as a design system and more time for research.

  • Align all parties to a unified vision for the product.

Get early access to testing

  • The product team was only given access User Acceptance Testing (UAT) which uncovered many defects that could have been caught in earlier testing.

Establish efficient cross-departmental communication

  • Cut out communication middlemen.

  • Eliminate assumption making.