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. Identify & Research needs of user and value created.
- 2. Sketch the product vision.
- 3. Design ideas of the look and feel.
- 4. Prototype a scaled down version with only main functions.
- 5. Implement development.
- 6 Launch product.
- 7. 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-Time period filter
- 2-Time Period options
- 3-New time period
- 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.
