Главная

Дизайн

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

Клиент и задача: разработать дизайн ключевых страниц сайта, который выделит проект среди конкурентов

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

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

Клиент обращался к одним подрядчикам с задачей разработки и создания всего сайта: от прототипов до кода. Но ему не понравился дизайн, тогда он обратился к нам, чтобы мы выполнили эту часть работы.

Результат: улучшили прототипы и разработали дизайн, который попадает в ожидания клиента и ЦА

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

Мы проработали разделы «Каталог», «Карточка анализа»‎, «‎Главная страница», «‎Оформление заказа»‎ и «Личный кабинет». В результате создали 71 макет, которые покрывают все возможные пользовательские сценарии. Например, весь процесс оформления заказа включает 26 экранов, которые открываются в зависимости от действий и выбора пользователя.

Елена Горелова

менеджер

Юлия Космынина

веб-дизайнер

Алексей Алексеев

руководитель креативного кластера

На скриншоте показан процесс, как пользователь проходит различные этапы оформления заказа: от добавления товара в корзину до завершения покупки и дозаказа услуги

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

На скриншоте — пример пути пользователя, когда он выбирает место, где будет сдавать анализы. Новые и постоянные клиенты лаборатории увидят разные экраны, если выберут «‎Сдать анализы дома»

Мы собрали UX/UI-кит. Дизайн-набор состоит из различных элементов управления, иконок, цветов и многого другого. Благодаря ему клиент может создать новые страницы или внести изменения в разделы самостоятельно, оставаясь в стилистике бренда.

Показываем, как выглядит UX/UI-кит. Он включает цветовую палитру, инструкции по сборке карточек и по организации элементов для различных сценариев

Брендинг

Создаём, обновляем и развиваем бренды

Как мы это сделали

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

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

Многие этапы мы проводили параллельно, чтобы ускорить процессы

Провели исследования аудитории и конкурентов

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

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

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

На скриншоте собрали разные элементы, которые используем в дизайне. Кнопки, поля для ввода, чекбоксы и многое другое. Они получились максимально плавными, чтобы передать ощущения безопасности

Елена Горелова, менеджер проекта

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

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

Улучшили прототипы

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

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

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

Алексей Алексеев, руководитель направления брендинга и дизайна

«На проекте работали в составе проектной группы с клиентскими разработчиками. Задача оказалась сложнее, чем оценивали изначально: это случилось из-за недостаточной проработки прототипов, на основе которых в дальнейшем разрабатывали дизайн макетов сайта.

Мы провели большую работу по анализу текущих прототипов, пересмотрели структуру и логику пользовательского пути, предложили клиенту новые решения. Это помогло улучшить UX/UI и избежать потенциальных проблем, которые могли снизить конверсию в целевое действие.

В работе активно участвовал клиент, что помогло нам точнее попасть в ожидания. Он делился мнением, оставлял комментарии и объяснял бизнес-логику процессов. Благодаря этому получилось сформировать дизайн, который лучшим образом решает задачи проекта и упрощает пользовательский путь. В части внешнего вида он помогает выделиться среди конкурентов, соответствует ожиданиям целевой аудитории».

Разработали визуальное представление и подготовили UX/UI-кит

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

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

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

В процессе работ над дизайном и улучшением прототипов формировался UX/UI-кит, а после согласования мы дополняли его. В нём собрали все цвета, иконки, навигацию, шрифты, заголовки, работу кнопок и выделение текста, то есть все визуальные правила. В будущем это поможет клиенту сохранить согласованность дизайна во всём проекте. Например, вот согласованная палитра цветов сайта:

Юлия Космынина, дизайнер

Мы работали над ключевыми разделами, которые формируют весь путь пользователя — от поиска информации до заказа услуги. С нашей стороны планировалась только визуальная часть, но прототипы пользовательского сценария потребовали детальной проработки. Мы внесли коррективы и приступили к визуалу.

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