Время чтения: 8 минут
Ищете слаженную команду разработки?
Поможем с дизайном и разработкой приложений для бизнеса и стартапов
Дизайн — это не только цвета и стильные графические эффекты, но прежде всего логика, удобный пользовательский путь и проработка разных сценариев. Без UI/UX-дизайнера, который сделает продуманный веб-сайт, не обойтись. В этом убедились наши клиенты из MedCare.
Они запустили MVP, разработанный только программистом, и быстро поняли: что-то не так. Тогда они обратились к нам, и мы исправили ошибки, приведя дизайн в порядок. Мы успешно справились с задачей — посмотрите, как выглядит сайт MedCare. Детальнее о процессе расскажем в нашем новом кейсе.
К нам обратилась компания MedCare — медицинский сервис, который помогает пациентам вызвать медсестру на дом для забора анализов. MedCare агрегирует предложения различных лабораторий, позволяя выбрать нужные исследования в одном месте. Это удобно: если анализы требуются в нескольких лабораториях, медсестра заберет биоматериал за один визит и передаст их в нужные центры. Компания работает в Москве и Московской области.
Среди партнеров MedCare ведущие лаборатории: INVITRO, KDL, LabQuest, Metametrix и другие, а в каталоге свыше 2000 исследований — от общего анализа крови до исследования генома, которое выявляет риски по здоровью.
Каталог медицинских исследований на сайте MedCare
Сайт MedCare изначально делали веб-разработчики без участия дизайнеров. Получился работающий продукт, но в дизайне было много недочетов, которые ухудшали пользовательский опыт и негативно влияли на конверсии.
Некоторые кнопки не выполняли нужных действий, взаимодействие с сервисом было непродуманным, а интерфейс перегружен текстом. Верстка на разных экранах отличалась, а современные UI/UX-решения, которые могли бы повысить вовлеченность, отсутствовали.
Макет из Figma заказчика со старой версией сайта — так выглядела главная страница
Еще один макет со старым дизайном: здесь использованы разные цвета для одного и того же акцента с ценой. А яркий красный цвет, хоть и должен привлечь внимание к скидке, ассоциируется с ошибкой и может повысить тревожность. Для медицинских порталов лучше выбрать более нейтральные оттенки
Новым клиентам сайт казался неудобным, а у текущих пользователей возникали сложности с оформлением заказов, что могло снижать их лояльность. В результате MedCare рисковал уступить конкурентам с более удобными и привлекательными платформами.
Этой командой стали мы, Purrweb. У нас уже был опыт работы с медицинскими проектами: мы разработали платформу Lytic Health, которая помогла заказчикам привлечь $400 000 инвестиций, веб-приложение Biogeek для анализа лабораторных исследований и сервис онлайн-консультаций с психотерапевтами «Поговорим.онлайн». Благодаря этому мы понимали, какие задачи должен решать медицинский веб-сайт — и с точки зрения бизнеса, и для удобства пользователей.
Точка А и точка Б в рамках проекта MedCare
Мы пообщались с заказчиками, обсудили их пожелания и боли, изучили существующие макеты. Когда собрали все вводные, полетели в работу.
В рамках этого проекта нам предстояло:
Далее расскажем подробнее про этапы работы.
ЧИТАЙТЕ ТАКЖЕ Кейс мед приложения для онкоцентров: разработали платформу, которая помогает врачам и пациентам
Чтобы продумать логику работы сервиса, мы всегда привлекаем системного аналитика — так было и с MedCare. Он подготовил BPMN-диаграммы — специальные схемы, которые показывают, какие шаги проходит пользователь и как обрабатываются данные внутри системы.
BPMN-диаграмму можно сравнить с картой, где видно, какие действия происходят, в каком порядке и как они связаны между собой
Зачем это нужно для дизайна? Благодаря таким схемам мы заранее учитываем все возможные сценарии использования сервиса, чтобы ничего не упустить. Это помогает избежать ситуации, когда сайт уже готов, а разработчики вдруг обнаруживают, что не хватает важного экрана или кнопки, без которых система работает некорректно.
Прежде чем разрабатывать финальный дизайн в цвете, мы обязательно делаем вайрфреймы — упрощенные схемы страниц без графики и сложных деталей, но с проработанными флоу.
Так выглядели вайрфреймы для сайта MedCare
Это важный этап, который помогает решить сразу две задачи. Во-первых, заказчик видит структуру будущего сайта и может внести правки на раннем этапе, а это снижает риск правок в финальном дизайне. Во-вторых, сами дизайнеры получают четкое представление о логике страниц и взаимодействии элементов — итоговый продукт получается более удобным и продуманным.
Иногда можно встретить мнение, что вайрфреймы — лишний шаг в проекте. Но мы так не думаем: в этой статье объяснили, почему команда Purrweb никогда не пропускает этап отрисовки вайрфреймов.
Заказчик хотел сохранить несколько элементов из старого дизайна при обновлении сайта:
Мы переосмыслили эти элементы, чтобы создать современный, чистый и визуально привлекательный дизайн. Покажем на примерах.
Поработали с цветами и добавили более современную и интересную палитру.
В интерфейсе MedCare много акцентов: кнопки с призывами к действию, информация о лабораториях, сроках готовности анализов, цены и другие важные элементы. Чтобы не перегружать и не запутать пользователя, у каждого типа информации есть свой цвет.
Цветовые акценты для удобной навигации. Пользователь быстро запоминает обозначения и интуитивно ориентируется в сервисе, экономя время на поиск нужной информации
Сделали интерфейс дружелюбнее за счет скруглений и более мягких форм. Изначально в дизайне использовались острые и брутальные формы и геометрический шрифт Raleway. Вместе эти решения создавали ощущение строгости и отстраненности.
Некоторые элементы со старой главной страницы
Такой дизайн противоречил ключевому посылому MedCare — сдача анализов должна быть комфортной и спокойной процедурой. Чтобы лучше передать ценности бренда — заботу и внимание к пациентам, мы смягчили визуальный стиль, и округлили карточки, кнопки и другие элементы.
Дизайн карточек на главной странице, которые рассказывают о преимуществах MedCare
Дизайн корзины
Для типографики выбрали шрифт Montserrat Alternates — он выглядит более плавным и дружелюбным.
Разные начертания шрифта Montserrat Alternates, которые мы используем на сайте
Органично вписали фотостиль в дизайн главной страницы. Фотографии вызывают доверие и делают стиль сайта более живым и близким пользователям. В хиро-пейдж на главной странице разместили фото медицинского специалиста, чтобы подчеркнуть профессионализм компании, а также добавили снимки, связанные с медициной.
Хиро-пейдж
Карточки с акциями
Добавили интерактивные элементы и сделали анимацию для раздела с блогом, которая подскажет, какие анализы сдавать при разных симптомах.
Собрали все элементы в UI-kit — библиотеку готовых компонентов, чтобы ускорить добавление новых страниц и блоков, сохраняя единый стиль дизайна.
Один из блоков UI-kit — кнопки в разных состояниях
На платформе есть две роли: пациент и медсестра. Страницу пациента могут просматривать все пользователи, а доступ к интерфейсу медсестры открыт только зарегистрированным специалистам.
Старшая медсестра выступает супер-админом и может просматривать вызовы младших медсестер
Пациент может выбрать нужные исследования, заказать анализы для себя или другого человека, оплатить их и вызвать медсестру на дом. Медсестра, в свою очередь, получает список вызовов, видит данные клиентов и перечень требуемых анализов, а также формирует свое расписание.
Пройдемся по основным флоу со стороны пациента.
Из общего каталога исследований пользователь может попасть на отдельную страницу анализа и изучить всю важную информацию о нем подробнее. Здесь же можно указать предпочтения по методу взятия крови — из пальца или вены. Да, не самая приятная тема, но как иначе провести диагностику 🧑⚕️
Если пользователь авторизован, с этой страницы он может сразу перейти в корзину. Если нет — предлагаем ему сначала ввести свои данные, и только потом перейти в корзину
Для взятия анализов нужно оформить вызов медсестры. Сначала пользователь указывает удобную дату и время. А после на отдельной странице указать в комментарии дополнительную информацию и выбрать способ связи.
После того, как пользователь нажимает кнопку оформить вызов, просим указать тип исследования — это сэкономит время и медсестре, и самому пациенту. Но всегда оставляем выбор и предлагаем несколько опций — выбрать конкретный анализ из каталога, загрузить направление врача, которое увидит медсестра, или получить консультацию.
Учли даже такой кейс, когда удобнее определиться с исследованиями на месте 😷
На сайте можно заказать анализы как для себя, так и для другого человека — например, для пожилого родственника или ребенка. При оформлении заказа необходимо указать имя и данные пациента, чтобы лаборатория правильно обработала анализы и выдала достоверные результаты.
После оформления заказа пользователь видит подтверждающий экран с сообщением об успешном оформлении — это нужно, чтобы пользователь понял, что сделал все правильно.
Такие экраны нужны в дизайне обязательно: они снимают вопросы и тревогу при выполнении действий
Большое число пользователей заходит на сайт MedCare с телефонов, поэтому мы сделали адаптивный дизайн для мобильной версии сайта.
Страницы сайта для мобильной версии
Обновленный сайт MedCare в релизе — посмотрите, как он выглядит. Клиенты остались довольны результатом — удобная навигация, продуманный дизайн и улучшенная логика взаимодействия сделали сервис понятнее и комфортнее для пользователей.
Наше сотрудничество с MedCare оказалось не только продуктивным, но и долгосрочным: спустя год после завершения проекта клиенты вернулись с небольшими улучшениями для главной страницы.
А для нас это самый главный показатель: если клиенты возвращаются к нам, значит, результат работы действительно оправдал их ожидания 😀
➡️ Нужен современный и удобный дизайн, который работает на ваш бизнес? Команда Purrweb готова помочь! Уже 10+ лет создаем UI/UX-дизайн для веб-сайтов и мобильных приложений, работаем с разными индустриями и знаем, как превратить ваши идеи в удобный и привлекательный продукт.
Оставьте заявку — разберем вашу задачу, погрузимся в детали бизнеса и предложим оптимальное решение.
Почему Purrweb
Экспертиза в дизайне. Создаем IT-продукты с крутым дизайном более 10 лет. В нашем портфолио — 550+ проектов в самых разных сферах: IoT, EdTech, маркетплейсы, дейтинг-приложения и многое другое.
Решаем все дизайн-задачи. В команде Purrweb есть эксперты по UI/UX-дизайну, графическому дизайну, моушн-графике и 3D. Закрываем любые запросы: от проектирования интерфейсов и создания стильной айдентики до разработки анимаций, иллюстраций и 3D-моделей.
Превращаем идеи в реальные продукты. Вам не нужно приходить с детально проработанным техническим заданием. Мы возьмем ваши идеи, детализируем их, предложим креативные подходы и превратим задумку в работающий продукт.
Насколько публикация полезна?
Оцени эту статью!
1 оценок, среднее 5 out of 5.
Оценок пока нет. Поставьте оценку первым.
Так как вы нашли эту публикацию полезной...
Подписывайтесь на нас в соцсетях!
Читать
Ваша заявка уже у нас :)
Обычно ответ занимает от 12 до 24 рабочих часов.
Может, вы хотите запланировать онлайн встречу?
Извините, что-то пошло не так при отправке запроса.
Попробуйте позже.