Can you view it in web, please?

My stories are best told in visually rich, wider screens. Thanks xD
Go back Home ☀️

Tool for mortgage investors to analyze customer service metrics

The Service-level agreement (SLA) Scorecard measures the service level provided by Mr. Cooper Servicing for different investors and clients. It enables them to maintain high service standards for their customers.

Role

User Flows, Prototyping,
Wireframing, UX Design

Duration

4 months
( ~9 sprint cycles )

TL: DR;

How might we...

Simplify the sharing of service metrics, currently managed through outdated and decentralized spreadsheets, to enable easier identification of missed goals and facilitate the planning of remedial actions for improved efficiency?

Defining success

How I would design this today ↓

Are the service levels met?

GOAL #1

If not met, why? How often are they missed?

GOAL #2

How to avoid missing goals in the future?

GOAL #3

Final version

Directly surface unmet goals, while reducing cognitive overload.

Minimize information overload by collapsing month-specific data.

Leverage AI to detect recurring patterns and increase efficiency.

My Role & its impact at SCOUT ⚡

Designed and delivered
‍5+ key features, such as onboarding, Access management, and SLA management increasing investor onboarding by 40%

I initiated and assembled a design system for the SCOUT application comprising of
20+ core components and 50+ variants to ensure a cohesive user experience,

Built and Modeled the Onboarding feature to streamline and simplify the onboarding process for 12+ new portfolios.

Background / Setting Context

Firstly, what does Mr. Cooper do?

Mr. Cooper is a loan servicer that bridges investors 💰 who fund loans and homeowners 🏠 who borrow money.

During my tenure, I delivered wireframes, Low-fi, High fidelity production ready user interfaces for SCOUT, a B2B Portfolio Management tool used by investors & clients. I was collaborating mainly with my Product manager, business team head and front-end software developers.

This tool is inside Mr. Cooper's SCOUT application.

SCOUT is the portal for Investors or Portfolio managers to track and analyze all information regarding the loans they issued.

During my tenure, I delivered wireframes, Low-fi, High fidelity production ready user interfaces for SCOUT, a B2B Portfolio Management tool used by investors & clients. I was collaborating mainly with my Product manager, business team head and front-end software developers.

I primarily worked in the UX of SCOUT.
What's it about?

SCOUT is the portal for such Investors/Portfolio managers to track and analyze all information regarding the loans they issued.
This portal is a dedicated B2B portal for investors and their portfolio managers to find all relevant information regarding their loans and their users.

Customer service is one of the key aspects a servicer handles on behalf of the investor.

The investors have signed Service-level agreements ( SLAs ) with Mr. Cooper to ensure the customers are given prompt service, and wanted a portal to track and analyze the service metrics.

What is a Service-level agreement ( SLA ) ?

A service-level agreement (SLA) defines the level of service an investor expect from a servicer, laying out the metrics by which service is measured, as well as remedies or penalties should agreed-on service levels not be achieved.

So, How might we

Design a real-time Service Metric Scorecard to track and analyze service metrics throughout the year, and analyze areas for improvement in order to prevent similar issues from arising in the future.

Design Process - Ensuring quality

Collecting requirements + co-designing

At the start of the sprint, I collaborated with the product manager to comprehend the business requirements and gain a clear understanding of the intended audience, the feature's purpose, and the reasoning behind its implementation.

Gather feedback + Re-iterate

After completing the initial mid-fidelity designs, I presented the various versions to the team consisting of project managers, business analysts, and software developers to gather feedback and decide on the preferred option.

Tech team: Handoff + Support

I now hand over the high-fidelity, iterated versions to software developers. This includes adding error message pages, border case scenarios, transferring vectors, etc.

Currently, Service metrics are currently managed through outdated, decentralized spreadsheets.
‍How can we simplify these messy ones to help better identification of missed SLA goals?

Investors and portfolio managers currently rely on Excel sheets generated by the servicing sector, leading to inconsistencies and inefficiencies.

This is how it has been so far. So how can we simplify this messy spreadsheet?

Stakeholders & Goals 🎯

Admin
( from Mr.Cooper )

Track and analyze missed service metrics to identify causes and patterns.
‍
Introspect relevant information to gain context and clarity on the reasons for missed service goals.

Portfolio managers
( Investors )

Easily access and track Service level metrics throughout the year (Jan to Jan, 13 months).

View details of Missed service goals, including remediation plans, comments, and other relevant information.

Who are our users?

Admin

Servicer's representative

The admin is the servicer's representative or operations manager, responsible for:
‍
- Tracking SLA performance metrics
- Posting remedial actions for missed SLA goals
- Ensuring adherence to investor requirements and SLA terms.
- Communicating updates and resolutions to investor representatives

This role ensures that any SLA breaches are addressed and documented for transparency and accountability.

Portfolio Manager

Investor's representative

The Portfolio Manager would be responsible for:
‍
- Monitoring overall portfolio performance and identifying SLA trends.
- Reviewing and approving/disapproving SLA exceptions while ensuring compliance with investor guidelines.
- Overseeing remedial measures by coordinating with servicers to address missed SLA goals and mitigate risks.

