Кейс: за 2 недели запустили конструктор часов Чайкина для выставки в Женеве
Привет. На связи Захар, сооснователь digital-агентства Kaizen.
Рассказываю, как мы запустили сервис для самого хайпового и уважаемого часового бренда в СНГ Чайкина и чуть не опоздали с релизом для международных выставок часов в Женеве и Дубае.
Кто мы?
Мы Kaizen — агентство дизайна и разработки web-сервисов с упором на AI и выделяющиеся механики. Наша сила в запуске сервисов под ключ: от продуктовой идеи до релиза и развития продукта. А еще недавно мы сами стали резидентами Сколково с ИИ-продуктом, который без вариантов порвет рынок AI-разработки :)
Следите за обновлениями в нашем тг-канале - совсем скоро расскажем о громком проекте с Русланом Усачевым!
Кто клиент?
Константин Чайкин - это звезда часового искусства. Он не только основатель одной из самых признанных мануфактур, но и член Международной Академии независимых часовщиков (AHCI), а еще заслуженный изобретатель РФ (на его счету 94 патента в области часовой механики — и это рекорд!).
Задача
У бренда есть известные модели с полюбившимся всем стилем, такие модели представлены на официальном сайте, в редизайне которого мы участвовали ранее. В дополнение к этому есть возможность заказать производство часов с индивидуальным дизайном.
Чтобы клиент мог создать образ будущих часов, компания использует веб-конструктор, который помогает визуализировать свои идеи, посмотреть на часы в разных цветах, материалах и ракурсах. При подготовке к выставке в Женеве в мае 2024 года команда бренда приняла решение обновить сервис, после чего команде Kaizen была поставлена задача на срочный запуск.
Решение
Мы сделали редизайн конфигуратора, не только собрав заново пользовательский опыт, но и повысив технические показатели.
Этапы проекта
1. Проработка UX/UI дизайна
Не дожидаясь подписания контракта, мы занялись аудитом и небольшими исследованиями, сыграл на руку размер сервиса – он позволял делать это еще на предпроектной стадии.
Мы начали с Desk Research, пошли смотреть конфигураторы Rolex, мебельные и кухонные конструкторы, чтобы понять, какие решения могут работать лучше всего для упрощения пользовательского опыта. Объединив минимальный бенчмаркинг с базовыми законами UX – эвристиками Нильсена, мы вывели несколько тезисов относительно того, что мы поменяем в UX.
Тезис 1. Меньше кликов
Чтобы выбрать группу деталей, отдельную деталь, добраться до палитры выбора цвета и вернуться в исходное меню, требовалось сделать 4 клика. Мы предложили спрятать всё боковое меню в гармошку, а палитру вынести слева от пунктов, как в Figma, чтобы переключение между деталями часов происходило понятно и быстро. В дополнение продумали переключение между ракурсами для просмотра всех деталей модели.
Сравнение интерфейса: до и после
Тезис 2. Полезные джобы (Job stories)
Когда пользователь генерирует дизайн часов, вероятно, он просто перебирает разные варианты, либо подбирает нужные оттенки и материалы для своей второй половинки, чтобы узнать, хочет ли она такие часы в подарок. Поэтому важно давать возможность скачать картинку без обязательства сразу оформлять заказ, а компания-производитель за это попросит e-mail пользователя.
Запрос картинки на почту
Также обратная связь от пользователей и опыт бренда говорили о том, что кодировка цвета в HEX не используется на производстве и не так широко известна покупателем часов. В этой сфере превалирует палитра Pantone. Мы интегрировали Pantone-конвертер, чтобы обеспечить точность цветов, и добавили функцию "используемые цвета", которая показывала только те оттенки, которые подходили к текущей модели часов. Эта функция избавила пользователей от выбора неподходящих оттенков и ускорила процесс настройки.
Конвертация цвета в Pantone
Для разнообразия и дополнительной интерактивности мы добавили функцию случайной палитры, которая генерировала цветовые решения по определенной логике, исключая несовместимые сочетания. Также реализовали сброс настроек, чтобы клиент мог быстро вернуться к начальной версии и начать с чистого листа.
Тезис 3. Удобная мобильная версия
Мобильная версия особенно актуальна для выставок и мероприятий, на которых пользователи только знакомятся с брендом. Мы пересобрали всю мобилку, но можно отметить основные изменения:
1) Делаем акцент на часах – увеличиваем их изображение
2) Избавляемся от кликов при изменении ракурса, меняем большинство кликов на свайпы
3) Фиксируем картинку часов на всех экранах - вы видите их всегда: выбираете ли вы деталь, меняете цвет или оставляете заявку
– Качественная верстка для ПК и адаптивность для мобильных устройств. Все элементы интерфейса идеально подстроились под разные экраны.
– Плавная работа интерфейса. Мы потратили много времени на оптимизацию, чтобы интерфейс был быстрым и комфортным.
– Прокачанная палитра цветов. В конфигураторе появилась возможность выбрать цвета с конвертацией в Pantone, а также специальная функция "используемые цвета", которая показывала только те оттенки, которые подходят для данной модели.
– Переключение ракурсов часов для 6 моделей!! Мы добавили возможность вращать модель, чтобы пользователь мог увидеть все детали и выбрать оптимальный вариант.
– Функция random палитры цветов. В этой фиче мы прописали логику, которая исключала появление "неприглядных" цветовых решений, чтобы результат всегда был эстетически привлекательным.
– Сброс всех настроек. Если клиент захотел вернуться к дефолтным настройкам, такая функция тоже была предусмотрена.
– Экспорт картинок в хорошем качестве. Пользователь мог сохранить свой дизайн в отличном качестве как с ПК, так и с телефона.
– Форма заявки с отправкой картинки и данных клиента в CRM. Все данные передавались напрямую в CRM систему, чтобы менеджеры могли оперативно обрабатывать заказы.
– Два языка. Для удобства иностранных клиентов мы добавили поддержку русского и английского языков.
Подводя итог, Next.js – наш фаворит среди технологий для запуска большей части проектов, потому что именно он позволяет быстро и гибко запускать качественные сервисы с высокой скоростью работы, мы в очередной раз убедились в его величии и пользе.
Если вы принимаете участие в запуске веб-сервиса, напишите мне, и я расскажу больше о технологическом стеке для вашего проекта, который не только сэкономит деньги и время, но и спасет от критических ошибок.
Этот проект стал для нас настоящей проверкой на прочность, потому что, кроме технических вызовов, нам пришлось столкнуться с непростыми ситуациями внутри команды, которые требуют быстрой реакции и решения. Но в конце концов мы смогли не только круто сделать свою работу, но и улучшить внутренние процессы, которые теперь позволяют нам работать быстрее и с меньшими рисками.
Комментарий агентства
"Я очень горжусь этим проектом сразу по нескольким причинам. Во-первых, он под ключ был запущен за 2 недели - это рекордные сроки. Во-вторых, он запущен для главного и самого актуального часового мастера нашей страны и даже СНГ. И последнее (но не по важности) проработка UX была основным фокусом и подарила по настоящему новый опыт пользователей. Горжусь нашей командой и кейсом!"
Захар Ёрохов
Отзыв клиента
"Ребята из Kaizen - это команда, которая отлично подходит в ситуациях, когда ты за короткий срок вынужден запустить ИТ продукт под ключ. Профессиональные разработчики и чуткие менеджеры вытащат любой проект, даже если он сильно ограничен сроками. Большое спасибо Захару и команде за запуск нашего конструктора!"
Сергей Долгушин - IT директор мануфактуры «Константин Чайкин»
Команда проекта
> Сергей Долгушин и Захар Ёрохов — руководители проекта
> Артем Краснощеков — менеджер проекта
> Ильяс — frontend разработчик
> Дмитрий — backend разработчик
Спасибо, что дочитали до конца)
Подписывайтесь на наш ТГ-канал, где мы делимся лайфхаками, кейсами и ищем новых участников команды!
