Healthcare User Portal
← INDEX

Categories
UI/Visual Design
UX Research
Branding & Identity
Tools
Sketch
Client
Healthcare Startup

This project is a design of a HEALTHCARE USER PORTAL for a health insurance startup company, focusing on user interaction and visual design for this website.

Brief

The client asked for two versions of a customer-facing page for users who might have different healthcare plans. These pages are expected after log-in, and need to contain information that includes reaching out to customer service and primary care providers, statistics on premium saved, and statistics on cryptocurrency tokens earned. The personae were a technology freelancer based in Austin, Texas and a rideshare driver based in Boston, MA.

↑ The final mockups (full page views) side by side.

Persona Research

Although my responsibilities were UI/Visual, I still needed to familiarize myself with the personae in order to create distinct features for each version of the same page. I did preliminary research looking at common prices of health premiums as well as income and expected medical spending for each persona:

Through this, I gathered that the technology freelancer might opt for a "standard" plan that offers basic coverage and average costs, while the ride-share driver, prone to more occupational-related accidents but relatively lower salary, may prefer a "flex" plan. (This is all very general and just to provide some context.)

User Workflow

This diagram traces the workflow of a user who needs a question answered about a healthcare bill they received (click to zoom). One of the possible paths is via a potential user portal, which shaped my thinking for the design of the customer-facing pages.

Wireframes

Conceiving of the login page as customer portal, I drew inspiration from familiar ones in my own daily use, including AT&T Wireless and Chase Bank.

In addition, because the company also has a blockchain component, I studied cryptocurrency portfolio platforms such as Coinbase and CoinTracking to familiarize myself with visually representing token value on screen.

Because the mockups are of a dashboard or customer portal, I thought that a clear hierarchy of information and usability were of the utmost importance.

↑ Wireframe sketches.

↑ Low-fi wireframes, two versions: one with navigation on the left, the other with navigation in the header. Both versions include full page mockups as well as a desktop scroll view.

Branding

I updated the color scheme of the company's current identity, maintaining the original blue and red but brightening the tones so that the overall voice felt more modern and less corporate or patriotic.

↑ Process of original to new colors, after trying out various combinations.

The project required consideration of how the plans' branding were to relate to the overall company's branding, as well as how the plans were to differ from each other in visual identity. I made the decision to use the company's main colors for each plan so as to maintain visual cohesion, but to create subtle differences between each plan:

These differences are visible in each portal's header, side navigation, as well as the icon that appears in the blue summary box: