Первый экран сервиса PetPassport

Задача

Разработать цифровой сервис для владельцев животных, который объединяет всю информацию о питомце в одном месте. Важно было создать простой и понятный пользовательский путь — от первого знакомства с продуктом через лендинг до использования основного сервиса. Отдельной задачей было продумать интерфейс веб-приложения так, чтобы пользователь мог быстро вносить данные и легко ориентироваться в информации.

Что было сделано

Разработан лендинг, который презентует продукт и подводит пользователя к переходу в основной сервис или Telegram-бот. Далее спроектирован и отрисован интерфейс веб-приложения.

Схема проекта

  1. Лендинг

    Переходы в GitHub, веб-приложение и Telegram-бот.

  2. Онбординг

    Вход или регистрация перед переходом в приложение.

  3. Главная

    Данные питомца, добавление процедуры, изменение данных, предстоящие процедуры и профиль.

  4. Предстоящие процедуры и история

    Просмотр записей, уведомления и добавление процедуры.

  5. Карточка процедуры

    Редактирование записи, информация о клинике и враче, вложения, рекомендации и направление.

Схема пользовательских переходов PetPassport

Лендинг — дружелюбная стилистика

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

Дизайн лендинга PetPassport

Веб-приложение

Пользователь сразу видит ключевую информацию: имя, характеристики животного и список ближайших процедур. Интерфейс выстроен так, чтобы минимизировать действия: добавить новую запись или перейти к деталям можно за пару кликов. Это делает использование сервиса быстрым и интуитивным.

Экраны входа, регистрации и основного интерфейса

Модальные окна

Отдельное внимание уделено модальным окнам и поп-апам, через которые происходит основное взаимодействие с системой. Добавление процедур, редактирование данных и внесение информации о приёмах реализованы в виде простых и понятных форм. Такой подход позволяет не перегружать основной интерфейс и сохранять фокус пользователя на текущем действии, делая работу с сервисом более удобной и последовательной.

Добавление процедуры, редактирование данных и профиль

Мобильная версия — адаптивы веб-приложения

Адаптация веб-приложения строилась вокруг удобства ежедневного использования. Интерфейс был оптимизирован под мобильные сценарии: быстрый доступ к данным питомца, добавление процедур и переключение между животными.

Мобильные экраны веб-приложения

Адаптивы лендинга

При адаптации лендинга основной задачей было сохранить логику пользовательского пути и конверсионную эффективность на всех устройствах.

Мобильная и планшетная версии лендинга