Обновление и редизайн веб-агрегатора Franshiza-info
Задача
Провести модернизацию существующего веб-проекта: развить функционал и провести редизайна.
Процесс
К нам обратились представители успешного проекта с 11 летней историей, сайта franshiza-info.ru, чтобы мы применили свой опыт и экспертизу для перехода проекта на новый этап развития.
Дизайн
Первичное знакомство с ресурсом дало понять, что с нами намерен сотрудничать опытный игрок рынка. Сайт, разработанный с использованием базовых шрифтов, строгих графических элементов и множества гиперссылок, нуждался в редизайне и расширении функционала.
Мы понимали, что за 11 лет активной деятельности у сайта сформировалась айдентика бренда, которую необходимо сохранить в новом решении. Таким образом дизайн обновленной платформы сочетает в себе цвета прежнего решения – белый и синий. Однако в этот раз палитра синих оттенков намного шире.
Изменения коснулись и логотипа. На смену устаревшему литеральному пришло современное графическое решение.
Функционал
Отдельное внимание стоит уделить функциональным доработкам и обновлениям интерфейса. Первоочередной задачей проекта мы выделили необходимость сделать сайт более удобным и современным.
Серия встреч со стейкхолдерами и анализ контента, структуры, интерфейса позволили нам сформировать рекомендации по улучшениям, которые мы реализовали в итоговом решении.
“Шапка” сайта, содержащая в себе ссылки на ключевые страницы веб-проекта, претерпела визуальные преобразования. Обновленная версия, в которой произошло изменение цветовых решений и шрифта, расставила акценты на элементах для взаимодействия и навигации.
В отличие от предыдущей реализации номер телефона стал кликабельным. Элементы “Каталог франшиз” и “Добавить франшизу в каталог” выделены в отдельные кнопки, которые стали CTA главного экрана.
Навигация по проекту была реализована при помощи бокового меню с выпадающим списком, которое мы расположили на всех страницах. Первый пункт списка отображается полностью по умолчанию, а переход на другие страницы осуществляется стандартным образом путем клика по соответствующему разделу верхнего уровня с последующим переходом в подразделы. В развернутом состоянии каждый пункт списка ведет на соответствующую страницу.
Боковое меню не стало единственным инструментом для навигации по широкому списку предлагаемых решений. В ходе проекта мы создали новый вид страницы с поиском только по франшизам. Результаты выдачи подтягивают в первую очередь франшизы, у которых включена форма сбора запросов. Карточки, отображаемые на странице поиска, также, как и лендинги предложений, содержат фото, описание, объем инвестиций и срок окупаемости. Если описание отсутствует – вместо текста отображается только размер инвестиции и период окупаемости.
Изменения коснулись и фильтра по критериям. Сортировка франшиз по умолчанию происходит на основе показателя популярности. После внесения параметров фильтра динамически изменяется показатель N (количество) в строке «Найдено: N актуальных франшиз». Указанные критерии появляются под фильтром с возможностью убрать их выборочно или все.
Еще одним нововведением является оформление “витрины франшиз”. Это блок на главной странице, который представляет собой приоритетное для отображения превью карточек. Выделение цветной подложкой привлекает к ним особое внимание пользователя. Размещение в этом блоке происходит на дополнительных условиях. Для владельцев ресурса, с целью удобства, вывод в “топ” реализован через специальный чек-бокс в административной панели сайта
Функциональной особенностью можно также выделить сквозной баннер. Его особенность заключается в автоматической смене контента снизу вверх. Изображения меняются циклично: после завершения прокрутки всех активных баннеров очередь из картинок повторяется.
Под каждым баннером блок для небольшого текста. При нажатии на текст или на баннер – открывается рекламируемая франшиза с формой для заполнения запроса.
Помимо этого было решено добавить три брендированных баннера: 2 по бокам и 1 перед футером. Боковые баннеры загружаются в трех размерах и адаптируются под устройства и разрешение экрана. Они опускаются вслед за прокруткой экрана. Баннера сменяются при обновлении страницы и при переходе на следующую страницу. По одному IP каждый раз показывается новый баннер, который ранее не был показан.
Детальная страница новости или отзыва дополнена блоком «читайте также», который подтягивается автоматически. Он представлен серией блоков, ширина которых пропорциональны размеру области для контента, в виде анонсов. При отображении приоритет отдается новости, релевантной для данной франшизы. Если их нет или недостаточно – подтягиваются последние новости из ленты новостей.
Кому подойдет подобная услуга?
Стек технологий:
- html5
- css3
- js
- php
- bitrix
- jQuery
Команда:
- Проектный менеджер 2
- Дизайнер 1
- Front-end разработчик 2
- Back-end разработчик 3
- Тестировщик 2