Медична компанія

UX/UI-аудит і редизайн медичного мобільного додатка

2026
Дизайн мобільних додатків
MedTech · Охорона здоров’я
Виклик

Пацієнти медичного сервісу через мобільний додаток замовляють і бронюють візити лікаря. У додатку була прихована навігація, непослідовні екрани й тертя в ключових сценаріях, а перед релізом він мав розширитися новими послугами.

Підхід

Ми провели аудит додатка, описали пріоритетні користувацькі сценарії й проаналізували конкурентів за 10 евристиками юзабіліті Нільсена. Редизайн спирався на науково обґрунтовані й людиноцентричні принципи та нативні мобільні патерни, тож додатком звично користуватися попри складність медичної сфери.

Результат

Додаток отримав нову навігацію й головний екран, де зібрано все потрібне пацієнтові. Ми переробили сценарії бронювання, оплати й медичних анкет, уніфікували дизайн-систему й створили власний стиль ілюстрацій. Нові послуги спроєктовано на тих самих патернах.

50+
Станів основного функціоналу
⧗
CSAT
⧗
Рейтинг додатка
Сіра тека з тисненим написом NDA і словами Medical Mobile App на темно-зеленому тлі
Послуги
Терміни

Липень – жовтень 2026

Галузь

MedTech · Охорона здоров’я

Стек

Figma, FigJam

Деталі, позначені *, узагальнено через NDA
Назви, цифри й екрани змінено, щоб захистити клієнта. Ми показуємо суть роботи: галузь, обмеження й результат.

Дослідження й UX-аудит

Конкуренти лишають пацієнтів у невідомості. З цього ми й почали.

Ми провели аудит наявного додатка й описали чотири пріоритетні сценарії: вхід і реєстрацію, термінове замовлення лікаря, анкету медичної історії та запланований візит лікаря. Саме ними пацієнти користуються найчастіше, і вони формують загальне враження. Коли продукт розростався, аудит охопив і нові сценарії на тих самих патернах.

Ми також порівняли конкурентів за сімома критеріями, серед них модель сервісу, персоналізація, зворотний зв’язок від користувачів і евристики Нільсена. Для цього продукту критичними виявилися три евристики:

01 · Видимість стану системи

Конкуренти рідко показують, на якому етапі запит чи візит.

02 · Запобігання помилкам

Слабкі форми й нечіткі підтвердження ведуть до хибного вибору.

03 · Відновлення після помилок

Майже немає підказок, що робити, коли щось пішло не так.

Приклад зламаного сценарію: від старту до рішення шлях «Так» веде до результату й завершення, а шлях «Ні» закінчується помилкою без виходу
Ефект

Ми заклали дослідницьку основу, щоб визначати пріоритети покращень і проєктувати зрозуміліші й передбачуваніші медичні взаємодії.

Дизайн-система й послідовність

Один продукт — один набір правил

Ми уніфікували типографіку, кольори, відступи, компоненти, іконки й візуальну ієрархію. Десктопні патерни замінили звичними мобільними. Також описали стани компонентів, помилок, завантаження й екранів успіху.

Приклад візуальної мови: шкала бірюзових відтінків від світлого до темного з перемикачем і кнопкою в кольорі бренду
Ефект

Менше непослідовності в інтерфейсі й передбачуваніші взаємодії, а також патерни, які можна повторно використовувати для наявних і майбутніх функцій.

Під NDA · дзвінок 30 хв
Повний кейс покажемо на дзвінку

Реальні екрани, повний аудит і дизайн-система наживо від команди, яка їх створила.

Bohdan Ziniak, Co-founder and Design Director of Flying Age
Богдан Зіняк
Співзасновник & дизайн-директор
bozi@flying-age.com

Навігація й головний екран

Ключові дії були приховані. Ми винесли їх на перший екран.

