Have an idea?

Healher – an app with personalized health plans

Healher – an app with personalized health plans - Website Development - Photo 1
Overview

Healher helps people who work at home to stay healthy

Healher is designed for people who spend many hours a day in front of a computer. Thanks to the company’s smart branded wristband, the app knows everything about the user. It recommends a visit to a particular doctor, the types of activities that should be included in the daily activities list, and those that are best avoided. The goal of the service is to ensure that the user’s health is improved.

Client Healher LLC
Services
  • Discovery
  • Wireframing
  • Interactive Prototyping
  • UI design
Business need

Client request

Our client was passionate about creating an app that would work with the company’s smart wristband. The smart wristband collects all available metrics, from sleep quality and stress levels to blood oxygen levels and ECG. In general, the application needed to be simple and easy to navigate and motivate people to take care of their health and use it daily.

Our role

After getting the brief from the client, we immediately understood the idea of the project. We realized this project should be successful because we already have experience developing healthcare applications. We delved deeper into the product with a SWOT analysis to understand the problems users have in this area. We conducted a business analysis to determine what kind of functionality the user needs.

Project
Problems & solutions
Problem
1

The Healthcare app needs to get the user interested in its plans to get monetization.

2

Theoretically, there are a huge number of activities that affect a person's health. And the problem here is what kind of activities to offer the user so that they meet his needs and interests.

3

Users often lose motivation and quit when there is not enough interest.

Solution
1

To engage the user, we offer several plans to choose from: which one better fits the user's goal. This way, there is a high probability that we will hit the user's interest, and he will buy a subscription.

2

We propose to conduct a survey as soon as a user registers to collect the necessary information about the user. After that, the system will offer the user exactly those activities that meet his needs.

3

In order to increase motivation and retain users, we propose to implement a notification system and give the user the ability to track progress.

Research stages

Research process

Before starting the design, we always conduct solid research to dive deeper into the project and find solutions to the problems. We analyzed the client’s best competitors in the healthcare space with a SWOT analysis. We brought in a business analyst to find the best way to implement features correctly and bring profit to the product.

Stages
  • SWOT analysis
  • Business analysis
  • Map
  • User Flow
Healher – an app with personalized health plans - Website Development - Photo 6
Stage 1
Competitor SWOT Analysis

A SWOT analysis is a strategic planning tool that helps your project find the best solutions and overcome challenges. We consider each competitor’s strengths, weaknesses, opportunities, and threats. It helps us determine which features are worth including in our application and which are better left out or refined.

What we did 

We took four of the best direct competitors in the healthcare space to study. When studying the competitors, we took into account not only the presence of certain features but, in general, how convenient it is to use the application, how it complies with modern principles of creating mobile applications, and the company’s overall market position. As a result of the analysis, we identified a list of key features that are worth implementing in the Healher:

  • Quick registration with only name and phone number and code authentication
  • Survey after registration in the app
  • The ability to choose a plan from several offered
  • Show today’s progress on the home screen
  • Show user activity statistics
  • Offer a wide range of activities in the recommendations
  • Ability to change the plan and edit, add activities to the plan
Stage 2
Business Analysis

At the business analysis stage, we choose the optimal solution, prepare requirements, assess which functionality is most important for the customer, and prepare and approve documentation. This documentation allows you to minimize development costs because everything is already considered and detailed. Developers only have to create the product according to the documentation and do not have to invent anything. Also, business analysis allows you to accurately estimate the development budget, which helps plan the company’s budget.

What we did

Our business analyst created a detailed list of features by writing a user story for each feature. To create this document, we use the key findings from the research and the input data from the customer. We used the ICE framework to prioritize the features because it’s great for startup projects. Using the ICE framework, we have planned future releases of the application; now, the client can freely plan further project budgeting.

Healher – an app with personalized health plans - Website Development - Photo 7
Stage 3
Map

Once we have decided on all the functionality, we need to visualize the application’s architecture, which helped us organize the information, create a roadmap for future development, understand what screens we need to develop, and scope the work exactly. As a result, we came up with six main flows. This map also helped us determine what to do in subsequent phases of the project.

Stage 4
User flow

In the user flow phase, we visualize the sequence of actions that the user performs to achieve his goals when using the application. We do this by asking questions about the action and giving options for positive and negative scenarios where the user can go as he performs the action and achieves his goal. User flow helps us identify hidden moments that we may not think about at first glance when developing an idea. If you forget about User Flow, you may have problems in the product development phase.

In addition, we use User Flow to agree with the customer on scenarios for operating the product or functionality.

Healher – an app with personalized health plans - Website Development - Photo 8
Design stages

Design

Once we have a solid analytical foundation, we can turn it into a user-friendly interface. At this stage, we have to decide what the interface will look like, where this or that element will be located, create a clickable prototype, and find the style in which the design will be created.

Stages
  • Wireframe
  • Moodboard
  • Design Concept
  • UI Design
Stage 1
Wireframes

