Abe Shack

UX & Product Design

ESG Product – S&P Global

PROJECT NAME

ESG Product


ROLE

• UX Designer


TOOLS

• Photoshop

• Invision

• inDesign

• Illustrator


ESG is a product that gives a score to a company based on an environmental, social responsibility and governance criteria . The product's value was in providing investors data to invest in ESG bonds.


The main goal of the project was to conceptualize and mockup initial sample pages for early stages of product development.

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. Test & evaluate prototype for feedback.

Home Page – Wireframe

Home Page – HiFi Mockup

Matrix Page – Wireframe

Matrix Page – HiFi Mockup

Dashboard – Wireframe

Dashboard – HiFi Mockup

Peer Analysis – Wireframe

Peer Analysis – HiFi Mockup

Simulation Tool – Wireframe

Simulation Tool – HiFi Mockup

Custom Functionality

Creating a scoring tool based on user's input

Use Case

Designing a tool that allows a user to simulate a score based on different scenarios from user inputs. The value to the user is to maximize their portfoflio's score which corresponds to a better investment decision.

Portfolio Scoring Tool – Wireframes

Conceptualizing from the default state to the end state of the simulated score based on user input.

Portfolio Scoring Tool – Step 1

User starts with their portfolio list. They click on CTA (red box) to expand added columns for user input.

Portfolio Scoring Tool – Step 2

The user is presented with expanded columns and can enter no. of shares (blue box) to simulate various scenarios.

Portfolio Scoring Tool – Step 3

Data is then input in No. of Shares column (blue box) at the user’s discretion.

Portfolio Scoring Tool – Step 4

User clicks on Calculate Score button (red box) and new percentage allocation appears. Also a new simulated score, under ESG Score column (red box) appears based on the user’s scenario.