Редизайн мобильной версии сайта Winline. Проект делали на аутсорсе: команда из лида и двух мидл-дизайнеров. Я отвечал за дизайн-систему и продуктовые гипотезы.
01 · КОНТЕКСТ
Быстрая адаптация под веб
Winline это один из лидеров российского рынка онлайн-ставок. К нам на аутсорс пришла задача в сжатые сроки провести редизайн мобильной версии сайта. Компания хотела дать пользователям быстрый и удобный доступ к ставкам прямо в браузере, на любом устройстве.
Помимо самого редизайна был чёткий бизнес-запрос: поднять конверсию в двух ключевых разделах, «Мои пари» и «Лайв-ставки». Значит, задача была не просто перерисовать экраны, а найти, где пользователь теряется, и убрать это трение.
Я работал мидл-дизайнером в паре со вторым мидлом под руководством лида. Моей зоной были дизайн-система и продуктовые гипотезы: я собирал компоненты, разбирал метрики и предлагал решения, а финальные направления мы выбирали командой.
02 · ДИЗАЙН-СИСТЕМА
Атомарная дизайн-система
Сроки были сжатые, поэтому первым делом я взялся за дизайн-библиотеку по принципам атомарного дизайна. От атомов к молекулам и готовым блокам: единая система компонентов, из которой быстро собирается любой экран.
Это дало три вещи сразу. Скорость, потому что новые экраны собираются из готового. Консистентность, потому что везде работают одни и те же элементы. И масштабируемость, потому что будущие доработки не ломают систему. Для проекта в сжатые сроки это было не украшение, а условие, при котором мы вообще успевали.
— Дизайн-система примерно из 120 компонентов по атомарному принципу.
— Сборка нового экрана ускорилась в разы: часы вместо дней.
— Единый визуальный язык на всех разделах веб-версии.
03 · ПОГРУЖЕНИЕ И МЕТРИКИ
Сами делали ставки
Чтобы найти реальные боли, мы залезли в продукт по полной. Нам даже выделили бюджет на ставки, и рабочий день иногда начинался не с макетов, а с обсуждения коэффициентов на вечерний матч. Мы тестировали весь путь на себе: выбирали события, ставили, следили за игрой и на своей шкуре чувствовали, где интерфейс тормозит в самый напряжённый момент.
Заодно разобрались в правилах большинства видов спорта, от форы в баскетболе до тонкостей тенниса и хоккея. Звучит как развлечение, но именно это показало главное: в лайве решают секунды. Пользователю некогда думать, ему нужно быстро понять момент и поставить.
Дальше я работал с метриками: разбирал сценарии, искал точки, где люди отваливаются, и предлагал концепты под конкретные разделы. Гипотезы проверяли на данных, а не на вкусовщине.
ИТОГ
Редизайн в срок и рост конверсии
— Веб-версия вышла в срок, без потери функционала.
— Конверсия выросла в обоих ключевых разделах: лайв примерно на 18%, «Мои пари» примерно на 12%.
— Атомарная дизайн-система ускорила команду и заложила базу для будущих доработок.
Главный урок проекта: пока сам не попробуешь продукт, не увидишь настоящие боли. А сжатые сроки не приговор, если есть система и приоритеты. Проект делали на аутсорсе, внутренние экраны закрыты NDA, поэтому здесь я показываю подход и результат, а не сами макеты.
