Кейс: за 2 недели запустили конструктор часов Чайкина для выставки в Женеве

Привет. На связи Захар, сооснователь digital-агентства Kaizen. Рассказываю, как мы запустили сервис для самого хайпового и уважаемого часового бренда в СНГ Чайкина и чуть не опоздали с релизом для международных выставок часов в Женеве и Дубае.

Мы Kaizen — агентство дизайна и разработки web-сервисов с упором на AI и выделяющиеся механики. Наша сила в запуске сервисов под ключ: от продуктовой идеи до релиза и развития продукта. А еще недавно мы сами стали резидентами Сколково с ИИ-продуктом, который без вариантов порвет рынок AI-разработки :)

Следите за обновлениями в нашем тг-канале - совсем скоро расскажем о громком проекте с Русланом Усачевым!

Константин Чайкин — это звезда часового искусства. Он не только основатель одной из самых признанных мануфактур, но и член Международной Академии независимых часовщиков (AHCI), а еще заслуженный изобретатель РФ (на его счету 94 патента в области часовой механики — и это рекорд!).

Константин — первый и единственный в России, кто получил награду Женевского Гран-при высокого часового искусства за модель «Клоун» из серии «Ристмонов». Эти часы с лицом живого существа стали настоящим прорывом в часовом мире и положили начало коллекции "Джокер", а цена одной модели начинается от 30 000 евро.

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

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

Как вы понимаете, сроки поджимали, и нам пришлось работать в режиме "нон-стоп", но обо всем по порядку.

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

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

Мы начали с Desk Research, пошли смотреть конфигураторы Rolex, мебельные и кухонные конструкторы, чтобы понять, какие решения могут работать лучше всего для упрощения пользовательского опыта. Объединив минимальный бенчмаркинг с базовыми законами UX – эвристиками Нильсена, мы вывели несколько тезисов относительно того, что мы поменяем в UX.

Тезис 1. Меньше кликов

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

Тезис 2. Полезные джобы (Job stories)

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

Также обратная связь от пользователей и опыт бренда говорили о том, что кодировка цвета в HEX не используется на производстве и не так широко известна покупателем часов. В этой сфере превалирует палитра Pantone. Мы интегрировали Pantone-конвертер, чтобы обеспечить точность цветов, и добавили функцию "используемые цвета", которая показывала только те оттенки, которые подходили к текущей модели часов. Эта функция избавила пользователей от выбора неподходящих оттенков и ускорила процесс настройки.

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

Тезис 3. Удобная мобильная версия

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

1) Делаем акцент на часах – увеличиваем их изображение

2) Избавляемся от кликов при изменении ракурса, меняем большинство кликов на свайпы

3) Фиксируем картинку часов на всех экранах - вы видите их всегда: выбираете ли вы деталь, меняете цвет или оставляете заявку

Традиционно для разработки веб-сервисов мы выбираем Next.js. Это относительно молодая, но убийственная технология. Более подробный обзор технологии вы можете посмотреть в моем телеграмм канале

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

– Имеются собственные плагины для работы именно с Next.js. Их наличие позволяет адаптировать рабочую среду полностью под ваши запросы.

– Может поддерживаться разработчиками на React, а их на рынке очень много.

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

Разработка (фальстарт)

Так как все наши ребята были заняты другими проектами, мы решили воспользоваться шансом и расширить свою команду. Мы нашли адекватного разработчика Антона (имя изменено) с очень релевантным опытом и наняли его. Разработчик дал оценку работы в 1 неделю, что очень нам подходило, ведь оставалась примерно одна запасная неделя.

Первые 2 дня со старта он попросил заморозить из-за личных обстоятельств, на третий день мы уже начали получать какие-то наработки по верстке. На четвертый день мы получили пуш в гите проекта от другого человека – и сразу поняли, что Антон нас обводит вокруг пальца. В срочном порядке мы вывели его на звонок, на котором он пообещал раскрыть тайну, почему так произошло.

Мы готовились слушать историю про “работаю с напарником”, но каким было наше удивление, когда на звонке с Антоном услышали новый, до того момента неизвестный для нас голос. Для контекста: на звонки мы выходили без камер, но аватарка ТГ и Google Meet Антона совпадали с фото паспорта, который мы всегда запрашиваем для договора. Настоящий Антон признался, что он – фаундер агентства, а мы все это время общались с его тех. диром Виталей (имя изменено). То есть, под видом частного разработчика пряталось целое агентство!

Эта “маркетинговая стратегия” нас шокировала, но свободных рук все также не было – мы решили продолжать с таким подрядчиком, более того, ребята заявляли про большой опыт команды, сеньоров и железобетонные гарантии запуска в срок. Мы встретились лично в Питере, ударили по рукам и продолжили работу.

Как вы думаете, проект был успешно реализован и запущен в срок? Нет, каждый день мы получали кривые и нежизнеспособные релизы. За 5 дней работы команды мы не получили ни одного рабочего компонента сервиса, даже pixel perfect верстки не получили – были какие-то ломаные элементы интерфейса с багами.

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

Настоящая разработка 2.0

До настоящего дедлайна – даты начала выставок оставалась ровно неделя (7 календарных дней). Код прошлой команды переиспользовать мы не могли, таким образом, на руках у нас были только макеты, и разработку нужно было начинать с нуля – срок был катастрофически сжатым.

Нам пришлось заморозить 1 из проектов, чтобы запустить онлайн-конструктор, мы привлекли лучших ребят – Диму (нашего Тим-лида), на этом проекте отвечал за некоторые функции бэка, и Ильяса (Middle frontend разработчика) – он делал основную часть работы.

Менеджмент проекта резко переехал на рельсы SOS:

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

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

Разработка также велась в формате SOS, однако без упущения важных факторов: с учетом географии выставок, на которых сервис будет использоваться, мы сделали PaaS-first сервис и масштабировали его в тех регионах, где проходили мероприятия. Первая была в Дубае – мы, кроме обычной точки присутствия в Европе, развернули и в Дубае несколько инстансов приложения.

По мере снижения нагрузки мы автоматически отключали дополнительные зоны.

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

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

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

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

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

Спасибо, что дочитали до конца)

Подписывайтесь на наш ТГ-канал, где мы делимся лайфхаками, кейсами и ищем новых участников команды!