MBS - A Trade Assignment Platform

The MBS Expert® is an efficient enterprise mortgage-backed securities system for front and middle-office functions. It is the most widely used post-trade mortgage-backed securities system that supports a large volume of data  www.broadridge.com


Hero Image

Overview

Broadridge uses this system to manage their clients mortgages and securities for the US market, banks and other firms. They were planning to revamp this old legacy system to a fast running, modern, and more desig driven system for their future operations.

My Role

My role for this assignment was to handle the entire revamp of a legacy model app, which has been a market leader product from the past 30 years. yet it is a bit of a challenge to solve. I took this task and started working. I was responsible for the entire design from production until release.

The outcome

Let's check the Product Video of the application that covers the product capabilities.

View Product Video

Discover

The Problem

Users are finding it hard to use the existing system as they have to use multiple screens to complete one trade. The UI used in the existing system is not user-friendly and you have to train the users for a long time to make use of it. The other problem seems to be that the flows are not consistent overall.

discovery

Below are some of the problems.

  • The Users has to continuously monitor multiple screens for related information to complete a trade.
  • The current application offers multiple environments to open and access different screens at the same time, which causes a lot of stress and load on the human eye while tracking px by px and screen by screen.
  • The cognitive load overall is increasing when performing a task
  • The application is also hard to navigate back and forth, switching between multiple screens

Here is a snapshot of the existing legacy application screen showing trade search details with a lot of information. The existing application views open as a separate application window.

discovery
Screenshot showing the existing legacy interface: search capability.

Design Process

My process at Broadridge is based on the Double Diamond Theory and the lean UX process. I aim to incorporate the key phases of discovery, definition, ideation and implementation in all of our projects.

User - manager persona
Figure showing Double Diamond process

Research

Along with these observations, I also analyzed the user flows of different B2C apps in the market, like movie ticket bookings, food delivery, and next day grocery deliveries.

User Interview Insights

    Redefining Layout

    The primary problem observed during the research was that the process flow has different applications to run to complete a trade. This problem could be solved by applying UCD, where the right IA can be structured so that menu items can be organized in groups.

  • Timelines

    For processing trades, users have to consult or follow a checklist of 500 odd rules. This is making them frustrated at times.

  • Processing bulk trades

    As in the existing system or app, the capability was to implement one trade at a time. This could be corrected by new user-flows that allow bulk bookings.

  • Trade Allocation

    In Trade Allocation screens/flow, users felt frustrated in entering a lot of fields. This can be solved by implementing the best design.

Ideate

Understanding user needs

Design workshops and other research methods were used to understand users and the problems they are facing currently.


When I'm Evaluating

  • I want to know what services the customer is rebooking each time.
  • I want to know what addon's customers are adding along with a service.
  • I want to know how many do not book services, not more than their membership points.
  • I want to know how many customers choose their therapist before or at the time of booking.
  • I want to know if bookings created by customers are different from their base locations?
  • How do advance customers book their service? less than 24 hours?

When I'm Deciding

  • I feel confident about my decision making
  • I see customers feel confident enough to pay after taking their service.
  • I want to know if the customer is responsive to follow-up questions.
  • I want to see similar cases, and make decisions accordingly.
  • I want others in the decision-making team to understand my decision making.
  • I'm building a mental model and comparing it against similar cases.

ideation
Sketches were performed to generate ideas.

Refinement

Using a paper prototype, I drew and tested the initial business flow for the app internally. This highlighted the lack of visibility of the trades and transactions. Then, the flows were streamlined accordingly by the UCD process providing functionality to make minor edits. I proposed few layout options for these to get streamlined.

Defining the main flow of the trade process with all variables was the hardest. It had many steps, and the team could almost never agree on the amount of flexibility provided to the user. I explored a number of flows to establish the final layout of the home screen and some other key screens.

User Profiles

John is the system user and operates the system on a shift basis. John has many years of experience in this industry and has worked in multiple roles throughout his career time.

There are eight user profiles I have identified where the John profile was relevant to all of the roles in the personas.

John's persona assessment here is for a allocation manager who works on shift and completes his assigned trades for the day.