To better understand the underlying issues,
I needed to first untangle the information architecture.

The complicated information architecture needed to be clarified so I can re-arrange them in a better readable manner.

Below, is the compilation of some of the
‍interesting features I worked on for SCOUT for making portfolio management lifecycle hassle free and automated.

I identified three main issues.🧐

Due to time constraints, I first accessed the existing spreadsheet and jotted down pain points I felt were hindering its usage. Later, I reconfirmed these pain points with the Business team to validate my assumptions and hear if they have any additional ones.

Wide pages

Horizontal length of the Excel sheet is excessive, requiring excessive scrolling to navigate through it

Redundant 'Area' column

On talking to the business teams, we commonly felt the "Area" column is redundant since the "Category" column provides sufficient context.

Access Control

The level of edit access varies across different roles such as admins and portfolio managers, so the design should account for these variations.

Next, I developed wireframes to explore potential solutions. ✍

I came up with two versions to showcase them to the Business, Product, and Engineering teams to collect feedback and suggestions.

Wireframe One

Wireframe Two

Finally, access monthly info data by clicking the ‘view details’ button

But, we had to go with a structure closely replicating the excel sheet because:

- Many portfolio managers were accustomed to the existing structure.
- Time and effort by software team to create a completely new structure
‍
Yet, the inside scroll in monthly information was approved to be implemented to minimize scroll

Final Wireframe 👇

Final Outcome

These are how the production-ready, finished mockups looked like:

Edit Access

Admin

Allowed to edit all cells.

As the Admin, they are responsible for feeding the values into the table and hence have access throughout the table.

Portfolio managers

Allowed to edit Actual values alone.

As the investor/client, their duty is to monitor and analyze given information. Other values such as Threshold etc are pre-fed.
Following values are dependent on each other.
‍
Threshold: Value is entered from the SLA document.
Variance: Difference between Threshold and Actual.
Status Colour: Depends on Variance.

Missed SLA Details 🏌️

What happens when a service goal is not met? 🙅

The Missed SLA Tab records all missed SLAs and allows Admins to document root causes and remediation plans to prevent future occurrences.

default view

This is how it looks with
populated values

Admin's edit view

Admin has full access on the different fields unlike Portfolio manager as the admin is responsible for adding comments, remediation plans etc.

Portfolio Manager's edit view

The Portfolio manager can choose to forgive few unmet service goals if there is a clear remediation plan or any other valid reason. They register the exempt using this portal.

Alternatively,

Missed SLAs can be accessed through the
SLA Details tab as well.

by clicking on the red status, the user is redirected to that respective Missed SLA in the Missed SLA Tab.

Developer Handoff

For the Environmental Innovation Challenge, the business proposal stating the features, pain points and market opportunities were submitted for the screening round.

Adding Hints

I incorporated arrow hints to ensure developers had all necessary details for implementation.

Clickable Prototypes

Clickable prototypes were created for each unique feature to convey the necessary interactions, transitions, and states.

Prior to the start of the sprint, developers were provided with a comprehensive walkthrough of the prototypes.

UI Component Library

Creating and maintaining a UI component library with the potential of turning it into a design system

But, how would I do it today?

Given that its been 2 years since I did this project, how would I revamp it today?

Are the service levels met?

GOAL #1

If not met, why? How often are they missed?

GOAL #2

How to avoid missing goals in the future?

GOAL #3

Final version

Directly surface unmet goals, while reducing cognitive overload.

Minimize information overload by collapsing month-specific data.

Leverage AI to detect recurring patterns and increase efficiency.

My Key learnings

Soft Skills

Beyond hard skills, I learnt a lot of soft skills on how to present, communicate & convince my design decisions.

Handling Piles of Data

Extensively practiced information architecture and User flows because the majority of the data provided by business leaders were lengthy Excel sheets filled with a loads of information

Coder + Designer Pros

As a coder + designer, I worked effectively with developers understanding their pain points when it comes to implementing mockups

Challenges

01

Balancing dev. effort & customization: While using default UI components from CSS libraries like Bootstrap or Material UI can significantly reduce software development efforts, it caused limitations in terms of customization and personalization.

02

Users conceptual mapping: The current system relies on using emails and spreadsheets for client interactions, and the users have limited technical proficiency. As a result, I had to create designs that were mindful of these constraints and catered to the user's capabilities.

03

Various Investors: The users were from very different investors, and their reachability was not so easy. Each client was handled by different in-house portfolio managers & they have their unique style of handling them.

04

Convincing Decisions How to convince the design team about User experience when it is not a customer facing application

My Role & its impact at SCOUT ⚡

Designed and delivered
‍5+ key features, such as onboarding, Access management, and SLA management increasing investor onboarding by 40%

Built and Modeled the Onboarding feature to streamline and simplify the onboarding process for 12+ new portfolios.

I initiated and assembled a design system for the SCOUT application comprising of
20+ core components and 50+ variants to ensure a cohesive user experience,

back to top ↑

Next Project →

© 2023 Gayathri Kasilingam + her hazelnut lattes ☕
IntroductionDesign ProcessWireframingFinal outcomesFurther additionsDev. SupportTakeaways