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.

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.

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

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.

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.

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.

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.

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.

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.

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.