Автомобильный интернет-журнал Автобегиннер

1. Вводная задача от заказчика, проблематика, цели

О клиенте

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

В базе сайта более 2,5 тысяч автошкол со всей России, а если посчитать филиалы — получится более 6,3 адресов.

За все время существования учениками было написано почти 66 тысяч отзывов.

Проблематика

Текущая версия сайта создавалась в 2014 году. К 2022 году этот вариант безнадежно устарел как с моральной, так и с технической точек зрения. Поэтому коллеги обратились к нам с двумя четкими целями.

Задачи

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

2.Переработка личного кабинета директора. Улучшения требовал и личный кабинет директора автошколы. Его требовалось сделать более функциональным с одной стороны, и более простым в использовании с другой.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Редизайн

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

Верстка-конструктор

Чтобы не изобретать велосипед, за основу верстки был выбран пятый Bootstrap, который был соответствующим образом настроен и дополнен нужными стилями.

Все ассеты на сайте собираются и обрабатываются с помощью webpack.

Улучшение кабинета

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

Далее была серьезно переработана работа с автошколой, как с технической стороны, так и со стороны юзабилити.

Мы сократили число перезагрузок страниц, переведя большинство операций на AJAX.

Добавили отдельный раздел, в котором собрали все отзывы об автошколах пользователя и добавили туда фильтр.

Подключили Яндекс.Кассу для онлайн оплат и настроили генерацию и скачивание счетов для оффлайн переводов на расчетный счет.

Oauth-авторизация

Отдельной проблемой стала авторизация через соцсети. Битрикс не позволяет изменять поведение после успешной авторизации: ядро просто выдает готовый javascript-код для редиректа и убивает выполнение через die();

Приняли решение отказаться от встроенного решения 1С-Битрикс. А так как на сайте уже были пользователи, авторизованные через соцсети, мы написали скрипт миграции из битриксового формата хранения — в свой собственный.

Миграции

Вообще, из-за переработки бекэнда нам нужно было написать довольно много миграций данных из старого формата в новый. Тут на помощь пришел SymfonyConsole.

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

Кабинет представителя школы

Самые большие изменения коснулись личного кабинета:

• добавили быструю загрузку фотографий и сортировку простым перетаскиванием

• добавили быстрые ответы на отзывы

• полностью переработали работу с автошколами и их адресами: добавление, удаление, редактирование

• добавили детальную статистику расчетов, состояние оплат и счетов

3. Результаты сотрудничества

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

Ускорили работу сайта. В среднем в 1,5 раза, работа некоторых страниц ускорилась в 3-5 раз.

Уменьшили количества запросов к БД, особенно в личном кабинете директора.