Уложитесь в мой дедлайн?
Oops! Something went wrong while submitting the form.
Дизайн — это не только цвета и стильные графические эффекты, но прежде всего логика, удобный пользовательский путь и проработка разных сценариев. Без UI/UX-дизайнера, который сделает продуманный веб-сайт, не обойтись. В этом убедились наши клиенты из MedCare.
Они запустили MVP, разработанный только программистом, и быстро поняли: что-то не так. Тогда они обратились к нам, и мы исправили ошибки, приведя дизайн в порядок. Мы успешно справились с задачей — посмотрите, как выглядит сайт MedCare. Детальнее о процессе расскажем в нашем новом кейсе.
К нам обратилась компания MedCare — медицинский сервис, который помогает пациентам вызвать медсестру на дом для забора анализов. MedCare агрегирует предложения различных лабораторий, позволяя выбрать нужные исследования в одном месте. Это удобно: если анализы требуются в нескольких лабораториях, медсестра заберет биоматериал за один визит и передаст их в нужные центры. Компания работает в Москве и Московской области.
Среди партнеров MedCare ведущие лаборатории: INVITRO, KDL, LabQuest, Metametrix и другие, а в каталоге свыше 2000 исследований — от общего анализа крови до исследования генома, которое выявляет риски по здоровью.
Сайт MedCare изначально делали веб-разработчики без участия дизайнеров. Получился работающий продукт, но в дизайне было много недочетов, которые ухудшали пользовательский опыт и негативно влияли на конверсии.
Некоторые кнопки не выполняли нужных действий, взаимодействие с сервисом было непродуманным, а интерфейс перегружен текстом. Верстка на разных экранах отличалась, а современные UI/UX-решения, которые могли бы повысить вовлеченность, отсутствовали.
Новым клиентам сайт казался неудобным, а у текущих пользователей возникали сложности с оформлением заказов, что могло снижать их лояльность. В результате MedCare рисковал уступить конкурентам с более удобными и привлекательными платформами.
Чтобы сайт MedCare не проигрывал конкурентам, заказчики решили привлечь внешнюю команду с сильной экспертизой в UI/UX дизайне, которая переработает логику сайта, спроектирует понятный пользовательский путь и улучшит визуальную составляющую.
Этой командой стали мы, Purrweb. У нас уже был опыт работы с медицинскими проектами: мы разработали платформу Lytic Health, которая помогла заказчикам привлечь $400 000 инвестиций, веб-приложение Biogeek для анализа лабораторных исследований и сервис онлайн-консультаций с психотерапевтами «Поговорим.онлайн». Благодаря этому мы понимали, какие задачи должен решать медицинский веб-сайт — и с точки зрения бизнеса, и для удобства пользователей.
Мы пообщались с заказчиками, обсудили их пожелания и боли, изучили существующие макеты. Когда собрали все вводные, полетели в работу.
В рамках этого проекта нам предстояло:
Далее расскажем подробнее про этапы работы.
Чтобы продумать логику работы сервиса, мы всегда привлекаем системного аналитика — так было и с MedCare. Он подготовил BPMN-диаграммы — специальные схемы, которые показывают, какие шаги проходит пользователь и как обрабатываются данные внутри системы.
Зачем это нужно для дизайна? Благодаря таким схемам мы заранее учитываем все возможные сценарии использования сервиса, чтобы ничего не упустить. Это помогает избежать ситуации, когда сайт уже готов, а разработчики вдруг обнаруживают, что не хватает важного экрана или кнопки, без которых система работает некорректно.
Прежде чем разрабатывать финальный дизайн в цвете, мы обязательно делаем вайрфреймы — упрощенные схемы страниц без графики и сложных деталей, но с проработанными флоу.
Это важный этап, который помогает решить сразу две задачи. Во-первых, заказчик видит структуру будущего сайта и может внести правки на раннем этапе, а это снижает риск правок в финальном дизайне. Во-вторых, сами дизайнеры получают четкое представление о логике страниц и взаимодействии элементов — итоговый продукт получается более удобным и продуманным.
Иногда можно встретить мнение, что вайрфреймы — лишний шаг в проекте. Но мы так не думаем: в этой статье объяснили, почему команда Purrweb никогда не пропускает этап отрисовки вайрфреймов.
Заказчик хотел сохранить несколько элементов из старого дизайна при обновлении сайта:
Мы переосмыслили эти элементы, чтобы создать современный, чистый и визуально привлекательный дизайн. Покажем на примерах.
Поработали с цветами и добавили более современную и интересную палитру.
В интерфейсе MedCare много акцентов: кнопки с призывами к действию, информация о лабораториях, сроках готовности анализов, цены и другие важные элементы. Чтобы не перегружать и не запутать пользователя, у каждого типа информации есть свой цвет.
Сделали интерфейс дружелюбнее за счет скруглений и более мягких форм. Изначально в дизайне использовались острые и брутальные формы и геометрический шрифт Raleway. Вместе эти решения создавали ощущение строгости и отстраненности.
Такой дизайн противоречил ключевому посылому MedCare — сдача анализов должна быть комфортной и спокойной процедурой. Чтобы лучше передать ценности бренда — заботу и внимание к пациентам, мы смягчили визуальный стиль, и округлили карточки, кнопки и другие элементы.
Для типографики выбрали шрифт Montserrat Alternates — он выглядит более плавным и дружелюбным.
Органично вписали фотостиль в дизайн главной страницы. Фотографии вызывают доверие и делают стиль сайта более живым и близким пользователям. В хиро-пейдж на главной странице разместили фото медицинского специалиста, чтобы подчеркнуть профессионализм компании, а также добавили снимки, связанные с медициной.
Добавили интерактивные элементы и сделали анимацию для раздела с блогом, которая подскажет, какие анализы сдавать при разных симптомах.
Собрали все элементы в UI-kit — библиотеку готовых компонентов, чтобы ускорить добавление новых страниц и блоков, сохраняя единый стиль дизайна.
На платформе есть две роли: пациент и медсестра. Страницу пациента могут просматривать все пользователи, а доступ к интерфейсу медсестры открыт только зарегистрированным специалистам.
Пациент может выбрать нужные исследования, заказать анализы для себя или другого человека, оплатить их и вызвать медсестру на дом. Медсестра, в свою очередь, получает список вызовов, видит данные клиентов и перечень требуемых анализов, а также формирует свое расписание.
Пройдемся по основным флоу со стороны пациента.
Из общего каталога исследований пользователь может попасть на отдельную страницу анализа и изучить всю важную информацию о нем подробнее. Здесь же можно указать предпочтения по методу взятия крови — из пальца или вены. Да, не самая приятная тема, но как иначе провести диагностику 🧑⚕️
Для взятия анализов нужно оформить вызов медсестры. Сначала пользователь указывает удобную дату и время. А после на отдельной странице указать в комментарии дополнительную информацию и выбрать способ связи.
После того, как пользователь нажимает кнопку оформить вызов, просим указать тип исследования — это сэкономит время и медсестре, и самому пациенту. Но всегда оставляем выбор и предлагаем несколько опций — выбрать конкретный анализ из каталога, загрузить направление врача, которое увидит медсестра, или получить консультацию.
На сайте можно заказать анализы как для себя, так и для другого человека — например, для пожилого родственника или ребенка. При оформлении заказа необходимо указать имя и данные пациента, чтобы лаборатория правильно обработала анализы и выдала достоверные результаты.
После оформления заказа пользователь видит подтверждающий экран с сообщением об успешном оформлении — это нужно, чтобы пользователь понял, что сделал все правильно.
Большое число пользователей заходит на сайт MedCare с телефонов, поэтому мы сделали адаптивный дизайн для мобильной версии сайта.
Обновленный сайт MedCare в релизе — посмотрите, как он выглядит. Клиенты остались довольны результатом — удобная навигация, продуманный дизайн и улучшенная логика взаимодействия сделали сервис понятнее и комфортнее для пользователей.
Наше сотрудничество с MedCare оказалось не только продуктивным, но и долгосрочным: спустя год после завершения проекта клиенты вернулись с небольшими улучшениями для главной страницы.
А для нас это самый главный показатель: если клиенты возвращаются к нам, значит, результат работы действительно оправдал их ожидания 😀
➡️ Нужен современный и удобный дизайн, который работает на ваш бизнес? Команда Purrweb готова помочь! Уже 10+ лет создаем UI/UX-дизайн для веб-сайтов и мобильных приложений, работаем с разными индустриями и знаем, как превратить ваши идеи в удобный и привлекательный продукт.
<a class="blog-modal_opener">Оставьте заявку</a> — разберем вашу задачу, погрузимся в детали бизнеса и предложим оптимальное решение.
Экспертиза в дизайне. Создаем IT-продукты с крутым дизайном более 10 лет. В нашем портфолио — 550+ проектов в самых разных сферах: IoT, EdTech, маркетплейсы, дейтинг-приложения и многое другое.
Решаем все дизайн-задачи. В команде Purrweb есть эксперты по UI/UX-дизайну, графическому дизайну, моушн-графике и 3D. Закрываем любые запросы: от проектирования интерфейсов и создания стильной айдентики до разработки анимаций, иллюстраций и 3D-моделей.
Превращаем идеи в реальные продукты. Вам не нужно приходить с детально проработанным техническим заданием. Мы возьмем ваши идеи, детализируем их, предложим креативные подходы и превратим задумку в работающий продукт.
.svg)
.webp)
