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 tab is to measure the level of service provided by Mr. Cooper servicing with respect to different investors/clients. It helps them manage and provide good service to their customers.

Role

User Flows, Prototyping,
Wireframing, UX Design

Duration

4 months
( approx 9 sprint cycles )

TL: DR;

How I would re-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

direct data on unmet goals,
with lesser cognition overload

avoid information overload,
by hiding month-specific data

use AI to discover repeating patterns,
to reduce cognitive load on the user

Firstly, what does Mr. Cooper do?

Mr. Cooper is a loan servicer, acting as a bridge between investors 💰 who are issue money and home owners 🏠 who are borrowing the 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.

What are the exisiting problems?

The service metrics are shared through obsolete, decentralized spreadsheets.
How can we simplify these messy ones?

The current way investors and portfolio managers view and analyse service level metrics is through an excel sheet generated by the servicing sector, which causes lot of inconsistency and is outrightly obsolete.

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.

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.

Then, I wireframed 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:

- Lot of Portfolio managers who are used to the existing structure
Business team preferred having a bird’s eye view
- 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 mokcups looked like:

Edit Access

Admin
( from Mr.Cooper )

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
( Investors )

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 is a record of all missed SLAs and allows Admins to enter data regarding the cause ( lets them retrospect ) and enter remediation plans to make sure the same doesnt happen in future,

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

Using arrow hints, I made sure the software developers have all information required to implement the mockup

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?

direct data on unmet goals,
with lesser cognition overload

avoid information overload,
by hiding month-specific data

use AI to discover repeating patterns,
to reduce cognitive load on the user

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