BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon

Servicing Portal

Login

The login template should be leveraged for any site requiring a secure log in. The login pattern combines data input fields, buttons, and links.

Clickable Prototype: HTML | Style Guide: PDF

Desktop view shown for illustrative purposes:

screenshot

Account Summary

The Account Summary page is a card based, responsive design template. It functions as a dashboard for the customer (employee). The overall idea is that there is a card per account/policy. Additional cards can be accommodated such as the ID Card card, Statement of Health card, and marketing/promotional cards.

Clickable Prototype: HTML | Style Guide: PDF

Desktop view shown for illustrative purposes:

accunt summary

Account Details

The Account Detail page introduces a tab set. The tabs can leverage either a card based design template, or a table pattern. The Account Detail page also allows for an I want to menu.

Typical tabs found on the Account Details page include but are not limited to: Product Details, Beneficiaries, Claim History, Common Questions.

The content of each tab will vary and may leverage a variety of patterns within it, such as cards or tables. When designing account detail pages, it is important to be as consistent as possible across products in order to repeat already learned patterns.

Clickable Prototype: HTML | Style Guide: PDF

Desktop view shown for illustrative purposes:

account details

Find A Provider

The Find Provider template can be leveraged for a variety of search and search result scenarios. The general premise is that the user is prompted to search by entering the minimum amount of information needed for the system to return a result set. Then the user can use the filters to adjust the result set.

For each result, key data points that can be consistently shown for all results should be displayed in the list of results. Each result is shown on a (borderless) card, which flips to a turbo card side to show additional details.

The results shown on the map correlate to the results, with a numbered pin. Map should be able to leverage whatever mapping technology is being used for the portal it is being implemented on.

Clickable Prototype: HTML | Style Guide: PDF

Desktop view shown for illustrative purposes:

findaprovider

ID Cards

The ID Card card is designed to scale for a scenario of a single account/policy with one family member, to a scenario where there is a family with multiple accounts/policies. When the card is on the Account Summary page, it is intended to include cards for all accounts/policies with ID cards. When the card is on the Detail page, it will only show ID cards for that particular account/policy.

Clickable Prototype: HTML | Style Guide: PDF

id cards

Coverages

The Coverages tab introduces a different style card that allows the user to more easily scan a long scrolling page of cards. This “borderless” card should be used sparingly, in rare situations. When using this template, it’s important that the card heights remain consistent for scanning purposes.

Clickable Prototype: HTML | Style Guide: PDF

Desktop view shown for illustrative purposes:

coverages