H2O Data Verify Project
The H2O Portal project aims to enhance the user experience and functionality of our corporate portal. Our goal is to create an intuitive and efficient platform that aligns with business objectives and meets user needs. The project will be executed in four key phases:
Understanding the H2O Portal
Ideation
Design
Demo to Stakeholders
Step 1: Understanding the H2O Portal
1. Learning About the H2O Portal
- Conduct a walk-through of the existing corporate portal to understand current functionalities and user interactions.
2. Gathering Requirements
- Collect and analyze requirements, focusing on business goals and any hard materials such as PDFs and email attachments.
- Establish the overall goal of the project based on these requirements.
3. Reviewing "Fraud Report Insights Requirements"
- Identify the specific insights users need in the fraud report PDFs shared by the team.
H2O Screens
1-1 H2O Walkthrough
Purpose of H2O Portal:
To streamline data access and management
Facilitate efficient data analysis and reporting
Enhance user experience with intuitive interfaces
Requirements Gathered:
User authentication and role-based access control
Real-time data updates and synchronization
Including advanced sorting capabilities
Interactive dashboards and customizable reporting tools
Robust data security and compliance measures
Next Steps:
Document detailed functional and non-functional requirements
Design and develop based on gathered requirements
Continuous feedback loops with the team to refine and enhance the portal
Whiteboard Wireframes
1-2 Gathering Requirements
Establish the overall goal of the project based on these requirements:
Ability to Submit Request for new report
Default view: Latest run/request details
Dropdown/ability to load info from past report runs
Request ID
Date requested
Requested By
Score and status for each component
DRIVE
ID Verify
App Verify
Prop Verify
Scores and Statuses
1-3 Reviewing "Fraud Report Insights Requirements"
Identify Specific Insights
Determine the key insights users need to see in the fraud report PDFs.
Gather detailed requirements from the team on what information and metrics are essential.
Ensure these insights are clearly and effectively presented in the PDFs to meet user needs and business objectives.
Step 2: Ideation
Component Structuring
Identify and structure specific components such as filters, tables, sorting options, drop-down boxes, and accordions.
Focus on both functionality and aesthetics to ensure a cohesive and intuitive user experience.
Baseline Framework
Utilize the H2O mockups framework as a baseline for styling and layout.
Leverage this framework to guide the initial design and ensure consistency throughout the portal.
Mockups with drive score underneath
2-1 Mockup Executions
Iterative Design Process
Created several design iterations based on the given requirements to explore various layout options.
Drive Score Placement
Explored different placements for the Drive Score, both at the top and bottom sections, to determine the most effective layout.
Enhanced Readability and Accessibility
Added color to statuses to improve readability and assist with accessibility for all users.
Incorporating Tabs
Retained the use of tabs as designed in the DEV’s mockups to maintain consistency and intuitive navigation.
Step 3: Design
Design Requirements Implementation
Ensured all elements and information are displayed on the same page for streamlined user experience.
Integrated alerts within a modal window to keep the main interface clean and uncluttered.
Included alt version with comments in a modal window to provide contextual feedback without disrupting the main workflow.
First Iteration Feedback
Presented the first iteration of the design incorporating these requirements.
Gathered feedback from stakeholders to refine and improve the design in subsequent iterations.
Alerts as a modal window
3-1 1st Iteration Review
Design Requirements Implementation
Ensured all elements and information are displayed on the same page for streamlined user experience.
Integrated alerts within a modal window to keep the main interface clean and uncluttered.
Included alt version with comments in a modal window to provide contextual feedback without disrupting the main workflow.
First Iteration Feedback
Presented the first iteration of the design incorporating these requirements.
Gathered feedback from stakeholders to refine and improve the design in subsequent iterations.
Comment History cleaned up
3-2 2nd Iteration Review
Submit Modification of Alerts Button
Added a button for submitting modifications to alerts, ensuring users can easily update alert settings.
Comments History
Included a comments history section to track and view past comments, enhancing communication and transparency.
Pagination
Implemented pagination to manage large datasets efficiently, improving the overall user experience by preventing information overload.
Statuses
Statuses no longer feature color on main page, aligning with recent design adjustments for a consistent interface experience.
Change to Open/ Cleared
Load Screen for ~5 sec downtime
3-3 3rd Iteration Review
Update Alerts Button
Replaced the edit button with an "Update Alerts" button for clarity and improved user interaction.
Tabs Integration
Decided to use separate tabs for better organization and navigation, ensuring a more user-friendly interface, below the “Request Details”.
Comments and Alerts History
Cleaned up alerts history to show only after comments have been submitted, streamlining the user experience.
Alerts and comments are now consolidated on the same page (but separate tab) for streamlined access and management.
Request Scoreboard Columns
Configured the request scoreboard to display only 3 columns initially. The "Projected" scores will populate only after alerts have been cleared.
Error Column
Added an error column under alerts, which populates only after DataVerify communicates an error back to the system
Loading Indicator
Implemented a spin wheel for loading times of approximately 5 seconds to inform users that their request is being processed.
Stakeholder Demo
Request Details Section
Detailed overview of each request with comprehensive information for easy reference.
Request Scoreboard
Displays critical data with initially 3 columns.
"Projected" scores will only appear after all alerts have been addressed, ensuring data accuracy.
Fraud Report Results
Clear and concise presentation of fraud report findings- pending visualization tables.
Alerts on a Separate Tab
Alerts are now organized under a separate tab for better clarity and focus.
Error Column on Alerts
An error column under alerts will display if an error is received from DataVerify, providing immediate feedback on issues.
Alerts Management
Alerts can be cleared and re-opened with mandatory text boxes for required user input, ensuring thorough documentation.
Multi-Select All Tool
Added functionality for multi-selecting items to streamline user actions and improve efficiency.
Conclusion
The H2O Portal redesign project, which began on June 20th, 2024, and concluded on July 7th, 2024, was successfully presented to business stakeholders. The final design and functionality were well-received, with stakeholders expressing great satisfaction with the enhancements and improvements made. They found the new user experience and design elements to be in perfect alignment with the project's goals and user needs. With no further changes requested, the project will now proceed to the implementation phase, where the new portal design will be fully integrated and made available to users.