Bright Rich

Полная переверстка основного сайта и улучшение UI/UX

Ноябрь 2022
Bright Rich - скриншот главной страницы

О компании

Bright Rich — первая российская компания, принятая в CORFAC, международную ассоциацию брокеров коммерческой недвижимости. На сегодня портфель сделок превышает 1,9 млн кв. м. Офисы открыты в Москве, Санкт-Петербурге, Дубае и Алматы.

Задачи

На сайте накопилось много проблем, которые довольно медленно исправлялись штатным специалистом. Компания планировала расширяться в Казахстан и ОАЭ, поэтому нам было поручено привести сайт в порядок как можно скорее. Для этого планировалось:

  • провести ручное тестирование для обнаружения неучтенных проблем;
  • перенести сайт на собственную CMS веб-студии Evernet, заточенную под работу с недвижимостью.

Типы страниц для вёрстки

  1. Главная страница
  2. Список предложений (3 вида)
  3. Объект
  4. Предложение в объекте
  5. О компании
  6. Журнал
  7. Список новостей
  8. Страница новости
  9. Все услуги
  10. Страница направления услуг
  11. Страница услуги
  12. Список вакансий
  13. Страница вакансии
  14. Контакты
  15. Ошибка 404
Типы страниц для верстки

Нужно больше страниц

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

  1. Объект типа «апартаменты»
  2. Страница аналитики по району
Страница апартаментов - превью
Страница апартаментов
Страница аналитики - превью
Страница аналитики

Нужно больше иконок

Для блока об инфраструктуре на странице апартаментов было подобрано и приведено к единому стилю более 40 иконок

Иконки для страницы апартаментов

Глобальная проблема: лишний код

На сайте нерационально использовалась библиотека Bootstrap. Активно применялись только классы для сетки, а стили для всех остальных элементов были избыточными и часто переопределяли дефолтные стили библиотеки, из-за чего её использование теряло смысл. В HTML была излишняя вложенность в больших количествах.

Было решено написать с нуля разметку и стили

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

Новый сайт сверстан с использованием шаблонизатора Smarty и SCSS.

Промежуточную версию обновленного кода можно посмотреть на GitHub.

Частичный код на GitHub

Не только код

Остальные проблемы касались юзабилити:

  • неочевидная или неудобная навигация в некоторых блоках
  • нарушения производительности
  • некорректная работа скриптов (например, была путаница в применении слайдера на больших и маленьких экранах)

Изменения в карточке предложения


Было

Карточка предложения - до

Стало

Карточка предложения - после

Примеры других проблем

Проблема

Кнопка для отрытия превью фото появлялась только при наведении. Сложно было понять, что ниже есть еще варианты, потому что прокрутка так же появлялась только при наведении.

Таблица вариантов - до

Решение

Вместо иконки вывели реальное фото. Полный список вариантов больше не прячется под скроллом. Если вариантов много, появляется кнопка «показать ещё» для просмотра полного списка.

Таблица вариантов - после

Проблема

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

Слайдер - до

Решение

Классический слайдер с автозапуском и дальнейшей прокруткой по желанию пользователя

Слайдер - до

Проблема

Заголовок-селект. Не слишком заметная стрелка, сложно догадаться, какие опции под ней скрываются

Услуги - до

Решение

Показаны сразу все возможные варианты за счёт табов

Услуги - после

Пример готовой страницы

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

Итоги

-50%

На столько сократился объем файлов стилей

+12%

На столько увеличилась производительность

100+

улучшений и исправлений было сделано

2 недели

заняли работы по полному переносу фронтенда

Скриншот мобильной версии Bright Rich - 01
Скриншот мобильной версии Bright Rich - 02
Скриншот мобильной версии Bright Rich - 03

Другие кейсы