top of page

Redesigning PricingDirect's Application for Self-Service

Context

  • PricingDirect, a subsidiary of J.P. Morgan’s investment bank, provides evaluated pricing for fixed income securities (e.g., bonds) and derivatives (e.g., options), pricing millions daily via its web application.
     
  • The tool uses market intelligence to price securities multiple times per day, accessible through the web app or via an API.
     
  • The PricingDirect sales team spends more time answering customer support emails than generating new business, as clients struggle to navigate the application and often seek help.

My Role

As Lead Product Designer, I worked with one engineer and two executive directors over 10 months to improve the PricingDirect web application. The current design, created by the tech team in 2010, had complex workflows that clients found difficult to navigate. My task was to redesign these workflows for a better user experience.

Results & Outcomes

  • I streamlined the experience by consolidating the single security and portfolio pages into one table, allowing users to perform all pricing functions on a single page.
    ​

  • Using AG Grid and the Digital Experience Design team's UI Toolkit, I integrated user-tested, industry, vetted components that are easier for the PricingDirect technology team to implement.
     

  • I secured buy-in from business stakeholders and tech partners, with upcoming user testing planned to confirm the solution's intuitiveness for self-service use.

The Problem

Clients struggled to upload securities and get prices, leading to frequent calls to the PricingDirect sales team. Despite 2019 user testing, no changes were made, and the issues persisted.

Usability Issues:
  • Low discoverability of features and friction during file upload.
  • Confusing CTA buttons with unclear language.
  • Inconsistent UX for the single security and portfolio pages, which served the same function.
     
Business Impact:
  • Sales team spent most of their time on support calls instead of generating new business.
  • Revenue growth was hindered by the poor UX, impacting PricingDirect's bottom line.

Flows & Original Design

Original Flow:
currentstateflow.png
Original Design Elements:
current design.png
The current system separates pricing for single securities and portfolios, creating confusion for clients. I aimed to streamline the process, allowing securities to be priced in one place, regardless of quantity.
Proposed Flow:
proposed flow.png

My Process

Product Definition:
  • I met with PricingDirect stakeholders and sales reps to identify user issues driving support calls.
  • Through workshops, I gathered insights on business goals, mapped user flows, and sketched initial concepts.
​
Research & Discovery:​
  • In 2019, user research on PricingDirect’s 2010-designed site revealed clients struggled with key pricing tasks.
  • I reviewed 10 client interviews, confirming the app was unintuitive with disjointed, difficult-to-navigate flows.
  • I also attended demos from PricingDirect analysts to understand the current site flow.
​
Design:​
  • Using insights from PricingDirect and prior research, I collaborated with the Markets team to explore components for the redesign.
  • I incorporated AG Grid-based Markets blotter for simplified flows, better customization, and enhanced data searchability.
  • I consolidated multiple pages into one, adding features aligned with business goals and user needs. My designs were validated through meetings with PricingDirect business and technology leaders.
​

AG Grid Utilization

Due to user access and tech constraints, I opted to use elements from J.P. Morgan’s design system that were already user-tested. AG Grid, an industry-standard data grid widely used in the JPM investment bank, was an ideal solution for PricingDirect due to its extensive testing and suitability for enterprise applications.

Benefits of AG Grid:​
  • JavaScript-based table library trusted by the technology team for easy implementation.
  • Out-of-the-box, industry-standard solution for data-heavy organizations.
  • Feature-rich, high performing, and extremely customizable.
AG Grid.png

J.P. Morgan Markets Blotter Table

The JPM investment bank’s Digital Experience Design team created a design library with a blotter table based on AG Grid. This componentized, user-tested table is used across multiple JPM applications. Implementing it for PricingDirect provided clients with a flexible, customizable solution to meet their needs.

JPM markets blotter.png

PricingDirect Solution: Upload Securities

The flow above shows the streamlined securities upload process. By combining the Single Security and Portfolio uploads, I renamed the function to "Upload New Securities Basket" ( for 1+ securities) to simplify the process and ensure a consistent client experience.

PricingDirect Solution: Challenge Pricing

This flow allows users to challenge pricing directly from the blotter table, eliminating the need for a separate Challenges tab. Users can create a challenge basket, upload supporting documents, and input details via modals. To view challenge status, they can visit the Challenges tab for full details.

Takeaways

  • Building strong relationships with business stakeholders is  vital when user testing is limited.
     

  • Resourcefulness, agility, and creativity are essential under constraints.

    • Leveraged 2019 research and industry best practices to guide design.

    • Conducted guerilla usability testing with colleagues.

    • Managed the project to keep the team on track and met tight deadlines.
       

  • Establishing trust with technology teams is key.

    • Using industry-standard components and vetted design libraries ensured feasibility and gained tech team buy-in.

    •  Mentored developers, bringing them quickly up to speed.
       

  • A deep understanding of the PricingDirect business enhanced by effectiveness as a designer and collaborator.

bottom of page