A wireframe is a rough sketch of the structure of a product. It allows you to quickly get an idea of how things will work, and it doesn’t take much time to design. We use wireframes first to save time and money. At the same time, we usually create a clickable prototype to do some user testing because users often think differently than we would like them to. After that, we fixed some of the features and went to the moodboard stage.

Healher – an app with personalized health plans - Website Development - Photo 9
Healher – an app with personalized health plans - Website Development - Photo 10
Stage 2
Moodboard & Design Concept

To determine the visual direction and style of the interface, our team creates moodboards and coordinates them with the client. This allows us to choose the most appropriate solution before moving on to the UI.

Based on the approved moodboard, we create the first visual concept of the application to demonstrate the chosen style in real conditions before creating the final UI design for all screens.

Stage 3
UI Design

When designing the UI, we always create a set of styles for colors and typography. We use design tokens to name the styles. This helps designers to speak the same language as engineers. We also create components for common elements to use their instances and modify instances a bit. At the same time, we collect all the styles and components in the UI Kit – a collection of assets that contain a set of design elements. It not only helps to systematize design elements, but it is also necessary for front-end development. This approach simplifies work on the project and saves design and development time.

As a result, the design is modern and fresh. There is no visual overload. Everything looks simple. We used emojis as graphic elements, and they added freshness and curiosity. We developed a dark theme according to the modern rules of mobile development.

Healher – an app with personalized health plans - Website Development - Photo 13
Project
Features we implemented
Tracking metrics with a wristband

Healher is committed to using the latest technology. The company has developed a smart wristband that knows everything about the user. It collects all available metrics, from sleep quality and stress levels to blood oxygen levels and ECG, etc. The device is offered to connect to the application immediately after the survey. All metrics are always available on the Your Metrics screen. If any metric is out of the norm, the user is notified and advised to take action, such as 'see a doctor'.

Healher – an app with personalized health plans - Website Development - Photo 14
Creating individual plans

The app creates an individual activity plan for each day. To create a plan, the user is prompted to take a survey. Based on the survey results, the user is offered 3 plans to choose from. The user can either select the entire plan or individual recommendations that suit them personally, thereby customizing the plan. The current plan is presented as a to-do list pinned to the home page. This allows the user to see their daily progress. In addition, the user can add new activities to the plan from the library.

Healher – an app with personalized health plans - Website Development - Photo 15
Tracking of statistics for each activity

The user needs to know his success and progress according to the plan, and his motivation depends on it. That's why we have added statistics for each activity. So the user can easily compare his performance and understand which aspect is worth more attention.

Healher – an app with personalized health plans - Website Development - Photo 16
Large library of activities

Whether it is a workout or a cooking recipe, the user is prompted to watch a video. In addition to the video, there is always a text description on the activity screen in case the user is offline and doesn't have time to download the video.

Healher – an app with personalized health plans - Website Development - Photo 17
Functional
Work continues on new features
Online sessions with experts

In the next release, we will implement the possibility of holding online sessions with coaches, psychologists, psychotherapists, nutritionists, etc. A person needs to have live communication. And with the help of direct communication with specialists, the user can explore himself more deeply. Providing free support to a person in a crisis situation is also very important.

Thematic chats

Many people need to stay in touch and be part of a community. Communities are also where people learn new things and share information with other people. That's why we're adding chat functionality in the next release. Users can find the chat they are looking for using search and tags. To avoid flooding the chat, every user will have to be verified before joining.

Achievement system

In the next release, we will implement another way to motivate users - the achievement system. We will create a collection of rewards with original illustrations using a mascot. The illustrations should be unusual and memorable, so the user is constantly interested in discovering new ones.

Conclusion
Results

The result was a well-designed application with all the necessary functionality for people who care about their health, a user-friendly interface, and a top-notch modern design.

Our client was very satisfied with the result of the work because we paid special attention to each stage and prepared a full package of development documentation. We also wrote the functionality for the next release stages during the prioritization phase. Now the Healher team can confidently plan the project budget for the future.

As design specialists, we have gained experience working with innovative products in the healthcare industry. We expanded our knowledge through research and communication with healthcare professionals. Once again, we were convinced of the effectiveness of our approach, but at the same time, we noticed the shortcomings in the different phases of work and eliminated them by streamlining the process.

Healher app has already shown good results on the market, and we are working on new functionality.

40+ screens

With a unique and high-quality design, the screens are connected in a clickable prototype.

240 hours

Complex teamwork that produced such a great result.

56%

Of active users in the last 30 days.

2200 kCal

On average, a user logged one day of activity through our app last month.

Our cases
More cases
We work with both small startups and large corporations.
Saifast – logistics web app - Website Development - Photo

A system for a logistics company that improves the freight management

Wayels – Courier System Dashboard - Website Development - Photo

Wayels is a company that provides logistics services.

You can upload maximum 5 files
Some of your file not loaded, because maximum file size - 5 mb