Контекст

Медицинский центр Adaptogenzz, имеют несколько филиалов в Москве. Данный коммерческий проект выполнялся пока я был в ExtentLab: я самостоятельно реализовал полный редизайн сайта.

Основные задачи

• Понять, с какой целью пользователи будут заходить на сайт

• Проанализировать конкурентов в том же сегменте. Выявить сильные и слабые стороны

• Присвоить новый визуальный характер сайту, на основе трендов, целевой аудитории и конкурентов

• Отрисовать все страницы, чтобы пользователи могли закрывать свои главные запросы: узнавать информацию о клинике и врачах, записываться на прием, читать новые статьи, узнавать о новых акциях.

Аналитика

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

Вводные данные

Изначально сайт имел примерно такое обличие:

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

Конкурентный анализ

Имея вводные данные, я приступаю к аналитике. Вначале стараюсь ответить на самые важные вопросы, чтобы «не уплыть» не туда уже в процессе отрисовки:

Зачем клиенту нужен сайт?:

Повысить доверие к клинике и для записи на прием

Почему пользователи выберут именно его?:

• Врачи с большим опытом и подтвержденным образованием.

• Несколько клиник в Москве.

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

И уже после приступаю к конкурентному анализу:

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

Функциональный прототип

На этом этапе я фиксирую содержание каждого блока на всех страница: объем текста, количество медиа-контента и так далее.

Отрисовка экранов

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

Весь список эмоций и ассоциаций которые связаны с проектом:

Безопасность, Надежность, Здоровье, Доброжелательность, Выздоровление, Опытные врачи, Компромисность, Больница, Обследования и анализы, Доверие, Медицинский халат, Лекарства, Качество услуг, Уникальность, Доступность.

До 3-х, на которых будет завязан проект:

Безопасность, Качество услуг, Надежность

Референсы

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

Визуальная концепция

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

Отрисовка всех экранов

Имея утвержденную главную страницу, начинаю отрисовку всех страниц с адаптивами. Выделю ключевые страницы:

Также поработал с рекламными материалами:

Результат, вывод

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