Полностью упаковали клинику интимного здоровья — не как у всех: деликатно, с теплом человеческих рук и удобной записью (наконец-то)
Разработали брендинг, провели исследования и проработали дизайн сайта для клиники интимного здоровья СМИТА. Продумали интерфейс корзины на сайте и перепридумали UX поиска по услугам, врачам и обследованиям. Точно попали в ожидания заказчика и получили ноль правок.
Кто мы
Диджитал-студия Дистанция. Делаем сайты и приложения, сокращаем дистанцию между бизнесом и его клиентами.
Про клиента и задачу
Клиент — клиника интимного здоровья СМИТА из Питера. Направление — интимная медицина для пар, чекапы и скрининг активной жизни.
Недавно у клиники случилось много нового. Сейчас они делают ремонт, в планах — расширяться до сети, открыть госпитальные центры и попасть в топ-5 в своём сегменте.
А ещё у клиники СМИТА появилось понятное позиционирование: забота об интимном здоровье для пар, регулярное наблюдение пациентов вместо разовых приёмов и медицинские услуги с теплом человеческих рук.
Клиника СМИТА закрывает все потребности клиента без трудностей, с которыми пациенты сталкиваются в государственных больницах.
Сервис клиники — это про заботу и людей, которые помогут регулярно следить за здоровьем вместо того, чтобы лечить запущенные заболевания. Пациент может довериться специалистам, а те сами подскажут, какие обследования пройти и когда пора на плановый приём.
Вместе с позиционированием компания решила сменить и визуальный стиль, чтобы тот отражал новые смыслы. С этой задачей они пришли к нам.
Нам нужно было создать брендинг и дизайн сайта, провести исследования и проработать UX. Основные флоу — поиск услуги и чекаут. Важно было сделать запись простой, интуитивной, без лишних действий и стресса.
Хайлайты проекта
- Полностью упаковали клинику всего за 3 месяца: на фирстиль и проектирование ушло 4 недели, на концепцию 2 и ещё 4 — на дизайн. На оставшиеся страницы выделили ещё 3 недели.
- Разработали такой поиск, чтобы в корзину можно было разом добавлять и услуги с исследованиями, и выбирать врача.
- Сделали так, чтобы выбрать время приёма у врача, дополнительно добавить обследования и оформить заказ можно было, не выходя из чекаута.
- Работали над дизайном с нуля: предыдущий сайт клиники невозможно устарел.
- Интегрировали сайт с системой МИС Renovatio, с которой клиент уже работал, так что тут клинике СМИТА не пришлось ничего менять в процессах.
- Соблюли требования к медицинским сайтам — сами изучили юридические особенности и учли их при проектировании.
- Поработали с дизайнером интерьера, который оформлял клинику, — некоторые наши решения он забрал себе в концепт.
- Наслаждались работой: клиенты оказались гибкими и без консервативных требований. Один из ЛПРов — инвестор с большим бэкграундом в ресторанном бизнесе, отсюда насмотренностью в UI и UX сервисов.
Провели исследования и разработали прототип
Выяснили, почему люди предпочитают частные клиники государственным и как выбирают одну среди множества других. В качестве метода выбрали количественное исследование, респонденты — посетители клиник.
ЦА — мужчины и женщины 30+, средний+ доход, пары. Серьёзно относятся к своему здоровью. Не наблюдаются в государственных больницах.
Конечно, на выбор клиник влияют параметры, которые не учесть в дизайне: «работает до позднего вечера», «рядом с домом», «не слишком высокие цены».
Но есть и другие критерии, например удобство записи и доверие к клинике, которое вызывает качественный дизайн сайта. Важно было подчеркнуть, что клиника СМИТА — это про:
- Надёжных и квалифицированных специалистов
- Современный подход в лечении
- Деликатное отношение к пациенту
- Лёгкую и понятную коммуникацию
Обычно на сайтах отдельные корзины для анализов и записи к врачу, поэтому пользователю нужно совершить в два раза больше действий.
Мы решили по максимуму упростить запись и продумали поиск, из которого можно добавлять в корзину сразу всё: анализы, чекапы, запись к врачу и даже процедуры вроде капельницы.
На этапе прототипирования заложили в поиск такую фичу: пациент может искать не только врачей или исследования, а описывать симптомы — умный поиск сам подберёт релевантных специалистов и анализы.
Разработали брендинг
Одновременно с прототипом работали ещё и над брендингом. Нужный стиль нащупывали через мудборд. Нашли идеальное соотношение между рациональностью и эмоциональностью и объединили тепло человеческих рук с клинической точностью и стерильностью.
Ключевой образ в логотипе клиент просил не менять: это цветок эдельвейс, с которым есть семейная история.
«Клиент хотел, чтобы центральным образом был цветок эдельвейса. Цветок — часть истории семьи основателя клиники уже 60 лет. Дедушка привёз эдельвейс в подарок бабушке. Он нашел цветок в Германии, где служил переводчиком. Спустя много лет уже сам клиент оказался в Германии и привез оттуда семена. С тех пор эдельвейсы растут в саду семьи. А еще этот цветок чистоты — символом медицинского призвания нашего клиента, и сопровождает его с 2014 года».
Для иллюстраций мы переиспользовали фрагмента логотипа — лепесток — и сложили из него иконки с интимными зонами. Получились невычурные и невульгарные узнаваемые образы в мягких телесных оттенках, которые отсылают к заботе об интимном здоровье. А фирменными цветами подчеркнули интимность и деликатность.
Для заголовка мы использовали нео-антикву — Tenor sans. Она сочетает изящность антиквы, но с некоторым упрощением. Это делает шрифт более современным — таким же, как и сама клиника СМИТА.
Для контента взяли понятный гротеск — Hauora. Он добавил игривости hand-made стилю за счёт не слишком строгих геометрических форм.
«Мы решили сделать дружелюбный, мягкий визуал с отсылкой к несовершенству человеческого тела. Парадоксально именно несовершенство тела и делает человека совершенным — получается такая игра смыслов и слов».
Ещё мы предлагали клиенту использовать цикличные образы — с отсылкой к циклам жизни или делению клеток, но эта идея не прижилась. Клиника СМИТА захотела остаться в рамках человечного hand-made стиля.
Отрисовали дизайн-концепцию
За основу взяли брендинг, поэтому обошлись одним мудбордом без разброса. Сфокусировались на деталях, которые создают общее настроение — как от личного визита в современную светлую клинику. Вайб сайта — уютное пространство.
«Ощущение от сайта — тягучее тёплое пространство. Такое воздушное, что все элементы интерфейса будто плавают или парят в невесомости. У пользователя должно быть ощущение комфорта, уюта и теплоты».
Интерфейс продумали так, чтобы пользователь сделал всё что ему нужно без труда и стресса. С акцентом на продуктивность, за которую отвечают:
– Воздух и ритм
- Много воздуха и отступов
- Никаких сжатых шрифтов
- Простая навигация без визуального шума и перегруза инфой
– Простые формы и элементы
- Плавные перетекающие формы, мягкие скругления — визуальная метафора безопасности и доброжелательности
- Упрощённые, обтекаемые и воздушные иллюстрации и иконки
- Кнопки — крупные, округлые, с мягкими тенями и градиентами
– Цвета и эффекты
- Мягкие градиенты в сочетании с телесным белым и акцентным фиолетовым
- Без строгих и чистых цветов из брендинга — для веба они слишком акцентные
- Глубокий фиолетовый использовали только в некоторых блоках — для зонирования и ритма
- Текст чёрный с фиолетовым градиентом, чтобы удобнее было читать
«Нужно было создать ощущение, будто элементы плавают. Мы добились этого за счёт лёгких градиентов и объёмных тенюшек».
– Анимация
- Плавная, ненавязчивая, неотвлекающая и минимальная, чтобы пользователь не ждал, когда всё прогрузится
- Основа — интерактивные микроанимации при наведении на элементы, чтобы улучшить взаимодействие пользователя с сайтом
- Градиент на фоне анимирован — цвета будут перетекать друг в друга, создавая ощущение мягкого пространства, в которое хочется укутаться
– Иконки и графика
- Иллюстрации — первостепенны, фотографии — второстепенны
- Реалистичные изображения или векторные формы вместо 3D
- Строгие линии разбавляют воздушность, придают структуру
- Иконки направлений — залитые, акцентные, в остальных блоках — незаметные, тихие и лёгкие
«За счёт воздушности и чёткости элементов есть ощущение медицинской выверенности. Мы не используем сложные формы: так интерфейс будет более устойчивым и чётким».
Концепция была полностью согласована, и поэтому формально она ничем не отличается от итогового дизайна — от клиента мы получили ноль существенных правок и радикальных изменений.
Детально продумали UX с учётом согласованного UI
На этом этапе мы детально прорабатывали два больших флоу и то, каким в будущем будет личный кабинет:
– Поиск
Расположили на стартовой странице и сделали главной фичей сайта. Через поиск можно найти что угодно, не переходя к разделам сайта.
Поиск умный: можно ввести симптом, а он предложит релевантного врача, анализы или исследования. Если подобрать узкого специалиста или анализы невозможно — предложит записаться на приём к терапевту.
Поиск ищет по всем направлениям, но можно включить фильтрацию и искать только по докторам, чекапам, анализам, капельницам или процедурам. Так в выдаче не будет статей из блога или из неподходящих категорий.
Из поиска можно мгновенно положить в корзину анализ, исследование или запись к врачу. Около анализа — кнопка «В заказ», около врача — «Записаться».
– Чекаут
Попасть в чекаут просто, например если выбрать конкретного врача или нажать на корзину. Около имени врача — дни приёма и цена консультации. В корзине подсвечены шаги до оформления.
Если пациент что-то забыл — можно поискать нужный анализ прям в чекауте, возвращаться на главную или в раздел с направлением не нужно.
Когда запись уже оформлена, пользователь автоматически возвращается на страницу с выбором направлений. Информация о приёме и напоминания приходят на почту и в СМС.
– Личный кабинет пациента
ЛК проработали только на уровне прототипов, но планируем добавить его на сайт уже в ближайшем будущем. В личном кабинете пациент сможет удалить запись, отредактировать, поменять время приёма или врача. А также связаться с лечащим врачом или добавить несколько пациентов в один аккаунт, например всех членов семьи.
Основная фича — рекомендации и напоминания, основанные на предыдущем взаимодействии пациента с клиникой.
Авторизация — по номеру телефона. Приветствия сделаем разными — для новых пользователей и для тех, кто уже посещал клинику.
Данные в профиле можно будет заполнить по минимуму или сразу всю анкету — чтобы не тратить время в регистратуре в день приёма.
– Собрали UI-кит и подготовили макеты, чтобы передать в разработку
Мы всегда делаем максимально детальный UI-кит, чтобы разработчикам было проще работать с дизайном.
«Мы огромное внимание уделяем компонентам в интерфейсе. Сразу закладываем, как дальше работать над продуктом и развивать его. Даже если это будем делать не мы, а команда после нас или даже инхаус-команда клиента. У нас всё организовано грамотно и чисто».
Для клиники СМИТА мы собрали полную библиотеку с переменными: цветами, отступами и размерами, чтобы разрабы могли копировать данные, а не выставлять значения вручную.
К анимациям составили описания — с комментариями и референсами. Если будут вопросы — сможем созвониться или связаться с разрабами в чате.
Что в будущем
В бэклоге сейчас такие задачи:
- Доделать личный кабинет — с историей обращений, назначениями и результатами анализов
- Уделить особое внимание безопасности и защищённости личного кабинета, чтобы клиника СМИТА могла хранить данные
- Добавить на сайт чат, чтобы пациент мог связаться с врачом
- Сделать дашборды с трендами по здоровью и результатам анализов
Как нам работалось с Клиникой СМИТА, а им с нами
На проекте было много свободы, потому что клиент полностью нам доверял.
«В фидбэке клиент отметил, что мы прислушиваемся к хотелкам, но делаем это в симбиозе со своей экспертностью и профессионализмом — когда важно, отстаиваем своё видение».
Команда проекта
Рожков Дима — дизайнер
Петров Алексей — бренд-дизайнер
Микнюс Стас — UX-проектировщик
Ошовский Дионис — арт-директор / дизайн-директор
Тимофеева Полина — копирайтер
Запруднов Андрей — директор по маркетингу