ActiveLife App— UI/UX case study

These days, the world is transforming regarding how we treat our health. Mobile devices, tablets and wearable devices make it possible to have continuous access to personal health information. These devices can collect data continuously and provide insights into a user’s health and fitness information which could help health providers create a more personalised treatment plan.

However, the lack of interoperability and the presence of data silos prevent users and health professionals from getting an integrated view of health and fitness data. To provide better health outcomes, a complete picture is needed, which combines informal health and fitness data collected by a user together with official health records collected by health professionals. Mobile applications are well-positioned to play an important role in the aggregation since they can tap into these official and informal health and data silos.

Goals and Objectives

A solution was created that would meet both business and user needs in the market where there is a low communication between patients and medical providers on day-to-day bases.

• Create. Create a trustable and convenient platform which will assist both patients and medical providers.
• Provide. Provide users with a single system for tracking and analysing their health data.
• Increase. Increase the number of participants in medical studies to increase knowledge about common medical conditions.

Challenge

This project addresses the problem of shortage of applications of focusing on a person’s health with daily activity tracking, reminders for medical prescriptions and having a hospital account in one place. This data will then help in the early diagnosis of potential medical conditions, as well as assist scientific researchers understanding of existing medical conditions through the participation in medical research that this application offers.

Proposal

Create a mobile application which could demonstrate a positive impact on the healthcare sphere through the integration of health and fitness data from a user device and official health records from hospitals in one place, which can make interesting correlations and suggest changes to the users’ habits and help in preventing or dealing with their health conditions.

Research

The research took as its starting point a review of the main competitors. However, there is no platform which covers all these functions in one application, so the five best applications from the different areas of the project which were Apple HealthApp, HealthSteps, MyHeart Counts, The Diary Health App, CareClinic were chosen and their key features of UI, UX, user flow were studied.

In addition, it was discovered that Health App from Apple was the closest to the ActiveLife application because it gathers all health-related information in one place, which was convenient for users and helps them to be on track with valuable information.

• Apple Health App — Standart application from Apple which consists of all important health information tracked through a user’s phone and which also connects a user with health records from a limited health providers list. However, this option can only be used in the USA.
• The Diary Health App — This application provides individuals with personal health data tracking, survey completion and daily care reminders for improved health outcomes. While this app offers valuable functions, it is possible to use it in the USA and with specific health organisations.
• CareClinic App — This application is the closest analogue to the ActiveLife application. Although it is a useful platform, the UX/UI user experiences are too outdated and some functions are not beneficial for a user.

Key Metrics

Survey

Over 6000 users use the app in Canada to aggregate their health and fitness data in order to complete a picture is needed which combines informal health and fitness data collected by the user together with official health records collected by health professionals.

Through collecting all information from the survey and existing research had revealed several types of users with diverse needs which were combined in two personas that manifest needs and weak points of the existing applications.

User Personas

Tom Brown (Developer, 29 y.o.)

Tom diagnosed with a thyroid deficit last year. He has consulted with an endocrinologist at a local hospital, also has to take synthetic hormones and control their levels through a blood test every 6 months. Tom uses the ActiveLife to be reminded about medications, medical appointments with a specialist and blood tests.

Emma White (Office manager, 35 y.o.)

Emma had diabetes, she often visits different doctors and needs a tool to always keep on hand the records of consultations and prescriptions. This week she consults with one specialist and next week with a different one who will prescribe her new medications. Keeping all the information in one place gives her an opportunity to track all appointments and medications with her day-to-day activity and generate trends over time.

Structure Overview

Till this point, the project had a solid idea and understanding about users and core functions of the application but no definite structure and functionality. The goal of this stage of the project was to organise and structure all the content from the research phase. Also, creating the basic flow forced to think about each step on the path of the users throughout the solution. The basic flow initially was created on paper and after was transferred in digital format.

Style Guide

A style guide is more than a collection of fonts and colours.

“Lato” is a humanist sans-serif typeface used for computer and mobile screens, it is the third most popular font on Google Fonts. It is a modern, friendly sans-serif typeface that follows the minimalistic approach for the project and to complement the interface.

