Abe Shack

UX & Product Design

RatingsDirect® Product – S&P Global

PROJECT NAME

RatingsDirect


ROLE

• Lead UX Designer

• Product Manager


TOOLS

• Photoshop

• Invision

• inDesign

• Illustrator


RatingsDirect is a product that provides users with financial and credit information for companies. The product's user base is mainly financial institutions that invest in corporate bonds.


The main goal of the project was to migrate the existing product to a new platform interface while taking into account guidelines and user research.


Granular goals included formulating user journey workflows, conducting user research and devising standardization for UX/UI consistency.

Design Process

  1. 1. Identify & Research needs of user and value created.
  2. 2. Sketch the product vision.
  3. 4. Design ideas of the look and feel.
  4. 5. Prototype a scaled down version with only main functions. 
  5. 6. Implement development.
  6. 7. Launch product.
  7. 8. Maintain & support after launch.

Page Development

Sector Page

Sketch

Outlining content placeholders.

Wireframe

Defining the basic functionality and purpose within content placeholders.

Implementation

Final development of page.

Use Cases

Devising solutions for specific user work flow issues

Use Case 1

Designing a workflow that allows a user to view rows of additional hidden. The value to the user is to save space and allow more individual entities to be viewed before expanding to see all data rows for each entity.


Sketch

To visualize from the default state to end state of the user journey.

Mockup – Stage 1

Default state with data collapsed in grid.

Mockup – Stage 2

When user clicks on expansion icon, additional data appears.

Use Case 2

Designing a workflow that allows a user to select or de-select entities that populate a line chart. The value to the user is that it lets the user visually compare a specific set of entities' credit ratings that the user chooses through a filter field.

Sketch

Conceptualize the user workflow from a closed state to applying the select/deselect state.

Mockup – Stage 1

Default state with 5 companies credit ratings in the chart.

Mockup – Stage 2

When user clicks on filter box, new menu filed 'Entities' appears.

Mockup – Stage 3

Drop down menu shows all available entities in user's portfolio.

Mockup – Stage 4

User can select/deselect entity in drop down menu.

Mockup – Stage 5

When user deselects entity and applies it, the disappears from the chart.

Mobile User Workflow

Changing Time Period Filter in Mobile Viewport

  1. 1-Time period filter
  2. 2-Time Period options
  3. 3-New time period
  4. 4-Apply change

Adaption for Mobile

Adapting elements for a mobile viewport

Desktop to Mobile Portlet

Portlet in top left must be adapted to multiple mobile viewports.

Wireframes

Placement holders of where specific content will be position.

Implementation

Final development of page.