About the Client

Jefferies is a global investment bank headquartered in New York. The company provides clients with capital markets and financial advisory services, among others.

The Project

Jefferies, like many large investment banks, provide research reports to their clients on various industries and companies. They produce ten different report types which are created by their analysts using a CMS called BlueMatrix. Currently, the reports generated by this CMS are only available in a PDF format.

BlueMatrix recently added HTML5 capabilities to their report generation options in addition to the flat PDF format. This enables the reports to be properly formatted and optimized for mobile devices via a responsive layout. It also allows for interactivity which assists users in navigating through these often lengthy reports. On the back end, creating these reports in HTML5 allows for tracking to see exactly what parts of the reports are consumed most often and allows the client to make changes based on this and other analytics.

The Approach

While the main goal was to convert the current PDF format into an interactive layout, the report itself also needed a major overhaul in terms of design. We started from the ground up, leaving no stone unturned. We conducted a heuristic evaluation on the current reports and pored through every single element.

I worked closely with SMEs to help better understand the finance-specific report terminology. From there, we sent around a survey to 16 analysts and asked them to rank a series of page elements in order of importance. This would help us determine where changes in the hierarchy could be made. Once the results were tallied, a clear picture was painted on how to proceed in the information hierarchy.

I created a script which was used to conduct user interviews. In total, I spoke with 8 analysts worldwide. After the first few interviews, I made some edits in the script to make sure we got the information we needed for our redesign. I recorded the interviews using join.me and this software enabled me to screen share as necessary.

Competitive Analysis

I reviewed similar reports generated by other investment companies. This helped me understand where we could make improvements which would help Jefferies stand out from the competition. Among all the competitors reviewed, none had HTML5-enabled reports, making Jefferies among the first to use the latest technology.

The Redesign

Once I analyzed the research and set up our personas, I started to sketch out the new layout. I made sure we took a mobile-first approach in the redesign since mobile consumption of these reports is top priority. I took the current layout and re-prioritized every single element based on the survey we sent out and the feedback from our interviews. Then I categorized each section in the report and created a navigation structure.

The team created responsive wireframes for all 10 report types, supported by prototypes. Once these were approved by the client, three visual design directions were created. The client had multiple style guides for various marketing tools, but they were inconsistent and outdated. Save for a few font guidelines, we had free reign over the design direction. The client sought to apply the new design direction across all Equity Research products.

 

Before and after for the Equity Research report PDF redesign

Design Direction

The look for the new reports (and the research portal where the reports are accessed) was influenced by a number of factors. Initially, the client mentioned they wanted to break out of the “blue, typical finance” look. I reviewed the competitors reports with the client and I pointed out elements that worked well and where we could do better. I showed them other site examples (some finance, some not) to see what looks they gravitated towards. Once I had an idea of what they liked, I showed them to the team and we generated three design directions. The directions were influenced by flat design, HTML 5 and modern color palettes. I had the team create three concepts which ranged from a more eclectic color palette to very safe–meaning nearly the same as what they have currently. Surprisingly, despite what the client first said about being more experimental with the color palette, they went with the “blue, typical finance” palette.

 

Team Structure

Our design team consisted of two junior UX designers, a graphic designer, front end developer, project manager and myself, as the UX and Creative Lead. Working with a global team, I provided the direction for strategy and design. The team worked well together and I worked hard to clear any roadblocks as quickly as possible.

 

Result

Once the design direction was chosen and all design details were fleshed out, I created a pattern library and detailed specs to hand off to BlueMatrix, the CMS provider. A working prototype, created by the developer, was also provided to BlueMatrix to integrate into their system. The client expressed their appreciation to us and were happy with the design.

 

Mobile Prototype

Prototype (for mobile users)