Дизайн и разработка сайта для студии перманентного макияжа Евгении Шевела - “MyLife Beauty Studio” в Киеве.

Мы обеспокоены тем, что основная масса бьюти и фешн сайтов однотипные, скучные и безликие. Этим проектом мы показали, что минимал может быть неповторим (пока его не повторят, конечно), чтобы этого добиться, безусловно нужно обладать тонким чувством вкуса, а копировать “тренды” - не наш метод.

Клиент: Евгения Шевела

Исполнитель: команда студии Geometric Digital Agency

Макеты дизайна: https://drive.google.com/drive/folders/1Un37U1RD-orqzlbJMghQSQhedgvXQLbf?usp=sharing

Проект реализован в Figma: Ссылка по запросу.

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

Основные задачи проекта:

1. Проанализировать нишу перманентного макияжа в Украине и конкретно Киеве
2. Выделить основные проблемы и преимущества конкурентов
3. Провести маркетинговые сессии с заказчиком с целью выяснить все возможные конкурентные преимущества, а также боли, как самого заказчика, так и потребителей его услуг
4. Создать минималистичный дизайн с акцентом на контенте, но в то же время уникальный, женственный (но не слишком слащавый)
5. Создать такую структуру сайта, при которой заказчик самостоятельно и без особых навыков мог бы полноценно управлять сайтом, заниматься перестановкой блоков для тестирования, включать и выключать блоки на каждой странице в мобильной и десктопной версии по отдельности, создавать дополнительные страницы-лендинги, формировать их структуру по своему желанию, наполнять и формировать портфолио работ, создавать каталог товаров и много других полезных функций, о который вы сможете узнать из этой презентации.

Подробные задачи:

1. Мы определили, что сама тематика весьма деликатная и вызывает много вопросов и страхов у потенциального потребителя.
2. Целевая аудитория - молодые девушки, женщины среднего и старшего возраста.
3. ЦА зачастую обладает не очень высоким уровнем IQ, не учитывать этот факт нельзя.
4. В результате пришли к выводу, что сайт должен внушать доверие и позитивные впечатления, но не должен быть “кричащим”. 
5. Сайт должен быть очень информативен, но не содержать много сложного текста, так как основная ЦА явно не станет их читать.
6. В то же время сайт должен отвечать на все возникающие страхи потребителей и их вопросы.
7. Сайт должен быть построен по принципу лендинга не “уговаривающий” купить услуги, а объясняющий, успокаивающий и радующий от итогов получения услуги.
8. Административная панель сайта должна быть одновременно проста в использовании и довольно гибкая, чтобы заказчик имел доступ ко всем элементам, разделам, страницам, подписям, ссылкам, блокам и настройкам сайта, о которых мы постараемся рассказать ниже.
9. Конечно же нужно учесть и максимально проработать мобильную версию сайта, так как на неё идёт основной трафик посещений.

В качестве Системы Управления Сайтом мы выбрали Wordpress так как, во-первых, “съели собаку” на этом движке, во-вторых, проект не подразумевает сложных интеграций функционала и будет более чем достаточен для реализации поставленных задач даже с учётом возможного дальнейшего масштабирования проекта.

Аудио отзыв заказчика об админке (взято из рабочей переписки в телеграме без просьбы оставить отзыв, то есть - чистый порыв заказчика в момент общения).

Скриншот отзыва из гугла 

http://geometric.agency/it-rating/google_feedback.png

Презентация дизайна сайта на Behance https://www.behance.net/gallery/98665977/MyLife-Beauty-Studio

Несмотря на большое количество изображений, главная страница показывает скорость для десктопа 93% что несомненно является высоким показателем и мобильная версия 62% по данным Google PageSpeed хотя для мобильного можно разогнать ещё вплоть до 70-80%.

Немного скриншотов функций из админ-панели:

http://geometric.agency/it-rating/admin_home.png

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

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

http://geometric.agency/it-rating/admin_order_blocks.png

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

http://geometric.agency/it-rating/admin_block.png

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

 http://geometric.agency/it-rating/services_tmpl.png

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

http://geometric.agency/it-rating/courses_tmpl.png

Так выглядит список страниц для редактирования.

http://geometric.agency/it-rating/admin_pages.png

Все заявки отправленные с сайта сохраняются в единую базу и каждая заявка выглядят так:

http://geometric.agency/it-rating/feedback.png

То есть в каждой заявке видно, с какой страницы и блока она была отправлена, какие услуги были выбраны в списке + данные, которые заполнил посетитель.

При разработке дизайна были тщательно и успешно подобраны шрифты, которые и придали дизайну уникальность и женственность, тем самым мы избежали добавления лишних элементов дизайна в сайте и не утяжелили его, а наоборот, придали лёгкость. При всём минимализме сайта он получился мягким, позитивным и женственным. Благодаря грамотному подбору цветовой гаммы дизайн получился не “больничным” и это здорово!

http://geometric.agency/it-rating/fonts.png

http://geometric.agency/it-rating/styles.png

Иконки были отрисованы в своём, уникальном для сайта, стиле

http://geometric.agency/it-rating/icons.png

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

http://geometric.agency/it-rating/mobile.gif

Примечания дизайнера для разработчиков

http://geometric.agency/it-rating/ps.png

Всплывающие формы

http://geometric.agency/it-rating/popups.png

Раздел с магазином можете посмотреть по ссылке https://drive.google.com/file/d/1Bizi6vRrKTe7xSEVLRShizICTNyYLkYW/view?usp=sharing и  https://drive.google.com/file/d/1dDJQTbsv6vxBjDVENDwsQkORH5xAb7oa/view?usp=sharing

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

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

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

Презентация изначального дизайна доступна по ссылке https://www.behance.net/gallery/98665977/MyLife-Beauty-Studio