Правительство Рас-эль-Хайма
Как мы бренд целого эмирата пересобирали.
- Роль
- Старший продуктовый дизайнер
- Команда
- 3 дизайнера
- Product Owner
- 3 разработчика
- Мой вклад
- Концепции
- Проектирование взаимодействий
- Дизайн-система
- Проектирование интерфейсов
- Таймлайн
- 3 месяца
rak.ae — основной сайт Правительства Рас-эль-Хайма с аудиторией около 200 000 человек в месяц. Он объединяет информацию для резидентов, бизнеса и туристов, но его устаревший интерфейс не задавал общего цифрового языка для сайтов департаментов.
- Задача
- Превратить устаревший портал в единый цифровой бренд и систему.
- Моя роль
- Я сфокусировался на архитектуре сайта, дизайн-системе и DX для команды клиента.
Аудитория
Портал работает для резидентов, бизнеса и туристов. У каждой группы свои задачи, но на разных государственных сайтах они должны видеть одно правительство — с последовательным визуальным языком, навигацией и тоном коммуникации.
Бренд
Мы начали с мудборда и нескольких концепций страниц и айдентики. Через несколько итераций нашли образ уверенного эмирата, который движется вперёд, но сохраняет связь с историей и своими принципами. Визуальный язык также опирался на природу самого северного эмирата ОАЭ. Мы сохранили логотип, но пересобрали типографику, цвета, графику, фотостиль и тон коммуникации.
Дизайн в коде
Вместо отдельного прототипирования мы проектировали страницы в Figma и сразу собирали их в коде с помощью Claude Code. Параллельно закладывали основы фронтенда: готовые компоненты дизайн-системы переносили из Figma в код по мере работы над страницами.
Сетки
Финальный дизайн опирался на две сетки. Стандартную 12-колоночную мы использовали для основных страниц. Вторую построили с явным смещением веса: в узкой левой колонке размещались поиск и фильтры на страницах с разделённым контентом, а в статьях — навигация по главам.
Арабская версия
После утверждения основных страниц мы адаптировали систему для арабской версии и RTL. Доработали сетки и компоненты, после чего арабские страницы собирались из тех же блоков.
Дизайн-система
Компоненты и правила одновременно существовали в Figma и готовом фронтенде. Это позволяло собирать страницы из одних и тех же блоков и сохранять визуальное соответствие между дизайном и кодом без отдельной интерпретации макетов на этапе разработки.
Конструктор страниц
На основе дизайн-системы мы создали внутренний конструктор страниц. Команда клиента может собирать из готовых блоков новые страницы основного портала и сайты отдельных департаментов, сохраняя общий визуальный язык без проектирования и вёрстки каждого шаблона с нуля.
Передача клиенту
Мы передали клиенту готовый фронтенд, конструктор страниц, дизайн-систему, бренд-гайды и вспомогательные материалы. Клиент получил работающий продукт, а не презентацию концепции.
Результат
Совместная работа в Figma и коде сократила путь от задачи до готовой к продакшену страницы в 2,5 раза. Система полностью передана клиенту, а публичный запуск нового портала запланирован до конца 2026 года.