top of page

Making PricingDirect's Marketing Site Intuitive

heronews.png

Context

PricingDirect is a subsidiary of J.P. Morgan’s investment bank. The application’s main function is to provide evaluated pricing for fixed income (ie. bonds) and derivatives (ie. options) and they price thousands of these per day. PricingDirect's website is the main source of news for clients. PricingDirect wants to be seen as an industry thought leader, but their news content is disorganized and difficult to update from a technology perspective.

My Role

Solo UX Designer working with 1 visual designer, 1 engineer, and 2 executive director business stakeholders to improve the experience of the PricingDirect news page over 10 months. I achieved this by highlighting the most important updates while featuring white papers that the PricingDirect business published. This helped users stay up-to-date with news while establishing PricingDirect as an industry thought leader.

The Challenge

  • There was usability issues with the discoverability of content and ease of browsing on the News Page.
  • Users could not find the content PricingDirect wanted to emphasize.

Pain points for clients:​
  • Lack of information for prospective clients to decide if PricingDirect is the right solution for them
  • Unclear on how current events and market movements affect their business operations

Pain points for the business:
  • Content spread out between marketing emails and the news page which made it difficult to promote events and make time-sensitive announcements
  • No auto-publishing framework to release thought leadership articles on securities pricing, which were being hard coded each time on the website
  • Lack of opportunity to generate client acquisition and new leads to grow the business
  • pieces demonstrate subject matter expertise and supports client acquisition by generating leads and getting new business
  • Have a desire to establish leadership, but are held back by technical constraints

Current Site Audit

When starting the project, I began with an audit of the current site to understand the elements and content on each page. My first exercise was to get an understanding of the information architecture.
information architecture.jpg
The IA exercise was fruitful because the News/Events page immediately caught my interest. The news container was an accordion with over 95 entries (see IA detail below). The video shows what the current UX of the News portion is like.
News IA.png

The accordion format is difficult to navigate. It contains the most content on the page and is the most frequently updated, yet has the most limited screen real estate.

Pain points:

  • Element causes user to have to initiate action to read the content.

  • Container within page causes a double scroll.

  • The news section does not tell the user how many entries are in the container.

  • Some entries are time-sensitive and are no longer relevant after the event has passed.

Current State of the News Page:

Events Banner
Thought Pieces
PricingDirectNews.jpg
News Archive

After I completed an audit, I decided to do a competitive analysis for the news page. There were limitations in regards to user contact, research, and analytics for the marketing site. I worked within these constraints by generating ideas and understand best practices for other online archives. No metrics, testing, research, or heat mapping existed to get insight into user behavior, so this seemed like the best approach.

Pew Research News Archive
image 65.jpg

Discovery

Common Elements: category tabs, article previews, pagination, pill filters, date/topic filters, photos

Pfizer Press Release Archive
pfizer.jpg
Apple News Archive
apple.jpg

Iterations

Next, I incorporated my learnings from the competitive analysis in the design iterations. I decided to give the News Archive much more real estate while still highlighting PricingDirect's thought pieces.

First Iteration

Category tabs
PricingDirect1stIteration.jpg
Pill filter
Pagination
Container featuring latest entry for each news category
Date filters for years & months
Keyword search
Article preview

Second Iteration

Category icons
PD News Page.jpg
See More Content CTA
Photos for featured posts
Simplified date filter
3 column grid format from J.P. Morgan branding guidelines
Back to top button for easy browsing

Design Decisions

Iterative changes:

 

  • Used components from the JPM brand guidelines that were more easily able to be implemented by technology.

     

  • Decided that the title and icon approach was better than the category filter pills because a tab mechanism exists at the top of the news archive and it was a redundancy.

     

  • Card format was a brand standard from J.P. Morgan for marketing sites

    • ​More visually compelling than a list and gives the news page an editorial look and feel.

    • Prevents information overload & incorporates space for imagery

       

  • See More CTA & back to top button change

    • ​pagination has potential to be overwhelming with a lot of news entries

       

  • Added a request a trial CTA on article pages to increase sales funnel.

Results & Outcomes

  • I implemented a new, more browsable layout for the news page to clearly highlight PricingDirect’s different pieces of content.
    • As a result, the business is better equipped to publish their backlog of thought pieces and establish their thought leadership.

       
  • I established a sustainable practice with the technology team of implementing the JPM marketing site brand standards going forward.
     
  • Along with brand standards, the technology team implemented a web content management system so the business team can create new news content themselves with ease.
bottom of page