User - manager persona
Figure showing allocation manager persona details.

User Goals, Tasks & Actions

Based on the key insights gathered from the user interviews, I have determined user stories, user goals. From there, I was able to build the corresponding user flows, illustrating the process for completing a task and reaching the goal.

sketching
Screenshot showing iteration of user flows.

Design explorations started early on in the project in order to work out user flows. Initial exploration was chaotic and stuffed with features on the home page. With every review with the PM or manager, I refined the views and dissolved features in subsequent steps to create a proper booking flow. By doing this, I had a clear direction for the wireframes and flow.

ideation
Screenshot showing finalizing flows.

Information Arthitecture

Gathering all relevant data and building an information architecture to create the finalized idea to the end product. The below diagram shows IA created for the main application, showing the dashboard approach as a landing page, and can be navigated to below linked screens.

Image illustrating information architecture designed for MBSE product

Design

This project was the first to adopt Contour, a design system created for all product needs. Establishing a global design framework presents an ideal opportunity where users have to spend no extra time on UX, micro-interactions and can make use of reusable components as well as typography, colors and layout.

Taking the product from idea to reality in 4 short months, I designed the app keeping in mind that members can utilize their services seamlessly at any retreat across the country. The app allows complete flexibility for the user to select aspects of their next appointment. Choosing from a number of services with a desired therapist for each and a range of add-ons to select from, users can choose an appointment time up to 3 months in advance.

Deliver

After finalizing the UX flows and design features with the clients, the developers, and the project management team, I worked on the visual designs. I created icon libraries, color palettes, buttons, etc., along with providing all the required assets to the developers for production.

Low & Hi-Fidelity Wireframes

Defined user flows and started working on creating wireframes and designs based on the effort made. Below are the images and mockups designed to create the structure and flow of the design.

Screenshot showing the mockup template

Screenshot showing the mockup template

Screenshot showing the mockup template

Iterative Learnings

Wireframe designs were iterated upon through usability testing and client feedback, with each iteration improving on design choices and visual hierarchy.

Testing was conducted remotely with local DC participants over Zoom. I was able to observe participants’ interactions and have them “think aloud” as they navigated through a prototype.

Style Guide

Brand design was done concurrently with the wireframe iteration. I gathered logo and brand requirements from the client, and sketched out a number of concepts. I went through several feedback and iteration sessions before deciding on a final layout design.

Final Designs

Hi-Fidelity Design's

The platform uses a 12-column responsive grid with adaptive elements and was designed to surface necessary information and highlight the next actions, at each stage of the flow to improve overall efficiency.

After the results of the usability test, I redesigned the screens with a focus on these factors:
1. Reduce the information overload by simplifying the information into manageable chunks
2. Improved visual clarity, ensuring users could easily understand and navigate through the interface
3. Optimize the app for discoverability to ensure users can easily find and explore its features.

Screenshot showing the final design visual for Login screen

Screenshot showing the final design visual for trade manager screen

Screenshot showing the final design visual for Manual Allocator screen

Screenshot showing the final design visual for Auto Allocator screen

Design Transformation

Transformed from an old 90's application to a new, fresh, quick and easy usable solution that communicates and makes the user's job quick.

The usable aspects of showing appropriate information needed, like cash balances, customer information, and results, help users quickly check balances before confirming a transaction. The use of colors and flat UI makes it simple to use.

The allocation screen is the priority item for the application, as the majority of allocation is done here. By enabling the totals and necessary functionality on this screen, you can see that the user never misses the context of the task he is doing.



Conclusion

Result & Takeaway's

This project proves to be an excellent workout on design, after working for over one year, making the product redesigned and easy to use, The feedback after testing proves it all. The number of usability issues has been reduced to minimum and with this new design, users ware happy with the app.


The Change

The below images show old and new designs. The idea here was to show the impact created by applying UCD. The new template structure was well received by the users. Now, they can make comparisons in one place and complete their trades faster.

Trade Entry Screen

From


To


Allocation Screen

From


To


Conslution Visuals Design Tasks Ideate Discover Title