HealthState

From C to B

While HealthState is a B2C product, its backbone is a B2B product - HealthConfirm. Here’s how it works: 

1. Employers employ HealthState for their company’s health and wellness added program

2. Employees who choose to sign up with the employer’s HealthState program will receive Healthconfirm at-home test kit(s) according to the customized plan between HealthState and employer

3. HealthState will then collect anonymous and aggregated data once the employees have taken the tests

4. While employees can monitor their own data from the test through HealthConfirm, HealthState show data that will help employers monitor employees hormone levels and suggest actionable health plans and challenges 

• To understand more, you can visit OurHealthState Landing Page and also see their whitepaper and case study

It’s not easy being first

During our design sprint, we used data collected from HealthConfirm and other past experiences (TradeShow surveys, briefing ops from execs, etc) and figured out our Target Audiences, MVPs for first launch, and what kind of data needed to be present for employers.

While our main target users are Exec, HR & Benefit Admins, our core users for data collection are the company’s employees. By identifying who all of the users are, we can then decide on their users’ journeys and manage what steps needed to be taken before and after employing HealthState and what data needed for each step

Build from the ground up

From branding, to wireframes, to build out, to proposals, to onboarding and running the program, we had to do everything. As part of a small temporary HealthState unit, my main job includes me functioning as the main designer for UI/UX while also consulting and manage other design aspects of the project

My main focus for this project includes but is not limited to:

1. Data visualization for all types of different data

2. Main and sub navigation and filter and tags that help employers and HR to choose what info they want to see

3. Designing the whole employer dashboard portal + landing page for non-users
   

Lines, charts, graphs, action!

One of the main challenges of creating HealthState dashboard is how to present specific data in an aggregated high level manner. Hormone levels have very specific types of charts and graphs depending on whether it falls in the regular, high or low range as well as certain time of the day.

In order to make sure we are able to portray everything both accurately from high to low level of details, we have brainstormed so many times, pre, during and post design sprint to come to a conclusion. 

There are 4 main types of data that are the most relevant for employers that HealthState offer:

1. Employees Hormone levels & aggregate data - Donut chart

2. Employees Cortisol Levels - Line graph 

3. Employees Health Surveys - Bar chart

4. Employees Health Risk Assessment Result - Pie chart

When it comes to cortisol levels, depending on which section of the day and which range the cortisol level fell in, it will tell you if you are stressed or not. For example, your cortisol level should be high in the morning when you are productive at work, and lower at night to indicate only a little amount of stress to provide a good night sleep

For the dashboard of cortisol levels, we have to show on the line graph - the high range in red, normal in green, and low in orange, as well as the actual aggregate results collected and where that aggregated data falls on the chart - morning, noon, evening, or night. Where the black dots are representing the range and time of day their employees’ cortisol levels are in. Upon clicking on the black dot, it will take them to the actual donut chart of that data showing exactly the percentage of anonymous employees. 

Upon receiving the data of the percentage of employees that are in the normal / abnormal range, employers have the option to message their employees to check in / send out actionable information / offer solutions depending on how their process is like internally.

For employees’ health surveys, HealthState will conduct and send out surveys to employees through the portal, and from there employees who chose to answer will contribute to the aggregate data. The questionnaire for this survey is pre-determined and will be further customized with the employers’ needs.

Partnering with MediKeeper for our Health Risk Assessment section, depending on the employees’ health survey, certain questions will fall into a predetermined section that will help identify certain health risks like disease risk, stress and depression risk, smoking, etc.. This will be shown through a pie chart.

Non-Invasive

The employee's information is safe with HealthState, employers will not know exactly who is in the normal or abnormal range but only how much, and when they send out messages, it will go through HealthState in order to push through to the actual employees. 

Clear view ahead

Navigating a dashboard means you should always know what you’re looking at, and know where to go or what to do to find what you’re looking for. In order to ensure our users clearly of what information is being presented, I have designed 1 main navigation and 1 dynamic side parallax sub-navigation.

Upon signing in, users will land on the detailed report page of whichever test they ordered for their program. Depending on how many and which tests they order, those will show up under “Detailed Reports” in the navigation. To see order history or order new tests, users will go to “Test Orders”. Last but not least, to access all the resources, wellness program suggestions, onboarding documents, challenge instructions, etc, users will go to “Resources”.

As our sub-nav is designed to be dynamic and adapt as an assistant to each different section of the dashboard, its content will change to match different sections. The side sub-nav for the detailed report section specifically will help users navigate through all the panels that were tested for. For example, for Stress Hormone, you get a total of 5 panels, stress distribution throughout the day, and stress level at each section of the day.

For our “Test Orders” section, the side sub-nav acts as a checkout process and a dynamic order review updating live information of how many tests they chose, how many employees the tests will be sent to and the total number of test kits ordered.

Filter, filter, filter!

In order to give users the ability to go into details of their detailed reports, we created 5 filters to help assist in guiding the information users want to see.

Again, my goal is for users to always know what they’re looking at and what they choose to look at, I have also designed Filter states to always be present once applied, showing the amount of filters chosen + pill tags that match the color of its filter. The contents of these pill tags are also self-explanatory and will further make it easier for users to recognize their options and what they’re looking at, always.

THE END.