SIBAGEN

Modernizing an all purpouse Insurance Underwriter Portal

Name: Stephen Quarshie Role: UX/UI Designer(Visual) Date: 1st September 2024

Problem Statement

The existing underwriter portal relied on a dense, grid-based UI with cluttered columns and outdated styling. New users struggled during onboarding due to:

Goals

To create a modern, user-friendly portal where underwriters could efficiently key in user info, fill setup forms, and complete transactional forms, while also integrating a notification flow and visible wizards to guide users through complex processes.

oldsibagenimg

Research & Insights

Before diving into the redesign, I conducted a series of user interviews, collaborated with stakeholders and interviewed underwriters to understand the pain points of the current portal and gather insights on how to improve it.

oldsibagenimg oldsibagenimg

Methodology

Building on the insights gathered from user interviews, stakeholder discussions, and competitive analysis, I structured the redesign process to address key challenges and enhance the user experience. I outlined essential features and created wireframes and prototypes for user testing.

Pain Points

  • Complex Onboarding: New and even existing users in th einsurance space found the portal difficult to navigate despite having guided workflows.
  • Cluttered Interface: Excessive information was displayed at once, making it overwhelming for users.
  • Inefficient Navigation: Key functionalities were not easily accessible, causing frustration and delays in task completion.
  • Poor Visual Hierarchy: Important elements did not stand out, leading to confusion and slower decision-making.
  • Limited Guidance: Users lacked clear prompts or wizards to help them complete complex processes smoothly.

Ideation & Inspiration Presentation

After conducting a series of ideation exercises (i.e Affinity Mapping, Crazy 8's and Stakeholder Feedback Loop ) and based on past experience with similar reqeusts and products I explored two different design approaches to modernize the insurance portal’s features, ensuring a more aesthetically pleasing and user-friendly experience. These approaches focused on enhancing UI/UX by improving navigation, simplifying interactions, and creating a visually cohesive interface.



Crazy8s



Explored Design Approaches

The two design approaches considered for the portal redesign were:

  • Card-Based Layout: A modular, card-style design that organizes information into digestible sections. This approach enhances scannability and ensures a structured presentation of key details.
  • Whitespace-Driven Modern UI : A clean, minimal design prioritizing readability, reduced cognitive load, and a contemporary aesthetic.

After evaluating the pros and cons of each approach, we ultimately settled on the modern, whitespace-driven design you see here. This decision was based on its clean layout, improved readability, and seamless user experience.

To align stakeholders with the redesign vision, I curated a selection of design inspirations showcasing modern UI principles and best practices. These references played a crucial role in guiding the final iteration of the portal.

Inspiration for Redesign

Wireframing Process

To establish the foundation for the redesigned portal, I began by creating low-fidelity wireframes. These wireframes focused on structuring the layout, defining key interactions, and improving the organization of essential features. The goal was to simplify navigation and enhance usability while maintaining a clean and intuitive interface.



Wireframe of the Application - Layout 1 Wireframe of the Application - Layout 2 Wireframe of the Application - Layout 3 Wireframe of the Application - Layout 4 Wireframe of the Application - Layout 5 Wireframe of the Application - Layout 6


These wireframes were presented to underwriters for initial feedback to set the tone for the overall structure of the application. Based on discussions and observations from these sessions, a key feature was introduced—an always-visible flow mapper button, allowing underwriters to track their next steps at any time. This feature was inspired by insights drawn from the fifth and sixth wireframe images, addressing the need for better process visibility.

Prototype Development

Incorporating insights from the wireframe review, I developed high-fidelity prototypes to bring the design to life. These interactive prototypes captured the finalized visual aesthetics, micro-interactions, and improved usability features.





High-Fidelity Prototype - Screen 1 High-Fidelity Prototype - Screen 1.2 High-Fidelity Prototype - Screen 2 High-Fidelity Prototype - Screen 3 High-Fidelity Prototype - Screen 4 High-Fidelity Prototype - Screen 5 High-Fidelity Prototype - Screen 7 High-Fidelity Prototype - Screen 8 High-Fidelity Prototype - Screen 10

Usability Testing & Refinements

To validate the effectiveness of the design, I conducted usability testing where underwritter interacted with the prototypes in real-world scenarios. The study provided valuable insights into how users navigated the interface and highlighted areas that required refinement.

Key Findings

  • Improved Navigation: Users found the new layout more intuitive, reducing time spent searching for key actions.
  • Flow Mapper Button Success: The always-visible flow mapper button was highly appreciated, helping underwriters track their next steps effortlessly.
  • Clarity in Visual Hierarchy: The improved contrast and white space enhanced readability and ease of use.
  • Interactive Elements: Some users suggested refining button placements for better accessibility.
  • Performance & Responsiveness: The design was well received across different devices, with minor tweaks needed for mobile optimization.

Design Refinements

  • Enhanced button placement for frequently used actions to improve efficiency.
  • Optimized the flow mapper button positioning for better accessibility.
  • Refined font sizes and spacing to improve legibility.
  • Adjusted interactive elements for a smoother user experience.
  • Fine-tuned the mobile version to ensure seamless functionality across all screen sizes.

Conclusion

The redesign of the insurance underwriter portal was a collaborative effort that involved stakeholders, underwriters, and design teams. By focusing on user needs, feedback, and usability testing, we were able to create a modern, user-friendly interface that streamlines workflows and enhances productivity.