A medical sphere usually associates with the green colour that symbolises nature, life, hope, growth and relaxation. Therefore, the main accent colour was chosen from the Pantone Colour Pallet is Middle Blue with associated with calmness and life. Moreover, for better perception, was decided to create additional pallet to help a user read and analyse different paraments of daily activity.

Wireframe

Using the structure of the user flow, the wireframes were designed. It helped to focus on the functionality rather than on visual appearance. The main screen of the application is the dashboard, where a user could find a prescription list, doctor’s appointments, blood tests and daily activities for the day.

Also, on this stage of the project, the interactive prototype was created in order to test the usability and logic of the application.

Design Components

In order to keep experience intuitive on the project, the consistent design system was built. Atomic principles were used in order to create all components of the project which could be used in the future development of the project like websites, new sections of the application or printables. For the majority of elements were created different stages like active, inactive or disabled.

Final Product

The whole app was meant to provide a seamless experience, so it was decided that to go with a minimalist approach that would both make it easier for a user to navigate throughout the application and clearly display all the data.

Medication

One of the major functions in the application is to remind and trace prescribed medications for a user. Also, it is easy to add new prescriptions from a doctor from an appointment in a hospital.

Daily Activities

All daily activity in the application builds with CareKit from Apple, which lets a user track daily progress and general trends over time. It does not matter whether the app is used on a phone, tablet or one of the wearable gadgets as it is easy to use this section of the app.

Press Plus and in a few simple clicks, weight or heart rate can be added: all other information would be automatically transferred from a user’s phone.

New ways to healthcare

This is the highly formative section where a user can find all his or her appointments, immunizations, bills, different medical researches, and much more.

ResearchKit from Apple lets connect to a much wider medical function, which could lead to groundbreaking discoveries in the medical area with the help of a large variety of users around the world with different medical conditions in various health researches.

Onboarding Flow

Onboarding screens were created with the help of illustrations which gives a user emotional connections and informs him or her about the main functions of the application.

A convenient way of connection

A user could use the app just as a reminder, which helps track prescriptions and doctor appointments or he or she could create a medical assistant connecting all medical data and help others through participation in different medical studies from home.

It’s easy to connect a hospital account to the app, a user will need just 3 clicks and all the data will be on his or her phone.

More screens

The full project consists of more than 70 screens: the registration and sign in / login screens (18), the profile screens (16), the activity screens (10), the medication screens (7), the result section of the app which consists of more than 20 screens from the search option to imported information from a hospital.

Apple Watch

Additional to the application for the phone, the app for Apple Watch was created for more convenient use of prescription reminders and doctor’s appointments as well as tracking the daily activity of a user.

Conclusion

What did I learn?

Designing the app has been a challenging and satisfying journey.
During the development of this project, I realised how important the research stage is. Creating the product for two different audiences is difficult, especially when there are different needs for active users who uses this application every day and passive users who analyse the data and elaborate different type of treatments.
Only after in-depth research in the medical sphere and survey the project become more relevant and truly valuable for users.

What are the next steps?

• Improve user flow
• Develop a comprehensive business model
• Develop the “Questionnaires” flow + App which will combine all existing research
• Develop the product scaling plan (web version)

Final thoughts

A combination of informal health and fitness data and official health records from a hospital is beneficial to provide a complete health picture. ActiveLife application can combine into both the formal and the informal health and fitness data and aggregate the data in one place and also, create a platform for scientific researchers to understand existing medical health conditions. There are a lot of benefits in combining the data coming from wearable devices and sensors, especially, for example, for users with chronic disease, as their conditions need long-term monitoring. By combining official health data with informal data (e.g., daily activity, sleeping habits and daily numbers of steps), doctors can make interesting correlations and suggest changes to the users’ habits and help in dealing with their chronic conditions.
ActiveLife has the potential to change healthcare by empowering users and helping them take control of their health and also, will allow scientific researchers with a more extensive database for their studies.

Thank you for the clap 👏🏻 if you enjoyed this article.

If you have any feedback, I’d like to hear from you. Say hello at hi@juliagale.com or connect on LinkedIn, Behance and Dribbble.