В этом проекте я взяла на себя следующие роли:
- коммуникационный дизайнер (дизайнер взаимодействия) (IxD)
- дизайнер пользовательского опыта (UX)
- дизайнер пользовательского интерфейса (UI)
- визуальный дизайнер
- дизайнер бренда
Дизайн взаимодействия: высококачественные интерактивные прототипы и макеты для печати ключевых задач на компьютерах, мобильных устройствах и в рекламе.
Брендинг:
- создание логотипа
- анализ конкурентов
- подбор фирменной палитры
- разработка айдентики
- проработка визуальной концепции
UI/UX дизайн:
- конкурентный анализ
- опросы пользователей и индивидуальные интервью
- карта сайта
- персонажи
- комплект пользовательского интерфейса
- макеты низкой точности
- высокоточные макеты и прототипы
- юзабилити тесты и выводы
Продолжительность: 3 недели
Инструменты:
Инструменты:
- Figma
- Adobe Photoshop
- Adobe Illustrator
- Tilda
“сияние”
центр семейной стоматологии
центр семейной стоматологии
“Сияние”
“Сияние”
краткое описание
Разработка веб-сайта и фирменного стиля для российской стоматологической практики, которая успешно укрепила свои позиции на рынке города Ростов-на-Дону.
Центр семейной стоматологии “Сияние” - это небольшая, уютная, частная клиника в городе Ростов-на-Дону. Располагаясь в спальном районе города, Центр завоевал доверие многих клиентов посредством индивидуального подхода и качеством оказываемых услуг.
2022
описание проблемы
Настоящая проблема заключалась в том, что Центр семейной стоматологии “Сияние” оказался на высококонкурентном рынке. Для того, чтобы отличаться от других практик, необходимо было разработать фирменный стиль и создать удобный веб-сайт для привлечения целевой аудитории при помощи индивидуальной стратегии брендинга.
обзор
Для Центра семейной стоматологии веб-сайт и брендинг разрабатывался с нуля. Клиника основана стоматологом-терапевтом Мариной Ермоленко, стаж работы в стоматологии более двадцати лет.
Для стоматологической практики нужно было разработать полную упаковку брендинга от логотипа до веб-сайта. Задача заключалась в том, чтобы отличаться от других клиник на уже загруженном рынке Ростова-на-Дону, в проработке индивидуального подхода и сочетании основ, для этого были обозначены следующие темы:
Для стоматологической практики нужно было разработать полную упаковку брендинга от логотипа до веб-сайта. Задача заключалась в том, чтобы отличаться от других клиник на уже загруженном рынке Ростова-на-Дону, в проработке индивидуального подхода и сочетании основ, для этого были обозначены следующие темы:
- индивидуальные макеты дизайна сайта
- SEO ориентированный веб-дизайн
- брендинг, который будет яркий, узнаваемый и перекликающийся с УТП (уникальные торговые предложения)
- долгосрочная стратегия, которая интегрирует любые будущие стоматологические услуги.
- Рынок стоматологических практик достаточно загружен и есть необходимость отличаться от других.
- Мало информации о клинике и работниках в Интернете.
- Информацию с контактными данными и отзывами о стоматологии трудно найти или её нет.
- Показать уникальность и повысить узнаваемость стоматологической практики посредством разработки брендинга.
- Привлечь большее количество пациентов в клинику путём разработки веб-сайта, хорошего копирайтинга и SEO.
- Обеспечить удобство написания отзывов о клинике, а также доступность приоритетной информации в Интренете для повышения лояльности.
Я начала своё исследование с конкурентного анализа, чтобы понять подходы других стоматологических клиник. Также, изучив альтернативные решения, хотела выявить проблемы в функциональности и удобстве использования сервисов.
Опросы пользователей помогли мне понять, какая информация наиболее важна при выборе стоматологии, чтобы я могла расставить приоритеты.
И, наконец, провела 20 индивидуальных интервью, которые помогли мне раскрыть пути пользователей в поиске информации и записи на приём, а также выявить их болевые точки.
Опросы пользователей помогли мне понять, какая информация наиболее важна при выборе стоматологии, чтобы я могла расставить приоритеты.
И, наконец, провела 20 индивидуальных интервью, которые помогли мне раскрыть пути пользователей в поиске информации и записи на приём, а также выявить их болевые точки.
- При поиске стоматологии сложно найти контактные данные, при этом возникают трудности записи на приём.
- Важная информация, в качестве отзывов о клинике, не всегда доступна, что вызывает опасения клиента в посещении данной стоматологии.
- Важно показать преимущества похода в небольшую частную стоматологию, где отношение к пациентам индивидуальное и доверительно-располагающее. Как преимущество перед большими клиниками, где лечение находится “на потоке”.
- Большинство опрошенных идут в стоматологическую клинику по рекомендации от знакомых. Следовательно - “сарафанное радио” сильно повышает лояльность клиента.
Клиенту важно найти стоматологию, с лёгкостью записаться на приём в удобное для него время, где он получит качественные услуги, а также помощь по его индивидуальному случаю.
выявление целевой аудитории
Выявление целевой аудитории для проекта - важнейшая составляющая исследования. Образ был разработан путём сопоставления количественных и качественных данных из моих пользовательских опросов и интервью с официальными демографическими данными. Он будет служить важным ориентиром для принятия проектных решений в будущем.
создание основы для дизайна
Эта карта сайта, результат проведенных мной опросов, интервью и исследований конкурентов, показала, что:
- При посещении сайта пациент в первую очередь обращает внимание на предоставляемы клиникой услуги для решения свей проблемы
- Важным аспектом является местоположение и график работы стоматологии
- Решающим фактором при выборе клиники является наличие квалифицированных специалистов, отзывов пациентов и качество стоматологических материалов
Пользователь также может перейти в раздел каталога услуг. После того, как он выберет интересующую его услугу и заполнит форму записи, он получит подтверждение, что его данные успешно отправлены и в ближайшее время с ним свяжется специалист клиники для уточнения удобного времени приёма.
В заключение, я добавила на главную страницу виджет для заказа обратного звонка пользователю. Я приняла это решение на основе исследования, которое показало, что обратный звонок повышает лояльность клиента для выяснения всей необходимой информации о приёме, а также повышает шансы записи в клинику.
В заключение, я добавила на главную страницу виджет для заказа обратного звонка пользователю. Я приняла это решение на основе исследования, которое показало, что обратный звонок повышает лояльность клиента для выяснения всей необходимой информации о приёме, а также повышает шансы записи в клинику.
определение важных задач
Я решила сделать поток задач, сосредоточенных на процессе записи на услугу или бесплатную консультацию специалиста. Заказчик указал, что ему нужен простой способ записи в клинику при помощи веб-сайта для клиентов.
Для удобства пользователя, на главной странице сайта размещена кнопка “Записаться на приём” и гиперссылка на бесплатную консультацию, что поможет быстро связаться с клиникой и прийти на осмотр.
Для удобства пользователя, на главной странице сайта размещена кнопка “Записаться на приём” и гиперссылка на бесплатную консультацию, что поможет быстро связаться с клиникой и прийти на осмотр.
User flow
шаблоны проектирования с помощью быстрого создания эскизов
Определяя организацию страниц с помощью набросков, я поняла, что наилучший путь - это чётко организованные блоки, в которых достаточно свободного пространства и интуитивно понятные шаблоны проектирования, характерные для просмотра информации или перемещения между страницами сайта.
В коротких разделах освещаются основные атрибуты клиники: опыт специалистов, гарантии качества и команда профессионалов. На главной странице сайта, так же показаны предоставляемые услуги, контакты и сопутствующие товары. Эти разделы предлагают пользователю записаться на приём в клинику с помощью кнопок CTA.
Бесплатная консультация была ещё одним важным требованием со стороны заказчика. Чтобы привлечь внимание к этой функции, я добавила кнопку CTA на главный экран. Я выделила эту функцию при помощи виджета обратного звонка пользователю в нижнем правом углу сайта, сделав его анимированным, что позволило привлечь к нему внимание среди других опций навигации.
Бесплатная консультация была ещё одним важным требованием со стороны заказчика. Чтобы привлечь внимание к этой функции, я добавила кнопку CTA на главный экран. Я выделила эту функцию при помощи виджета обратного звонка пользователю в нижнем правом углу сайта, сделав его анимированным, что позволило привлечь к нему внимание среди других опций навигации.
проектирование информационной иерархии
От набросков я перешла к высокоточным прототипам в оттенках серого. Работа в чёрно-белом режиме помогла мне выявить проблемы с масштабом и информационной иерархией.
Я позаботилась о том, чтобы история небольшой стоматологической клиники по-прежнему была важной особенностью и, чтоб были подчёркнуты те аспекты бизнеса, которые отличают эту практику от других, их этические и устойчивые методы работы.
На главном экране пользователь открывает фотографию дружного коллектива Центра семейной стоматологии “Сияние”, которая вызывает доверие у клиента.
Я позаботилась о том, чтобы история небольшой стоматологической клиники по-прежнему была важной особенностью и, чтоб были подчёркнуты те аспекты бизнеса, которые отличают эту практику от других, их этические и устойчивые методы работы.
На главном экране пользователь открывает фотографию дружного коллектива Центра семейной стоматологии “Сияние”, которая вызывает доверие у клиента.
уточнение визуального дизайна
В графической части логотипа изображён элемент, сочетающий в себе образ зуба и бриллианта, что отражает в себе название стоматологии “Сияние”.
Соединив эти два элемента, получился уникальный графический элемент, который отражает в себе чистоту, блеск и шик здоровой красивой улыбки.
Соединив эти два элемента, получился уникальный графический элемент, который отражает в себе чистоту, блеск и шик здоровой красивой улыбки.
Для центра семейной стоматологии “Сияние” было разработано 7 версий логотипа (1 основная и 6 дополнительных), адаптированных для применения заказчиком в разных ситуациях.
В цвете
Ахроматическая гамма
В ходе разработки текствой части логотипа рассматривались разные варианты. С одной стороны шрифт должен быть элегантным и лаконичным, а с другой - легко читаемым, как на маленьких, так и на больших носителях.
Для логотипа Центра семейной стоматологии “Сияние” был выбран шрифт Moniqa, в котором идеально сочетаются вышеуказанные характеристики.
Для логотипа Центра семейной стоматологии “Сияние” был выбран шрифт Moniqa, в котором идеально сочетаются вышеуказанные характеристики.
Помимо шрифта для логотипа были подобраны шрифты для фирменного стиля и для веба.
В ходе разработки были выделены цветовые сочетания, отлично дополняющие друг друга.
В ходе разработки были выделены цветовые сочетания, отлично дополняющие друг друга.
Фирменный стиль органично смотрится на разных носителях, также может быть реализован в разнообразных вариациях и сочетаниях.
Логотип и фирменный стиль выполнены в красивых благородных цветах отлично дополняющих друг друга. Разработанный брендинг отражает основное направление деятельности компании, её ценность и ключевые характеристики. Он обеспечивает лёгкую узнаваемость бренда, привлечение внимания, доверие и отличие от конкурентов.
Четыре пользователя из десяти отметили, что галерея сертификатов специалиста интуитивно не понятна и следует её доработать, добавив элементы навигации.
Кроме того, несколько пользователей обратили внимание на анимированный элемент с текстом. Так как диагональ монитора была небольшая, невозможно было полностью дочитать текст на объекте до исчезновения. Следовательно, анимацию необходимо было заменить.
В итоге, никто из участников не счёл цветовую палитру неподходящей.
Тест на удобство использования показал, что пролистывание галереи интуитивно не понятно, а также анимация в одном из блоков не совсем удачная.
Чтобы решить эти проблемы, в раздел галереи с сертификатами были добавлены элементы навигации. А именно стрелочки, указывающие на возможность пролистывания фотографий. Далее был переделан блок анимации элемента с текстом таким образом, чтобы вне зависимости от диагонали монитора пользователя все элементы были видны и хорошо читаемы.
Кроме того, несколько пользователей обратили внимание на анимированный элемент с текстом. Так как диагональ монитора была небольшая, невозможно было полностью дочитать текст на объекте до исчезновения. Следовательно, анимацию необходимо было заменить.
В итоге, никто из участников не счёл цветовую палитру неподходящей.
Тест на удобство использования показал, что пролистывание галереи интуитивно не понятно, а также анимация в одном из блоков не совсем удачная.
Чтобы решить эти проблемы, в раздел галереи с сертификатами были добавлены элементы навигации. А именно стрелочки, указывающие на возможность пролистывания фотографий. Далее был переделан блок анимации элемента с текстом таким образом, чтобы вне зависимости от диагонали монитора пользователя все элементы были видны и хорошо читаемы.
понимание того, что работает, а что нет
Высокоточные прототипы позволили мне протестировать ключевые пользовательские задачи, которые я определила в своём исследовании. Полное применение пользовательского интерфейса показало, что хотя задачи ставились относительно простыми, некоторые элементы требовали пересмотра.
Используя свой прототип, я создала юзабилити-тест, чтобы оценить, насколько успешным был мой дизайн. Цель данного теста заключалась в том, чтобы выяснить насколько удобен, интуитивно понятен и доступен дизайн.
Мне было особенно интересно изучить успешность процесса записи на услуги и бесплатную консультацию, так как это были одни и самых важных аспектов сайта моего заказчика.
Юзабилити-тест подтвердил большинство моих дизайнерских решений. У пользователей было очень мало проблем при взаимодействии с сайтом.
Вопросы...
После того, как участники выполнили тесты, я попросила ответить их на следующие вопросы:
Используя свой прототип, я создала юзабилити-тест, чтобы оценить, насколько успешным был мой дизайн. Цель данного теста заключалась в том, чтобы выяснить насколько удобен, интуитивно понятен и доступен дизайн.
Мне было особенно интересно изучить успешность процесса записи на услуги и бесплатную консультацию, так как это были одни и самых важных аспектов сайта моего заказчика.
Юзабилити-тест подтвердил большинство моих дизайнерских решений. У пользователей было очень мало проблем при взаимодействии с сайтом.
Вопросы...
После того, как участники выполнили тесты, я попросила ответить их на следующие вопросы:
- Настолько подходящей вы нашли цветовую палитру?
- Были ли какие-либо аспекты дизайна, которые вы сочли трудными/надоедливыми?
- Было ли что-то в дизайне, что вам понравилось?
- Поделитесь, пожалуйста, другими комментариями, которые у вас есть (по желанию).
Как только пользователь заходит на сайт, он может ознакомиться со всеми услугами, что есть в клинике. В каждом из разделов есть подробное описание и кнопка “Записаться”, что помогает с лёгкостью записаться на приём.
После того, как пользователь выбрал услугу или записался на бесплатную консультацию, он попадает на страницу об успешной отправке данных. Это обеспечивает обратную связь с пользователем и можно далее знакомиться с акциями клиники и остальным перечнем услуг.
Также есть возможность заказать обратный звонок пользователю. Исследования показывают, что такой формат взаимодействия с клиентом повышает вероятность его записи на приём.
После того, как пользователь выбрал услугу или записался на бесплатную консультацию, он попадает на страницу об успешной отправке данных. Это обеспечивает обратную связь с пользователем и можно далее знакомиться с акциями клиники и остальным перечнем услуг.
Также есть возможность заказать обратный звонок пользователю. Исследования показывают, что такой формат взаимодействия с клиентом повышает вероятность его записи на приём.
окончательный дизайн
В разработанном мною веб-сайте и брендинге Центра семейной стоматологии “Сияние” я сосредоточила внимание на истории и миссии компании, подчеркнув при этом её современный подход к стоматологии. На главной странице выделены основные преимущества компании, опыт специалистов и индивидуальный подход. Если пользователям интересно узнать больше, они могут перейти на вкладку “О клинике”, где есть описание стоматологической практики, её история и команда.
На главном экране и во всём дизайне CTA побуждают пользователей на запись в клинику: как на бесплатную консультацию, так и на предоставляемые услуги.
На главном экране и во всём дизайне CTA побуждают пользователей на запись в клинику: как на бесплатную консультацию, так и на предоставляемые услуги.
P. S.
Создание веб-сайта и брендинга для Центра семейной стоматологии “Сияние” научил меня работать с заказчиком, который занимается малым бизнесом.
Перед тем, как начать работу над дизайном, мною была проведена большая подготовительная работа, которая включала в себя исследования пользовательского опыта, аналитику данных опросов пользователей, изучение психологии клиента, создание юзабилити-тестов, тестирование гипотез на работоспособность и функциональность веб-сайта.
У моего заказчика был ограниченный бюджет и он хотел быть уверен, что принимает лучшие решения для своей компании, которые будут способствовать долгосрочному успеху.
Было изучено несколько платформ-конструкторов для сайтов, и выбрана самая оптимальная по цене и функциональности. Я хотела быть уверена, что заказчик не только получит отличный дизайн, но и сможет легко редактировать и поддерживать свой новый сайт.
Перед тем, как начать работу над дизайном, мною была проведена большая подготовительная работа, которая включала в себя исследования пользовательского опыта, аналитику данных опросов пользователей, изучение психологии клиента, создание юзабилити-тестов, тестирование гипотез на работоспособность и функциональность веб-сайта.
У моего заказчика был ограниченный бюджет и он хотел быть уверен, что принимает лучшие решения для своей компании, которые будут способствовать долгосрочному успеху.
Было изучено несколько платформ-конструкторов для сайтов, и выбрана самая оптимальная по цене и функциональности. Я хотела быть уверена, что заказчик не только получит отличный дизайн, но и сможет легко редактировать и поддерживать свой новый сайт.
