Заказчик:
Никитина Ольга Валерьевна — руководитель по развитию проекта «Живи 120».
Задача:
Разработать платформу, которая стала бы универсальным инструментом в решении задач по популяризации оздоровительных методик и практик, рекламировании товаров и продуктов для здорового образа жизни.
С чем работаем?
В начале марта 2017 года к нам обратилась Ольга Никитина и рассказала, что есть идея создания мощной интернет-платформы для людей, стремящихся к здоровому образу жизни. Перед нами встала задача по разработке портала для пользователей, где они могли бы регистрироваться, становится постоянными пользователями, заказывать экологически сбалансированную и полезную продукцию, участвовать во всевозможных акциях партнеров проекта, получать рассылки в случае повышенного интереса к контенту портала, копить бонусы и на них покупать различные товары, связанные с тематикой здорового образа жизни.
С самых первых встреч и обсуждений с заказчиком Информационно-коммуникационный портал «Живи 120» был определен, как крайне амбициозный и ёмкий проект, который вобрал в себя огромное количество идей по сближению и коммуникации людей, которые тянутся к здоровому образу жизни.
Платформа должна была стать таким веб-ресурсом, который бы позволял решать обширный ряд задач:
- Объединение на одной площадке экспертов по здоровому образу жизни
- Обучение экспертов активному ведению блогов на портале
- Создание удобной и популярной площадки для продвижения контента о здоровье и образовательных программ
- Создание уникального контента
- Создание промо-групп
- Участие в тематических событиях и пропаганда оздоровительных методик
- Регистрация участников и поддержка их интереса к событиям на портале
- Осуществление тематических рассылок участникам проекта
- Организация информационных стендов и точек продаж продукции компаний партнеров в йога студиях, оздоровительных центрах и фитнес-клубах
- Популяризация воды Sienergy
Для того, чтобы поближе ознакомиться с продукцией и смыслом платформы, нам прислали Маркетинг-план SiEnergy и Презентацию SiEnergy.
Как проходила работа?
Определяем функциональность и составляем техническое задание
Как только мы ознакомились с основными идеями и целями в отношении портала, мы перешли к подготовке самого важного документа в данном проекте — технического задания. В течение всего марта вместе с заказчиком мы составляли предварительное техническое задание, в котором сфокусировались на основных функциях, которые нуждались в долгих обсуждениях и детальной проработке:
- бонусную систему
- приглашения пользователей на портал
- участие в событиях, конкурсах
- возможность комментирования записей и оставления отзывов для товаров
- каталог продукции
- регистрация
- тематические рассылки
Попутно конкретизировали цели и задачи проекта, приведя все формулировки со стороны заказчика и исполнителя к единому виду, дабы коммуникация была максимально эффективной.
Пока проводились работы по описанию функционала, стала понятна общая структура, а также структура всех разделов, вместе с ними описали личный кабинет и административный интерфейс. Стали понятны роли, существующие на портале — пользователи разделились на администраторов, менеджеров, партнёров, экспертов и обычных пользователей.
Рис.1 Общая структура портала Живи 120
Итогом проделанной в марте работы стало подписание договора 2 апреля 2017 года, но техническое задание на момент подписания договора даже после месячной подготовки все равно нуждалось в дополнениях и уточнениях, из-за объемов и сложности проекта. В итоге подготовка технического задания затянулось еще на пару недель. Расширенное техническое задание обзавелось особенностями технической реализации, продуманной навигацией по порталу, расширенными описаниями всей функциональности портала, описанием дизайна портала и дополнительным описанием административной панели.
Итоговое техническое задание составило 17 страниц.
Аним.1 Техническое задание на создание информационно-коммуникационного портала Живи 120
Итак, после всех бюрократических действий с описанием и утверждением целей, задач и прочих нюансов мы наконец перешли к разработке интернет-портала.
Проработка дизайна и адаптация макетов
Работая с нашими заказчиками, мы обычно предлагаем создание простого ненавязчивого и легкого логотипа, но в данной ситуации подготовленные концепции логотипов заказчик попросил не использовать, и прислал нам свою версию логотипа.
Тем не менее сам процесс работы над логотипом для Живи 120 был достаточно конструктивным, и его мы опишем в отдельной статье.
Во время подготовки технического задания, а конкретно описания дизайна, особое внимание обратили на то, что преобладающую составляющую дизайна на портале создаёт контент, и важно было создать такой интерфейс, который бы тактично помогал пользователю в этом контенте ориентироваться. Именно на этот фактор и опирался дизайнер, проектируя дизайн сайта.
Главная страница
Как только ТЗ перешло в руки к дизайнеру, началась проработка главной страницы — она должна была выступить достаточно длинной лентой, в которой блоками отображались последние 5 постов каждого информационного раздела сайта (блоговых разделов, в которых писали эксперты).
В теле страницы нужно было сразу заложить пространство под вывод баннеров — они предполагались для информирования пользователей о событиях и интересных акциях, а также как рекламное пространство. Кроме того, наверху оставили и ссылки на разделы — для того чтобы пользователь при заходе сразу переходил в нужную ему тематику и читал то что нужно непосредственно ему.
Для того чтобы статьи на сайте подавались живее, приняли решение оформить вывод последних 5 статей карточками разных размеров (1 большая и 4 маленьких карточки, или же 2 большие и 3 маленькие), а сами карточки снабдили счетчиками просмотров и комментариев, а также стандартной датой размещения.
Рис.2 Главная страница Живи 120 в десктопной, планшетной и мобильной версии
Таким образом мы сразу решили вопрос с оперативной информацией на сайте, и смогли вывести информацию из каждой тематики, для того чтобы пользователь мог успешно начать изучать интересующий его раздел.
Так как разработка программной части интернет-портала началась параллельно с разработкой дизайна, стало понятно на каких именно страницах необходимо сфокусироваться в создании дизайна, для того чтобы оперативнее приступить к созданию визуальной части портала. Следующими страницами стали страница раздела и страница поста.
Страница раздела и страница поста
На странице раздела необходимо было отразить не только посты, представленные в разделе, но и участвующих в написании статей экспертов, а также учесть внутреннюю навигацию по разделу, ведь вложенность предполагалась многоуровневой. Для того чтобы пространство сайдбара не тратилось зря, сайдбар дополнили ссылками на социальные сети.
Вывод карточек в рамках страницы раздела осуществили также карточками разных размеров, но унифицировали в единую сбалансированную форму — 2 большие карточки, которые повторялись через каждые 9 карточек. Таким образом в подаче материала прослеживалась некая динамика, что визуально смотрелось интереснее.
Рис.3 Страницы раздела блога и страница статьи сайта Живи 120
Страница поста после оформления стала представлять собой длиннопост с возможностью просмотра похожих статей и комментирования статьи. Все комментарии грузятся без дополнительных кликов и подгрузки, превращаясь в бесконечную ленту.
Страница раздела «Промо-магазин» и страница товара в магазине
В разделе «Промо-магазин» предполагалась продажа предоставляемых партнерами проекта товаров и услуг за бонусы, которые пользователи (эксперты и обычные пользователи портала) зарабатывают посредством активности на портале.
Рис.4 Страницы раздела промо-магазина и страница товара
Страница раздела «События»
Страница раздела события предполагает собой ленту со всеми актуальными событиями.
Рис.5 Страницы раздела событий
Страница раздела «Конкурсы»
В рамках раздела «Конкурсы» пользователи портала могут узнать обо всех актуальных конкурсах, которые проводятся порталом. В рамках раздела пользователи могли ознакомится с основной информацией о конкурсе или перейти в социальные сети, в которых и производятся сами конкурсы.
Рис.6 Страница раздела «Конкурсы» в десктопном и планшетном видах
Страница раздела «Каталог» и страница товара в каталоге
Каталог на портале Живи 120 — достаточно емкий раздел, в котором размещаются товары, одобренные экспертами портала. Любой из товаров можно изучить, посмотреть видео о нём, оценить, оставив отзыв о нём, а также посмотреть, где его можно приобрести на интерактивной карте.
Рис.7 Страница раздела «Каталог» и страница товара
Пользовательская часть портала
Немаловажной частью портала также являлась пользовательская часть сайта — это личный кабинет, в котором пользователь портала мог посмотреть на статьи, которые он написал, проверить свой бонусный счёт, историю получения и расходования бонусов, свои заказы из промо-магазина, события, в которых он планирует принять участие, посмотреть, ответили ли ему в комментариях, изучить историю оставленных им отзывов, узнать, прошел ли его пост модерацию, и если не прошел, узнать почему, а также подредактировать данные своего профиля.
Весь этот раздел получился достаточно емким по функциональности и включил в себя отрисовки многих состояний и мелких элементов.
Рис.8 Страницы пользовательской части портала
Страница раздела «Партнеры» и страница партнера портала
Помимо того, что на сайте присутствуют рядовые пользователи и эксперты, на портале также могут открыть профиль и компании-партнеры портала. Для них также был создан раздел и страница профиля.
Рис.9 Страница раздела «Партнеры»
Рис.10 Страница партнера портала в разделе «Партнеры»
Раздел заказа воды
Немаловажным разделом на сайте выступал раздел заказа воды, так как одним из генеральных спонсоров проекта является производитель воды SiEnergy.
Рис.11 Страница раздела доставки воды
Стайлгайд и прочие элементы сайта
Как и для любого другого проекта, для того чтобы разработчикам было проще работать с превращением дизайн-макетов в полноценный сайт, был подготовлен стайлгайд.
Рис.12 Стайлгайд и элементы сайта в нём
Отдельные окна и страницы потребовали отдельных макетов, например страница 404 и модальное окно, призывающее подписаться или зарегистрироваться на портале.
Рис.13 Всплывающее окно с предложением подписаться или зарегистрироваться
Страница 404 заботливо призывает не терять внутренний баланс и энергетическое равновесие в случае, если пользователь попал на несуществующую страницу.
Рис.14 Страница 404 символизирует внутреннюю гармонию и просит пользователя вернуться на главную страницу
Для пользователей, не разобравшихся в каких-либо разделах, подготовлен раздел с наиболее частыми вопросами и ответами.
Рис.15 Страница часто задаваемых вопросов и ответов
Как только доработка всех необходимых элементов сайта была закончена, макеты отправились к front-end разработчику для того, чтобы творить с ними чудеса и превращать статику в интерактивность.
Разработка живого интерфейса и отладка программной части
Для того чтобы интерфейс был умеренно отзывчивым, необходимо было придать ему интерактивность. На все кнопочки и ссылки, а также карточки и прочие элементы были применены различные эффекты. Также необходимо было оставить возможность перейти в любой глобальный раздел портала без дополнительных скроллов вверх или вниз — для этого отлично подошла липкая шапка, которая плавно выезжает по ходу скролла вниз по страницам.
Аним.2 Поведение кнопок при наведении, выезжающее меню, а также поведение карточек при наведении на главной странице
Изначально интерактивного эффекта на карточках не было. Столкнувшись в ходе тестирования с тем, что это не очень корректно для пользователя, ведь он не видит каких-либо изменений на карточке, разработчики решили добавить хавер-эффект. Интерфейс стал отзывчивее.
В некоторых разделах хавер-эффект немного изменен в силу конструкции карточек.
Аним.3 Поведение карточек в разделе «Бонус-магазин» (ранее в макетах — «Промо-магазин»)
Поля для ввода имеют различные состояния и также снабжены эффектами смены этих состояний.
Аним.4 Интерактивность в полях для ввода информации
Для динамичности в обложках различных разделов присутствует движение изображения-обложки при скролле.
Аним.5 Динамичность обложки в разделах сайта
Завершение проекта. Перенос на основной домен
Закончив оживление портала, и успешно презентовав заказчику проект, сайт переехал с рабочего домена на основной домен, где и находится на данный момент jivi120.com