Model Edge

PwC

Enhancing financial model management with a reimagined UI, addressing user pain points, and introducing powerful new features for an optimized user experience.

Platform
Responsive Web App
Team
  • UX Designer (me)
  • 1 Product Owner
  • 2 Product Managers
  • 1 Lead Developer
  • Dev Team (overseas)
Status
Live
Overview

Model Edge is a cloud-based solution for managing, monitoring, testing, and governing model portfolios. It offers a centralized view to streamline the model governance process and simplifies explaining the use of models and artificial intelligence to relevant stakeholders. It was developed in-house to customize automation solutions for model development, model validation, and model documentation.

My Role

I joined the team to transition the existing platform to a new design system and polish the UX/UI. I identified areas of improvement and introduced micro-interactions to enrich the user experience. My role expanded to include developing new features and refining existing functionalities, ensuring continuous improvement.

Background

Since much of the MVP was already designed for beta release, my goal was to identify any usability issues with the beta release and redesign the platform to improve the user experience of new and existing users, understand user needs and pain points, and determine the critical features to prioritize for the next iteration of the product. However, before joining, I wasn't familiar with financial models or MRMs and wanted to better understand the product and its subject matter.

Existing interface before redesign.
What is a model?
A model in finance is a tool that helps to make decisions. It's a mathematical or computational representation of a real-world financial situation or system. Models forecast future events, evaluate risks, and make predictions based on various inputs and assumptions.
What is model risk?
Model risk is the possibility that a model might be incorrect or misused, leading to poor decisions and potentially financial losses. Since models are based on assumptions and simplifications of reality, there's always a risk that they might not accurately predict real-world outcomes.
What is Model Risk Management?
Model Risk Management (MRM) involves overseeing the development, implementation, and use of models to ensure they are accurate, reliable, and used appropriately. It includes:
  • Development and Validation: Ensuring models are built correctly and are accurate.
  • Governance: Establishing policies and procedures for how models should be used and managed.
  • Documentation: Keeping detailed records of how models are developed, validated, and used.
  • Monitoring and Auditing: Continuously checking models to ensure they remain accurate and are used correctly over time.
Purpose of the Platform
Model Edge streamlines and optimizes managing models, ensuring they are efficient, ethical, and compliant with regulations. It enables the end-to-end model lifecycle through key features, including digital documentation, maintaining an inventory of models, performance dashboards, streamlined change management, and approval workflows, making decisions and governance much more streamlined.

Discover & Define

Once I understood the platform's purpose, I dove into the existing system to pinpoint areas needing improvement. Collaborating closely with the team, I interviewed beta users to better understand their workflows and pain points.

User Interviews

To gain deeper insights into the goals and challenges users face when searching for an asset or navigating an asset profile, we conducted user interviews with participating beta users. These sessions aimed to uncover their desired workflows and identify potential value-add features. By understanding their pain points and preferences, we were able to pinpoint specific areas for improvement and tailor the redesign to better meet user needs.

Key Findings

  • Users had mixed feelings about the Digital Assets Overview page; some found the dashboards sufficient, while others were confused and didn't realize there were more charts below the fold.
  • Some of the icons were unclear.
  • Users wanted more info in their inventory of assets or the ability to customize tables.
  • There were too many steps when adding new content in a modal.
  • Asset profiles were hard to navigate and digest due to the amount of content.
Screens before redesign

After synthesizing user feedback and stakeholder inputs, I identified key areas for redesign:

Home
  • Update Digital Assets Overview section
  • Determine what customers want from the dashboard.
  • Decide if the Issues Summary section belongs here or in its own section.

How might we display the most relevant and easily digestible information to the user?

Inventory
  • Reinforce icon for each asset type.
  • Explore alternative layouts for text-heavy data tables (e.g., card treatment).
  • Add search functionality.

How might we make it easier to view the most information of each item before needing to click into the full profile?

Asset Profiles
  • Add sectional navigation (jump to section).
  • Implement modular edit/save.
  • Improve visual hierarchy (e.g., why is asset ID the largest text?).
  • Find opportunities to inject icons or visual elements.
  • Explore layouts that better use white space and truncate unimportant/excess content.
  • Consolidate all action items (Create Report, Edit, Export, Print).

How might we make it easier for users to find the information they're looking for in lengthy, data-heavy profile pages?

Overall UX/UI
  • Utilize shadows to add depth.
  • Explore typographical treatments for heirarchy
  • Update primary color to the new theme.
  • Address inconsistent form elements.
  • Incorporate a grid.
  • Update the header.
  • Ease transitions.
  • Update the FAB button.

Ideate & Iterate

I started with the foundational elements, created a library of compoenents, and polished up the layout. The header, footer, and left-side navigation were updated to the new design system colors for primary action items and active/hover states.

The header, footer, and sidebar navigational components were updated to comply with the new Design System and polished up to more clearly define each section.

I created interactive prototypes to test out all the micro-interactions and to demonstrate how the header and new sidebar interactions reacted to scroll.

Prototyping all the interactions and transitions testing the header, footer, and sidebar.

Once the foundational components were updated, I shifted my focus to the Inventory and Profile pages. I explored various concepts and layouts to address the "How Might We" (HMW) statements and incorporated improvements from the existing backlog of user stories. This process involved iterative design and continuous feedback to ensure that the new designs effectively solved user pain points and enhanced the overall user experience.

Exploring options displaying Inventory information.

A/B Testing

As I iterated on the designs for each section, multiple options started taking shape, providing the perfect opportunity to gather user feedback. I conducted various A/B tests, comparing different concepts side-by-side for the Inventory and Profile pages.

Inventory AB Test - A
Inventory A — Horizontal card style with an exposed filter panel
Inventory AB Test - B
Inventory B — Dynamic tables with expandable rows displaying additional info and quick actions
Full Profile A — Modular sections with tabbed navigation
Full Profile B — Reorganized sections with a sidebar of important information
Profile A — Sticky navigation with tabbed sections
Profile B — Sticky navigation with dynamic dropdowns

Prototyping

After having gathered feedback from all the A/B tests, I iterated on the designs and refined the ones that had resonated most with users. I then created prototypes of any new interactions to better convey concepts to stakeholders and developers. Prototypes included examples of transitions between hover and expand states, scroll behavior of sticky elements, content overflow, etc.

Here I'm testing out the concept for hidden sort controls in table header and expandable table row.
Testing out a sticky top navigation that quickly jumps to the desired section and a sticky accordion-like side panel.
Testing out the concept for quickly applying the suggested placeholder or inputting custom text.

To support development, I shared the coded prototypes on GitHub and included guidelines and specs in my design handoff. I partnered closely with the lead developers and PMs to make sure document specifications and requirements were clear and understood. Documentation covered elements that developers might otherwise infer from the designs, such as empty and default states, how users clear data or how a collapsible column reacts to scroll events.

Results

Launched in December 2020, Model Edge has transformed financial model management, offering users an intuitive and efficient platform. The redesigned Inventory and Profile pages streamline workflows, making them smoother and more accessible. By listening to user feedback and identifying pain points, features like micro-interactions were introduced to enhance both efficiency and usability. With a comprehensive audit trail and centralized documentation, Model Edge ensures compliance and transparency, setting a new standard in model risk management.

Promo Video
Testimonial
Recognition