Кейс: сайт медицинской клиники. Проект учебный – заказчик реальный

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

Про проект

Клиент и задача

Заказчик – медицинская клиника премиум класса, оказывает медицинские услуги в высоком ценовом диапазоне. Задача была разработать современный сайт медицинской клиники, с удобной навигацией, проработать форму записи на приём и вызов врача на дом.

Общение с заказчиком

При общении с заказчиком были выяснены основные бизнес цели, которые должны быть закрыты созданием сайта:

  • увеличение продажи программ (самые маржинальные услуги)
  • сокращение нагрузки приёма звонков на администраторов (увеличить количество заявок через онлайн-форму, удобная запись на приём и/или вызов врача на дом)
  • исчерпывающая информация о враче (опыт и специализация врача, звания и достижения, отзывы)

Заметки после разговора с заказчиком (подробнее)

Кейс: сайт медицинской клиники. Проект учебный – заказчик реальный

Исследования

После брифа клиента, самая важная часть это общение с пользователями, которые будут пользоваться будущим продуктом. Даже, если вы сами являетесь «потенциальным клиентом» разрабатываемого продукта, забудьте про себя. Ищите возможность пообщаться с людьми, чтобы понимать, как они будут пользоваться вашим продуктом. Лучше с одним, но всё-таки провести интервью, чем вообще ни с кем не общаться и сделать продукт из серии «я точно знаю как надо, ведь я тоже пользуюсь такими сайтами / приложениями».

Видов исследований много, какие именно подойдут под вашу задачу решать вам. В моём случае я выбрала интервью с пользователями.

Интервью с пользователями

Идеально это личная встреча (я проводила онлайн). Если так не получается (например, клиент не хочет предоставлять клиентов из базы или не хочет тратить деньги на подбор подходящих респондентов, к сожалению, такое тоже бывает), ищите через знакомых, читайте форумы / отзывы и там попробуйте найти и пообщаться с людьми.

Если не удаётся пообщаться лично, то можно договориться с потенциальными клиентами – отправить им список вопросов и предложить записать ответы голосовым сообщением (одному из респондентов подошла именно такая форма общения). Да, это не идеальный вариант, но даже это лучше, повторюсь, чем вообще ни с кем не общаться.

Итак, были проведены интервью с пользователями, выявлены барьеры и проблемы пользователей и выдвинуты гипотезы их решений. Сводка проблем/рекомендации после интервью (подробнее)

Кейс: сайт медицинской клиники. Проект учебный – заказчик реальный

Информационная архитектура сайта

После интервью с пользователями были составлены основные сценарии поведения на сайте (исходя из потребностей пользователей) и разработана информационная архитектура сайта.

Кейс: сайт медицинской клиники. Проект учебный – заказчик реальный

Проектирование

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

Правки и новый вариант прототипа

Была полностью переработана структура главной страницы, переработаны блоки и расположение элементов на главной странице. Проработаны внутренние страницы и проведено первичное тестирование, которое показало, что пользователи практически без ошибок справляются с заданиями (закрывают основные сценарии):

  • поиск врача и запись на приём
  • поиск исследований и предварительная запись
  • выбор и оформление программы обслуживания
  • вызов врача на дом
Кейс: сайт медицинской клиники. Проект учебный – заказчик реальный

Дизайн

Moodboard

У заказчика требование к визуалу было одно «что-то стильное, как Apple в области клиник». Референсов не было, так как всё что сейчас есть среди конкурентов не нравилось заказчику ( люди в халатах, летающие таблетки или оборудование и пр.).

Поэтому сначала были описаны примерные требования к визуалу, которые могут подойти к сайту. Далее был подбор референсов из разных областей по типам (образы, типографика, цвета, формы).

Кейс: сайт медицинской клиники. Проект учебный – заказчик реальный

На основе финального moodboard был собран и согласован UI-kit, выбраны основные цвета и шрифты.

Итог

По визуальному отображению ключевых страниц, было произведено множество итераций, согласований и доработок. Главная страница сделана в виде полноэкранных блоков. На первом экране показываем ссылки на основные разделы сайта (врачи, диагностика, а также вовлекаем пользователя создать паспорт здоровья). По ссылкам сразу можно перейти в нужный раздел.

Кейс: сайт медицинской клиники. Проект учебный – заказчик реальный

Для экрана Направления предложила подобрать подходящие визуальные образы вместо стандартных фотографий.

Кейс: сайт медицинской клиники. Проект учебный – заказчик реальный

Контент, который прислал заказчик (фотографии врачей / оборудования клиники вообще не подходили под концепцию). В итоговом варианте были использованы фотографии врачей с разных медицинских клиник, чтобы показать, какие именно должны быть фотографии на сайте.

Кейс: сайт медицинской клиники. Проект учебный – заказчик реальный

При проведении интервью часть респондентов, кто сталкивался с поиском врачей говорили, что им важно получить полную информацию о враче (специализация врача, какие заболевания он лечил и т.д.).

Разрабатывая страницу врача предложила разбить информацию о враче на вкладки (используя паттерн из интернет-магазина): опыт, клинические случаи, отзывы, режим работы, образование, лицензии. При тестировании респондентам дополнительно задавался вопрос «Как информация в табе Клинические исследования может вам помочь?». Ответы были очень похожи: если в списке будет описан похожий случай заболевания и врач с ним работал или, то почти в 90% сразу же запишется на приём

Кейс: сайт медицинской клиники. Проект учебный – заказчик реальный
Кейс: сайт медицинской клиники. Проект учебный – заказчик реальный

Одной из ключевых страниц была страница описания программы (это самые маржинальные услуги для бизнеса). Для примера показана программа для ребёнка (ведение на дому). Здесь было решено показать не только список услуг, входящих в программу, а представить их в виде таблицы, чтобы пользователям удобно было ознакомиться с программой. Отдельно выделили услуги, которые предоставляются только в клинике.

Кейс: сайт медицинской клиники. Проект учебный – заказчик реальный

Про курс

Вся разработка велась в рамках учебного курса Everest school.

Сразу скажу это не первый мой курс и не первая моя работа. Когда я устроилась несколько лет назад на должность стажёра UX-проектировщика, так сложилось, что у меня не было куратора (наставника, старшего коллеги и т.д) в этом направлении. Всё приходилось изучать самой на практике. За последние пару лет я прошла несколько курсов. На вопрос, а зачем постоянно учиться отвечу так, мне хотелось структурировать свои знания (сначала теоретические, потом практические) «- всё ли верно я делаю?, - а как у других?, - а если нет данных, что тогда?». И другие вопросы, которые постоянно возникали во время работы.

Почему именно этот курс – для меня важно было получить понятную и «живую» обратную связь именно от человека, у которого на практике больше знаний и опыта, чем у меня, чтобы самой выйти на другой уровень. Еженедельные созвоны в Zoom, оперативные ответы на любой вопрос в Telegram, советы и лайфхаки. В общем то менторство, которое я хотела, получила в полной мере, за что Владимиру отдельное спасибо.

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

11
Начать дискуссию