Optimised Healthcare

A cloud-based bioinformatic platform and biomedical analysis service for practitioners and individuals serious about health and wellness management, which focuses on applying the P4 medicine principle - Personalized, Predictive, Preventive, and Participatory. 

As the lead designer & front-end developer, my task was to architect information, design and develop front-end for the product dashboard in colaboration with CEO, CTO and stakeholders.

I took full responsibility of how the product looks and feels, and wrote all of the front-end code for the product.

An Overview

As soon as I started working on the system, I created a "bird's view" diagram, to get to know product and the company better. Also, I defined the process that I thought was suitable in order to achieve company's goals, with the resources available. The process consisted of six steps:

1. Competition Research
2. Product Analysis
3. IA & UX Design
4. UI Design
5. Producton
6. Testing

User Journey

The user’s journey starts with collecting a range of biological samples by using a home collection kit, and a lot of other personal data that the user provides by filling out the questionnaires. After that, the data is being processed by medical staff and user gains an access to the dashboard, which contains:

1. Medical Data and Lab Results: genetics, pharmacogenomics, blood, saliva & urine, microbiome, etc.

2. Assessment Results: lifestyle, stress scores, anxiety scores, sleep quality scores, nutrition and fitness habits, etc.

3. Reports with analysis of the above, focusing on: health status, health risk potentials, heritable diseases, medication efficacy, fitness, environmental, psychological and skin health.

4. Personal Recommendations for changing the user's habits in order to prevent a disease.

5. Various functions, like keeping a food diary, measurement tracking, overviewing medical-related calendar events.

A Home Collection Kit

The Style Guide

Since it was insisted on keeping the branding assets pictured above, although I implied that they were not good,  I used them as a base to create the Style Guide: a basic set of rules that will be applied across the system to maintain consistency, and speed up the process of developing interface elements for the new features that engineers could come up with.

The Signup Proccess

Signup required a lot of input data from the user, so I decided to break it up into a few steps. Also, new users might be unfamiliar and cautious with providing the data, and this solution enabled a nice way of explaining the whys.

Login Screen

After the simple version of Login form was rejected, the new one was done in similar fashion to signup, but with the layout inverted to make it harder to mix with signup screens.

Assessments

Assessments are the first thing that users face after signing into the dashboard. It's where they'll leave their personal data mentioned above. Here're a few wireframes and a final mock-up of a modal window that contains the form they're about to fill.

The tricky part to structure and handle was that, in some cases, there were a lot of conditional sub-questions. Interaction with some of them is shown on a little video below, recorded live in browser.

A Few Mobile Concept Screens

An artificial intelligence concept, where I tried to make filling forms less boring. Instead of the old-fashioned clicking and typing, the user is rather communicating with the service, which simulates instant-messaging platforms that everybody loves to use.

The Dashboard

The biggest challenge with the dashboard was to form a solid and understandable information architecture, with so many different data that needs to be read, understood and found easiliy by users at any time and occasion given. The navigation menu was also a challange to execute, which can be seen in many iterations of the product.

A card-based design approach was used for the main content. It was the best way to ensure that scanning a of lot of data is easy, the information is digestible and visually pleasing. It also made it easier to scale across various screen sizes on all sorts of devices.

Marketing Website Concept

A quick marketing website mock-up with a Sample Collection Kit box packaging design proposal is shown below.

AYA

AYA was a one-day project, an attempt to rebrand Optimised Healthcare product and redesign its interface. The main structure, architecture and experience was kept, but visually, its interface was made a totally different story. Here are a few eye-candy mock-ups.