\n
Insurance Company Portals: For Policyholders and Agents
\n
\n
Visit the website:
\n
{this.visitWebsite()}}>\n
agentportal.icwgroup.com
\n
\n
\n
\n\n
\n
My Tasks
\n\n
\n
\n
\n
UX Design
\n
I designed wireframes and mockups for 2 new customer-facing portals.
\n
\n
\n
\n
\n
\n
UI Engineering
\n
I developed the front-end using HTML, CSS, Java, JS, and the Vaadin framework.
\n
\n
\n
\n
\n
\n
Presented Design Ideas
\n
I communicated design concepts to stakeholders, managers, graphic designers, and back-end developers.
\n
\n
\n
\n
\n
\n
Usability Testing
\n
I conducted usability tests with actual users to pinpoint issues and refine the user experience.
\n
\n
\n
\n\n
\n
Onboarding New Users
\n
I designed a multi-step form that guides new users through the onboarding process, breaking down a complex process into smaller, manageable steps to avoid overwhelming the user with excessive information.
\n
\n
Flowcharts were employed to communicate the user flow to stakeholders within the company, facilitating effective discussions.
\n
\n
\n\n
\n
Sitemap
\n
I organized the website's content into categories using a sitemap, including Billing, Claims, Free Services, and Account.
\n
\n
\n
\n
The second portal includes enhanced account management necessitating the division of this group into smaller subcategories, and the creation of a dedicated section for the Administrator audience.
\n
\n
\n
\n
\n\n
\n
Quick Links
\n
Policyholders are now accessing the portal to pay their bills. To enhance their user experience, I have strategically placed a prominent quick-link section on the dashboard, ensuring direct access to their bills.
\n
\n
\n
\n
Cards, characterized by their large size and clickability, are designed with specific signifiers to enhance user experience. These elements include blue text color, box shadow, arrow icon, hover animation, and pointer cursor. These seemingly small yet crucial design elements significantly contribute to an enjoyable user experience on the web.
\n
\n\n
\n
Promotional Content Design
\n
A banner at the top of the dashboard serves to promote new features or blog posts.
\n
\n
\n
\n
A clear call-to-action and content hierarchy prioritize more significant content over less important content. Pagination indicators and arrows provide an intuitive navigation experience for a limited number of elements.
\n
\n\n
\n
UI Style Guide
\n
I crafted a style guide utilizing components from the Vaadin component library to ensure a cohesive visual identity across company websites.
\n
\n
\n
\n
Consistent Brand Identity
\n
By leveraging an existing brand document, I developed the company's initial user interface style guide.
\n
\n
\n
\n
\n
\n
Vaadin Components
\n
I designed and styled components in the Vaadin component library that I coded in the development phase.
\n
\n
\n
\n
\n\n
\n
Dashboard Design
\n
Upon logging, the insurance agent is presented with a feed of recent activities since their last login. To facilitate further exploration of their feed, the Vaadin dialog component has been utilized as an overlay, thereby minimizing the time spent navigating between the feed and the detailed information.
\n
\n
\n
\n
\n
Challenge
\n
It was a challenge ensuring the users' activity feed was not overwhelmed with excessive information that would cause discomfort.
\n
\n
\n
\n
\n
\n
Solution
\n
To enhance the user experience, I identified the 3 most crucial pieces of data for each new activity and organized them into a content hierarchy. This hierarchy was achieved by varying the size, color, and spacing of text elements to ensure the information was digestible.
\n
\n
\n
\n\n
\n
My Deliverables
\n
I collaborated with my team of developers, graphic designers, and managers to deliver the following:
\n
\n
\n
\n
Diagrams
\n
During the architecture phase, I provided sitemaps and flowcharts.
\n
\n
\n
\n
\n
\n
Wireframes and Prototypes
\n
During the design phase, I provided wireframes and interactive prototypes constructed using Figma.
\n
\n
\n
\n
\n
\n
Code
\n
During the development phase, I programmed the front-end of the website using Java, HTML, CSS, and JS.
\n
\n
\n
\n\n \n\n
\n
Designing and Coding
\n
I designed and implemented another comprehensive portal for a substantial portion of our customer base, enhancing its functionality, increasing the number of screens, and facilitating seamless collaboration among team members.
\n
\n
\n
My Role
\n
UI/UX Engineer
\n
\n
\n
\n
Programming
\n
Java, Vaadin, HTML/CSS
\n
\n
\n
\n\n
\n
Usability Testing
\n
In one hour sessions conducted via User Zoom Go, I observed real customers completing tasks using a high-fidelity prototype. During these sessions, I recorded user pain points, prioritized findings, and iterated the designs based on user feedback.
\n
\n
\n
\n
\n
Challenge
\n
Policyholders anticipate the ability to report a claim upon logging in, however, this functionality is currently only available on a separate website.
\n
\n
\n
\n
\n
\n
Solution
\n
It was logical to grant users access to this feature by means of a clickable card on the dashboard directing them to a separate website.
\n
\n
\n
\n
\n\n
\n
Before and After
\n
The accompanying images illustrate the per- and post- work redesign and interface development of the dashboard for policyholders, aiming to enhance the overall user experience.
\n
Before:
\n
\n
After:
\n
\n
\n \n