Меню-гамбургер замінила нижня панель з п’ятьма розділами. На глибших екранах панель ховається, а замість неї з’являється кнопка «Назад», тож користувач зосереджений на завданні.

Ми також спроєктували головний екран-дашборд зі швидкими діями, профілями членів родини, найближчими записами, сповіщеннями й доречними послугами. Для регіонів, де частина послуг ще недоступна, зробили окремий стан.

Приклад головного екрана: привітання, швидкі дії, профілі родини й картка наступного запланованого запису
Ефект

Важливу інформацію й дії стало легше знайти: менше зайвої навігації й зрозуміліша відправна точка для пацієнтів.

Ключові сценарії

Покращили ключові сценарії пацієнта

Ми переробили найважливіші користувацькі сценарії додатка: змінювали логіку взаємодії, а не просто оновлювали окремі екрани.

01 · Вхід і реєстрація

Доопрацювали сценарії автентифікації й реєстрації, покращили інформаційну ієрархію й додали компактний індикатор прогресу, який можна використовувати повторно.

02 · Термінове замовлення лікаря

Переробили шлях від вибору послуги до бронювання, оплати й підтвердження та спроєктували платіжні інтерфейси Stripe у межах його обмежень на кастомізацію.

03 · Анкета медичної історії

Стандартизували макети форм, елементи відповідей і структуру екранів. Покращили читабельність, зменшили інформаційне перевантаження й зробили прогрес зрозумілим на всіх кроках анкети.

04 · Запланований візит і локація

Перенесли патерни бронювання на заплановані візити: покращили пошук лікаря через карту й список, видимість статусів, а також пошук, збереження й вибір адреси.

Приклад екранів ключових сценаріїв: вкладені файли, теги симптомів, картка лікаря з найближчим вільним часом, вибір дати й індикатор прогресу анкети
Ефект

Послідовний і передбачуваний досвід на всьому шляху пацієнта, від реєстрації до бронювання. Чіткіша ієрархія інформації, видимий прогрес і кращий зворотний зв’язок зменшують невизначеність і когнітивне навантаження, тож ключові сценарії стають інтуїтивнішими, особливо коли в медичній ситуації важливий час.

Додатковий функціонал

Розширили досвід пацієнта

Коли продукт розростався, ми перенесли ті самі патерни на нові й допоміжні функції:

Діагностику з категоріями, підпослугами й перевагами; чат чи дзвінок з лікарем на основі наявного сценарію бронювання; оновлену історію з чіткішою ієрархією й статусами, де чат переїхав на окремий екран; і доопрацьований, послідовніший профіль.

Приклад підсумку замовлення й оплати: завантажений медичний файл, збережені платіжні картки й картка зі скаргами пацієнта
Ефект

Продукт може рости, а взаємодії лишаються звичними: новий функціонал легше знайти й зрозуміти.

Власна графіка

Власна візуальна мова

Ми підготували п’ять концептів ілюстрацій і разом з клієнтом обрали лінійний стиль, намальований від руки. Трохи нерівні лінії нагадують ескіз лікаря, а зображення лишаються легкими для сприйняття. Ми створили графіку для послуг, підпослуг і порожніх станів.

Намальовані від руки лінійні іконки медичних послуг, з’єднані однією лінією, і картка «19+ власних зображень»
Ефект

Впізнавана візуальна мова, яка допомагає зрозуміти зміст і робить інтерфейс приязнішим.

Результат

Від окремих екранів до цілісного продукту

Редизайн дав додатку для пацієнтів послідовнішу основу й підтримав розширення медичних послуг.

Зміни
Ours
Theirs
Візуальна ієрархія, типографіка й контраст
Yes
Послідовна дизайн-система й мобільні патерни
Yes
Навігація й інформаційна архітектура
Yes
Головний екран-дашборд
Yes
Ключові користувацькі сценарії
Yes
Сценарії нових послуг
Yes
Стани компонентів
Yes
Власний набір ілюстрацій
Yes