Внутренний сервис резервного копирования файлов и управления лицензиями фигмы
NDA
Внутренний сервис
Работа в Mish
Контекст
В 2024 году Figma официально прекратила поддержку компаний из России, это означало риск в любой момент потерять доступ к тысячам рабочих файлов, дизайн-системам и наработкам множества команд без возможности их выгрузить.
МТС обратился с задачей в сжатые сроки разработать собственный внутренний сервис, который позволил бы:
Централизованно резервировать Figma-файлы всех команд;
Управлять лицензиями и доступом пользователей;
Контролировать статус и актуальность бэкапов в реальном времени.
Задача
Спроектировать с нуля рабочий интерфейс внутреннего инструмента по трем ключевым сценариям:
Управление файлами и бэкапами, просмотр всех команд/проектов, статус последнего бэкапа, запуск бэкапа вручную или по расписанию.
Управление пользователями и ролями - назначение доступа, отслеживание последней авторизации.
Личный кабинет владельца с персональным списком проектов, ссылок, статусов и датой последнего бэкапа.
Процесс
Команда состояла из старшего дизайнера, меня и двух full-stack разработчиков. Поскольку задача была экстренной, работа началась с короткого митинга с лид-дизайнером и тех-директором, где обсудили суть и рамки задачи: нужно было использовать дизайн-систему МТС, а интерфейс должен был быть похож, местами почти идентичен Figma. В первую очередь я изучил несколько внутренних инструментов компании, чтобы понять, к чему привыкли сотрудники. Один из вопросов, который обсуждали с командой, - использовать сайдбар или хедер для навигации. В итоге остановились на хедере, потому что разделов в сервисе оказалось не так много. Дальше я спроектировал концепт и структуру интерфейса: три ключевых экрана - личный кабинет пользователя, панель управления файлами команд и панель управления пользователями и ролями. Продумал иерархию информации в таблицах: проект, ссылка, файлы, дата изменения, дата бэкапа, статус, действие, дабы администратор мог за секунды понять, какие бэкапы устарели или завершились с ошибкой.
Отдельно разработал статусную систему с понятной цветовой индикацией состояний, чтобы состояние каждой команды считывалось мгновенно, без необходимости открывать детали. После того как всё апрувнули, я перешел к верстке, адаптировал компоненты под задачи нового сервиса и оставил гайдлайны для разработчиков. Это было ключевым фактором, который позволил уложиться в недельный срок.
Результат
Сервис спроектирован и разработан за 6 дней и успешно сдан заказчику. Инструмент взял под управление десятки команд и сотни файлов Figma (по структуре данных от 1 до 10+ проектов и до 40+ файлов на команду). Ручной, много-кликабельный процесс сохранения файлов заменён на единую точку контроля бэкапов и доступов для всей организации. Благодаря использованию дизайн-системы МТС удалось избежать риска потери данных при уходе Figma из РФ в рекордно сжатые сроки, не жертвуя качеством интерфейса.
Веб-сервис одного из крупнейших частных железнодорожных операторов в России
Контекст
Компания Евросиб, дала тестовое задание в рамках тендера на редизайн сайта. Под задачу собрали расширенную команду: арт-директора, лид-дизайнера, двух UX/UI дизайнеров и отдельные направления по копирайтингу, моушн-дизайну и 3д-графике. Срок на всю работу, от концепта до финальной презентации, была неделя.
Работа началась с митинга всей команды, где обсудили задачу, заказчика и его аудиторию, посмотрели исходный сайт компании и наметили направление. После этого начали собирать референсы: смотрели, как оформлены сайты логистических и транспортных компаний, чтобы понять, какой визуальный язык уже примелькался в отрасли и как от него можно оттолкнуться.
Задача
Сделать полный редизайн сайта, с современным и запоминающимся визуальным рядом для B2B-аудитории: клиентов, партнеров и представителей отрасли, которые оценивают компанию как надежного логистического оператора. Нужно было показать масштаб бизнеса, широкий спектр услуг (мультимодальные и железнодорожные перевозки, управление вагонным парком) и при этом визуально выделиться на фоне довольно консервативных и однотипных сайтов конкурентов в сфере логистики.
Процесс
Работа началась с митинга всей команды, где обсудили задачу и аудиторию заказчика и разобрали исходный сайт компании. Анализировав их сайт, мы обнаружили, что меню было очень глубокое: разделы вроде "Продукты и услуги" разворачивались в списки из 15-20 подпунктов, из-за чего конкретную услугу было тяжело найти быстро. Ключевые цифры компании, вагоны в управлении, число клиентов, терминалы, были поданы обычным текстом внутри абзаца и терялись на фоне остального контента, хотя именно эти цифры и должны были в первую очередь убеждать клиента в надежности компании. А самое главное, на сайте не было понятного первого действия: ни кнопки отправить груз, ни калькулятора стоимости, только общая форма заявки в самом низу страницы.
Из этого разбора вывели несколько гипотез, которые легли в основу решений. 1. Если сократить навигацию до нескольких понятных верхнеуровневых разделов, пользователю будет проще ориентироваться, а не теряться в разветвленном меню. 2. Если вынести ключевые метрики бизнеса крупным акцентным шрифтом поверх фотографии, а не прятать их в тексте, они сразу считываются и работают на доверие. 3. Если дать пользователю два явных действия на первом экране, отправить груз и отследить груз, он сможет начать работу с сайтом сразу, без блуждания по разделам. 4. Если вынести расчет стоимости в отдельный структурированный калькулятор с понятными полями (маршрут, даты, тип и размер контейнера), это снимет часть ручной переписки с менеджером на старте.
Дальше начали собирать референсы по отрасли, чтобы понять, какой визуальный язык уже примелькался у логистических и транспортных компаний, и осознанно уйти от него. На второй день подготовили несколько концептов главной страницы и остановились на темной теме с единым зеленым акцентом. После того как копирайтеры подготовили тексты под утвержденный концепт, я занялся версткой остальных блоков сайта: каталога услуг и типов подвижного состава, калькулятора расчета стоимости, раздела о компании с ключевыми показателями и пресс-центра. Держал единую визуальную логику, заданную на главном экране, чтобы сайт воспринимался целостно от первого экрана до внутренних страниц, а 3д-дизайнеры параллельно готовили анимированные иллюстрации техники и вагонов.
Результат
Через несколько недель заказчик объявил, что наше текстовое - выиграл тендер. Разработанный концепт получил высокую оценку за визуальный стиль, который выделялся на фоне других тестовых, и за то, что несмотря на сжатый срок в неделю удалось проработать не только главную страницу, но и полноценный сценарий для клиента от знакомства с компанией до расчета стоимости перевозки, а также за качественную презентацию нашей идеи.
Обширный веб-сайт одного из крупнейших операторов местной проводной связи в Европе
Контекст
Проект по редизайну обширного корпоративного сайта МГТС уже шел, когда я подключился к команде, основные и ключевые разделы, к этому моменту уже были спроектированы, а концепцию и визуальный язык определил лид-дизайнер. Это большой многостраничный B2B и B2G-портал с несколькими разными аудиториями: операторы связи, госзаказчики, застройщики, бизнес-клиенты, партнеры и сегмент коммерческой недвижимости.
Задача
Основным фокусом было поддержание и расширение уже выстроенной системы: доработка и дополнение страниц, перенос повторяющихся блоков и элементов в компоненты внутреннего UI-кита, работа с вариантами и стилями этих компонентов и адаптация макетов под разные разрешения экрана.
Процесс
В начале работы мне провели краткий экскурс по проекту, рассказав какова цель и мои зоны ответственности, на проекте я больше всего работал с разделом "Операторам связи" и рядом вторичных разделов сайта. Т.к это продукт МТС, за основу брали компоненты из внутренней дизайн-системы Granat 2.0: кнопки, выпадающие списки, базовые паддинги и спейсинги. Там, где готовых компонентов не хватало под конкретный блок сайта, собирал новые, ориентируясь на гайдлайны той же ДС, чтобы они не выбивались из общего визуального языка.
Одним из требований заказчика перед согласованием было сохранить целостность блоков, которые переносили со старого сайта: важно было, чтобы привычный контент не терялся и не искажался при редизайне. При этом в старой версии сайта навигация была не самой понятной, было тяжело сориентироваться, куда нажимать, чтобы попасть в нужный раздел. Эту проблему решали переносом всей структуры в понятное навигационное меню, из-за чего искать нужный раздел стало заметно проще. При работе над карточками услуг и подразделов также обращал внимание на их иерархию, что должно считываться в первую очередь, а что второстепенно, чтобы пользователь быстрее ориентировался внутри самого раздела.
Результат
На данный момент сайт завершен и работает в проде. За полгода на проекте сделал около 15+ страниц и разделов, а также регулярно адаптировал уже готовые макеты. Работал напрямую с лид-дизайнером и в постоянном контакте с командой, получал задачи на конкретные страницы. В конечном итоге сайт начал соответствовать и ощущаться как продукт МТС, с более интуитивно понятным содержанием.
Мультичейн крипто-кошелёк в Telegram для удобного управления активами в нескольких блокчейнах
Контекст
DeWallet - Telegram mini app для управления крипто-кошельком в сети TON. В команде было 4 дизайнера, работали в паре и распределялись по разным продуктам компании, я же был в роли ведущего дизайнера в этом проекте, отвечая за все этапы работы, назначая задачи остальным и доведя всё до результата.
Задача
За месяц придумать и собрать визуальный стиль кошелька, который бы отвечал требованиям продукта и при этом был достаточно универсальным, чтобы его можно было переиспользовать и в других продуктах компании.
Процесс
Работа началась с созвона и знакомства с командой, где обсудили требования к продукту. В первый же день сел за анализ конкурентов, других крипто-кошельков, и собрал вайрфреймы, на второй день презентовал концепт тимлиду. После согласования направления перешел к оформлению всех экранов и переводу элементов в компоненты и стили.
Через пару недель макеты были готовы, и их начали верстать. В итоге за 1.5 месяца продукт запустили в сети TON, вследующие месяцы я продолжал поддерживать и дорабатывать дизайн: перевели компоненты и стили на Figma-токены, чтобы упростить и ускорить дальнейшую работу с дизайн-системой. Спустя несколько месяцев после запуска продукт про-апгрейдили и перешли с моновалютного кошелька на мультичейн.
В ходе работы, тесно коммуницировал с тестировщками и фронтенд отделом, чтобы кошелек оставался в первозданном виде без визуальных ошибок, назначал задачи остальным дизайнерам и курировал их работы.
Результат
С нуля собрал визуальный стиль и дизайн-систему кошелька за месяц, которую впоследствии стали использовать и в других продуктах компании, довел продукт до запуска в сети TON за 1.5 месяца, перевел компоненты в Figma-токены для более быстрой работы.
Аудитория приняла продукт хорошо, основные сложности были на стороне бэкенда. Кошелек быстро набрал 600 тысяч пользователей, а количество ежедневно активных пользователей выросло до 10 тысяч, во многом благодаря щедрым розыгрышам, которые компания устраивала для аудитории.