Задача
Ozon fresh — сервис быстрой доставки продуктов от Ozon. По заказу агентства мы сделали для стенда Ozon fresh квиз о самом сервисе: о его разделах, товарах и упаковках.
Квиз работает на iPad у ведущего, а картинка выводится на большой экран стенда, чтобы ответы видели все гости. От первого сообщения в чате до готовой сборки прошло три недели.
Механика
Ведущий запускает игру, гость отвечает на пять вопросов подряд. Ошибка игру не прерывает: после каждого ответа экран сразу показывает, верно или нет, и в конце подводит итог.
Четыре верных ответа из пяти дают штамп. Вопросы тасуются при запуске, и каждый следующий участник получает свою пятёрку — повторы начнутся, только когда закончится вся база.
Три вида вопросов
В базе 128 вопросов трёх видов: текстовые; с фото, на котором агентство стёрло часть упаковки («Что пропало с упаковки творога?»); с четырьмя картинками вместо вариантов ответа.
Вопросы и картинки готовило агентство, а мы придумали, как без ошибок переносить их в квиз: папка с номером строки из таблицы, номер в имени файла — его место в вопросе или ответе. Для проверки у каждого вопроса есть своя ссылка, по которой его можно открыть в обход случайного порядка.
Правильно! Не совсем
Верный ответ — бирюзовый экран с конфетти, неверный — розовый «Не совсем»: рядом с ответом гостя показываем правильный и, если есть, короткое пояснение. В вопросах с картинкой здесь появляется настоящая упаковка — та самая, с которой стёрли ответ.
Так даже после ошибки гость узнаёт что-то новое про Ozon fresh, а это и было главной задачей квиза.
Заветный штамп
На финальном экране счёт заполняет кольцо, текст зависит от результата: за четыре и пять верных ответов — «Ты на 100% fresh! Забирай штамп!». После первой версии команда клиента попросила сделать финал ярче, и мы добавили на него конфетти.
Только для ведущего
Гость не может сам начать новую игру — это делает ведущий. Для него в углу экрана есть невидимая кнопка сервисного меню. Там можно позвать следующего участника, перемешать вопросы, включить или выключить заставку и посмотреть статистику: сколько сыграно партий, сколько верных и неверных ответов.
Квиз установлен на iPad как веб-приложение и работает без интернета, а статистика не пропадает при перезапуске.
Поиск образа
Первую версию мы сделали сразу кодом, без макетов в Figma: сами воспроизвели в вёрстке 8 фирменных паттернов из брендбука Ozon fresh и собрали интерактивный прототип, в котором прямо на ходу переключаются палитра, фон и раскладка ответов — бирюза, фламинго, градиенты, тёмный космос.
Посмотрев варианты, команда клиента выбрала светлый фон, как в приложении Ozon fresh, и цветные кнопки. Финальный вид мы довели вместе с дизайнером агентства.