Сайт старейшего проекта мобильного SA-MP

SampMobile — игровой проект с многолетней историей и сформировавшимся сообществом пользователей. Важную роль в его работе играла существующая инфраструктура, включавшая сайт и связанные с ним приложения.

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

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

Требовалось спроектировать новую веб-платформу, которая объединит основные пользовательские сценарии и сможет взаимодействовать с уже работающими системами проекта.

Мы отвечали за проектирование и разработку новой веб-части продукта: от переработки исходной концепции до интеграции с существующей инфраструктурой.

В рамках проекта выполнили:

• UX/UI-проектирование и разработку визуального оформления.
• Проектирование структуры сайта и пользовательских сценариев.
• Frontend- и backend-разработку.
• Разработку личного кабинета, блога, FAQ и системы донатов.
• Интеграцию с действующими приложениями и устаревшими кодовыми базами.
• Переработку графических элементов с учётом ограничений авторского права.

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

Обновить сайт как точку входа для новых игроков

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

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

Заменить устаревшую веб-платформу

Предыдущая версия сайта работала на legacy-коде, который разрабатывался другой командой. Со временем его сопровождение и расширение становились всё более сложными.

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

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

Объединить пользовательские функции

Новый сайт должен был поддерживать несколько основных сценариев:

• Знакомство с проектом — представление продукта и информации для новых игроков.
• Управление аккаунтом — доступ к личному кабинету и синхронизация/обмен данными с существующей базой данных игроков.
• Получение информации — публикации блога и ответы на распространённые вопросы.
• Финансовое взаимодействие — возможность пользоваться системой донатов.

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

Сохранить совместимость с существующими приложениями

Новая веб-платформа должна была работать совместно с уже используемыми приложениями проекта.

Это ограничение влияло на разработку: требовалось связать новый интерфейс с существующими кодовыми базами, не заменяя всю накопленную инфраструктуру.

Пересмотреть визуальные материалы и компоненты

При создании новой версии требовалось отказаться от отдельных элементов прежнего сайта, использование которых могло вызывать вопросы в отношении авторских прав.

Нужно было сохранить визуальную преемственность проекта, но сформировать собственное оформление нового продукта.

01. Анализ существующей платформы

Работу начали с изучения прежнего сайта, его структуры и функциональности.

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

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

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

02. Проектирование структуры и пользовательских сценариев

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

Выделили основные разделы будущего сайта: публичную часть, личный кабинет, блог, FAQ и донаты.

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

Так появилась структура веб-платформы, которая учитывала как привлечение новой аудитории, так и обслуживание сформировавшегося сообщества.

03. Переработка UX/UI

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

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

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

Одновременно пересмотрели использование графических материалов и компонентов. Элементы, способные создать вопросы с авторскими правами, заменили при подготовке новой версии.

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

04. Разработка веб-платформы

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

Личный кабинет. Реализовали пользовательскую часть для взаимодействия с аккаунтом внутри веб-платформы.

Блог. Предусмотрели отдельный раздел для публикации информационных материалов проекта.

FAQ. Организовали раздел ответов на распространённые вопросы, чтобы необходимые сведения были доступны непосредственно на сайте.

Система донатов. Реализовали функциональность финансового взаимодействия пользователей с проектом.

Все разделы получили единое интерфейсное оформление и вошли в состав новой платформы.

05. Интеграция с существующей инфраструктурой

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

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

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

Так заказчик получил новую веб-платформу без необходимости одновременно переписывать всю инфраструктуру проекта.

06. Запуск новой версии

После завершения разработки и интеграции проект перешёл на новый сайт.

Обновлённая версия объединила публичные страницы, пользовательский кабинет, информационные разделы и донаты. При этом связанные приложения проекта продолжили использовать существующую инфраструктуру.

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

Для SampMobile разработали и запустили новую веб-платформу вместо устаревшего сайта.

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

Основные результаты работы:

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

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

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