Design case: UX/UI develop medical mobile app

CASE: UX/UI development of a medical mobile application

OkDok

TASK DESCRIPTION

Develop a medical application that eliminates the need to physically visit clinics for consultations with doctors.

STAGES OF WORK

Before starting work, I take into account all the comments and requirements of the customer, and also work with objections and understanding the market.

1

Assessment and analysis of requirements

Before starting work, I will definitely find out the capabilities of programmers and stack on which the project works or will work.

2

Getting to know the team and the stack

Market assessment and competitor assessment. A detailed analysis with a presentation of the strengths and weaknesses, as well as features of the strongest competitors.

3

Market analysis, participants and target audience

If this is a finished project, then I will definitely conduct research: in-depth interviews and processing statistical information.

4

UX (User Experience) Analysis

Before starting development and design, it is necessary to describe and display the main flow (paths) of the user in flowcharts.

5

Compiling a User Flow (User Path)

In fact, this is the creation of a site skeleton based on the User Flow built earlier. Sketches are quickly created, they are easy to edit and initially test.

6

Creating a Wireframe (Project Wireframe)

Applying design and improving the user interface, working out small details, such as shadows or gradients.

7

UI design
and prototyping

Testing can be carried out both at stage 4 and at stage 8 - on the finished design. Depends on the goals and objectives of the project.

8

Interface
testing

After testing, i need to analyse the data and process it to select the most successful design or proofreading and validate the testing.

9

Analytics and data
statistics

MIND MAP OF PROJECT

The diagram links the main sections of applications:

- MedCard
- Treatment control
- Chat
- Profile

Mind Map

COMPLETION: ALL DESIGN AND RESEARCH WORK IS PERFORMED BY ME

From logo design and applications to research and implementation of the final project with prototypes and tests.

REVIEW OF COMPETITORS

Among the competitors there are both free applications and individual aggregators

Applications
consultants

Applications
aggregators

Applications
data storage

State
applications

COMPETITOR ANALYSIS

Competitor analysis allows you to track the trends characteristic of the market and focus the user's attention on important details

1

Competitors additional pages of doctors so that users can familiarize themselves with their background.

2

When doctor enter named medicines tips from the databases are displayed.

3

Competitors allow users to add files many ways.

CUSTDEV

Study of the client's needs by conducting special "in-depth" interviews.

Needs Research

The need for health control

The need for 24/7 consultations

The need for consultations without leaving home

The need for data storage

ROLES IN THE PROJECT

Молодые люди, которые следят за своим здоровьем и часто ходят к врачу.

Люди 25-35 лет

Хронические болезни

Люди с хроническими заболеваниями, которым нужен контроль и регулярные консультации с врачами.

Observation learning is necessary for the service to reach out to all registered and requested users. Particular attention should also be paid to the study of practical experience.

Target audience

SOLUTION

Develop a convenient file storage system

Implement an automated analysis system

Allow users to be in control of their health

Develop online chat and video consultations

APP LOGO AND ICON DEVELOPMENT

COLOR SPECTRUM

#4E6BFF

#F0F4FF

#ffffff

#293885

FONTS

For heading

For text

For signatures

GRID

The grid helps to create a basic structure, a skeleton of "invisible" lines, on which design elements lie. This links them into a common system and rationally supports the composition.

Grid

WIREFRAMES

The framework is necessary for the implementation by the customer and the performer on exactly how the screens interact with each other, and not on how they look.

Wireframe

DESIGN SYSTEM

#ff5400

The atomic approach makes it easy to make changes to the entire design. A design built from components can quickly change.

Design system

AUTO LAYOUT

#ff5400

Figma's Auto Layout tool allows for padding and aligning corresponding modules automatically

Smart approach to design

PROJECT INFORMATION

>230

Over 230 screens

The extensive project is filled with prototype screens.

>50

Over 50 components

More than 50 components make up the design system and allow you to change the design in a few clicks.

SOFTWARE THAT USED

SCREENSHOTS FROM FIGMA

USER FLOW

A pre-built user or screen flow allows you to provide the maximum number of options for the development of events with the participation of the user.

User flow

#ff5400

FEATURES

#ff5400

Step by step

Step-by-step adding with user hints will help you to carry out a complex action step by step, and not just add a file. This action includes the use of procedures and drugs with additives.

If necessary, the user will be able to transfer data to the doctor by e-mail or to any messenger for study.

Documents share

#ff5400

The scan feature helps you load "blank" documents with no background in the correct position.

Functional

#ff5400

Automatic Document Recognition
saves the user's time and automatically fills in the fields to transfer them to the "Control" section.

Automatic recognition

#ff5400

Prompts for manual entry will reduce time and help avoid errors when entering identified diseases or identified indicators.

Hints in the set

#ff5400

Medication calendar

The medicine calendar is connected simultaneously with 2 sections: storage and control. You can flag medications and manage notifications.

TESTING

During the work on the project, various tests were repeatedly carried out to study and improve the user experience.

Each significant feature went through research, including: a / b testing, card sorting, desk testing, usability benchmarking and others.

UX Testing

#ff5400

ANALYTICS

After testing and launching live users into the application, it is necessary to regularly "slice" analytical data.

Analytics data example: retention, bounces, app deletions, outages, heatmaps.

Analytics report

#ff5400

FINAL PRODUCT

Profile

Chat

Control

MedCard

ONBOARDING

MEDICAL CARD DESIGN

The main function of a medical record is the storage and transfer of medical data without the use of physical media with automatic upload to the cloud.

Data storage

MEDICAL CARD DEVICE

STEP-BY-STEP ADD

CONTROL DESIGN

The main function of the Control section is automatic and independent control of the state of health through the application.

Health control

DEVICE SECTION CONTROL

#ff5400

Эффективность лечения основывается на аналитике данных внесенных в раздел дневник самонаблюдения.

Дневник самонаблюдения позволит отслеживать эффективность лечения.

Мои лекарства позволяют добавлять или удалять лекарства.

Календарь лекарств позволяет отслеживать прием лекарств

#ff5400

Отображает рекомендованные зарядки и упражнения.

На основе наличия диагноза подбираются рекомендации по диете и образу жизни.

Отображает рекомендованный режим питания и продукты.

Награды - элемент геймификации, который подогревает интерес.

CHAT DESIGN - CONSULTING

The chat with a doctor section was created for communication with doctors through online consultations in text form in a chat or through video consultations.

Chat with a doctor

DEVICE CONSULTATIONS

PROFILE DESIGN

The key value of the profile is in fine-tuning the application for each user.

Profile

Ready for challenging tasks

I am considering various options and forms of cooperation

Job offer

+995 595 09 11 98 / +7 977 287 94 57 / tsanavagn@gmail.com

© All information provided on the site is relevant.
Tsanava George - UX/UI designer.
tsanava.com