Кейс: за 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 – наш фаворит среди технологий для запуска большей части проектов, потому что именно он позволяет быстро и гибко запускать качественные сервисы с высокой скоростью работы, мы в очередной раз убедились в его величии и пользе.

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

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

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

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