Askilo — игровой сервис с викторинами. Клиент пришел с идеей, а получил бренд, сервис и промо-сайт

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

За реализацией задумки они обратились к нам: пришли с идеей, видением проекта и подробным ТЗ. Но ни названия платформы, ни брендинга, ни финального видения сервиса еще не было.

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

Если коротко — мы решили все поставленные задачи. И даже больше. 

1. Создали сервис не только с MVP-функционалом, но и с решениями для его дальнейшего развития. 

2. Помогли клиенту придумать название платформы — Askilo. 

3. Разработали брендинг продукта: логотип, фирменные цвета, шрифты, key visual. 

4. Создали промо-сайт Askilo: собрали не только дизайн, но и весь контент сайта, включая тексты и смыслы. 

5. При разработке сервиса всю архитектуру спроектировали с нуля на Laravel: структурировали код, следуя всем стандартам разработки, и задокументировали его.

6. Развернули сложную и подробную админку и подключили к ней CKEditor. Это позволило клиенту создавать вопросы с математическими, химическими и другими формулами.

А еще клиент остался очень доволен работой — он оценил дизайн и продуманность сервиса и хочет продолжать совместное сотрудничество и техподдержку. 

Теперь подробнее о создании Askilo)

1. Провели с клиентом несколько встреч: на них сформировали видение клиента, узнали особенности сферы и целевой аудитории.

2. Провели анализ аналогичных платформ. Выяснили, что на рынке представлено мало онлайн-квизов с современным визуалом — так что свежий дизайн сервиса станет хорошим конкурентным преимуществом.

3. Собрали технические рекомендации по инструментам и технологиям. А также доработали структуру сервиса и визуализировали ее:

— проработали роли (пользователь, администратор, гость, модератор) и распределили доступные им функции;

— прописали набор страниц, функционал системы и все состояния интерфейсов.

На основе этого создали прототипы будущей площадки.

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

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

В итоге мы назначили созвон-брейншторм с клиентом. На нем и родилось то самое название будущего сервиса — Askilo.

Ask — вопрос, kilo — как килограмм: что-то весомое, тяжелое, а в центре skil — созвучное с английским skill («навык»). 

Название понравилось всем: оно идеально подошло под идею площадки, хорошо звучит и запоминается. Так что остановились на нем!

Брендинг. Так как бюджет на проект был ограничен, мы создали брендинг не на отдельном этапе, а в процессе разработки дизайна сервиса.

— Логотип. Клиент хотел, чтобы логотип символизировал процесс мышления. Мы проработали несколько вариантов и в итоге остановились на 2D-эмодзи думающего человечка, что идеально отражало суть проекта.

— Фирменные цвета. Проработали палитру цветов, чтобы у каждой тематики викторин был фирменный цвет. Отдавали предпочтение свежим и ярким оттенкам, но и избегали цветовой перегруженности.

 — Фирменные шрифты. Для заголовков мы выбрали более акцентный и выразительный шрифт. А для текстов в стандартных блоках — более читаемый и привычный (гротеск).

— 3D-иллюстрации для сервиса и маркетинговых активностей. Проработали несколько видов 3D-иллюстраций для Askilo: для категорий вопросов в игре и для маркетинговых целей (анимированный ворсистый шар, символизирующий процесс мышления).

Параллельно с брендингом и неймингом с нуля создали сервис Askilo. 

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

Как оказалось в итоге: получилось так, как и планировалось, только с ещё более продуманной механикой. Ниже рассказываем подробнее)

Теперь игра работает так >>

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

Для этого он переходит на страницу, где мы предлагаем выбрать сферу: география, история, физика и др. Оформили этот блок в фирменных цветах Askilo, прописали стоимость выигрыша и добавили стилевые 3D-шки. Пользователь выбирает сферу, и площадка предлагает ответить на 3 вопроса. 

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

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

Ввели уровни сложности вопросов от 1 до 7. Причем каждый следующий вопрос чуть сложнее и чуть дороже предыдущего. Все это автоматически рассчитывается в игре по формуле. 

Например, пользователь ответил на вопрос первого уровня, который стоит 30 рублей, тогда второй вопрос ему предоставляется 2 уровня (на 20 рублей дороже), а третий вопрос — 3 уровня (уже на 30 рублей дороже). 

Чтобы защитить площадку от ситуаций, где самые опытные игроки будут решать вопросы для новичков (и через это зарабатывать большие суммы и потенциально уводить площадку в минус), создали уровни пользователей. 

Как это работает: новому пользователю присваивается первый уровень. После выигрыша в 10 викторинах он переходит на второй уровень и т.д. С каждым новым уровнем вопросы усложняются и становятся дороже. Так, например, игрок 4 уровня при старте викторины получит первый вопрос не ниже 4 уровня.  

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

Чтобы усилить вовлечение пользователей, добавили возможность не только отвечать на вопросы Askilo, но и создавать собственные.

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

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

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

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

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

Личный кабинет клиент особенно оценил) Потому что кроме стандартных блоков мы детально продумали раздел с авторскими вопросами. 

Дело в том, что площадка подразумевает ну очень много сценариев взаимодействия с вопросами — мы все их продумали, докрутили и реализовали. 

Теперь в личном кабинете можно:

— создать авторский вопрос,

— редактировать его,

— архивировать и вытаскивать из архива,

— настроить стоимость вопроса,

— пополнить баланс.

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

Добавили в личный кабинет статистику с процентом выигрышей и проигрышей каждого игрока.

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

Также теперь на сайте удобно отслеживать деньги и замораживать средства. Чтобы вывести сумму, надо просто нажать кнопку «Вывести средства» на странице баланса.

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

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

 — Добавили 4 роли управления — администратор, автор, модератор, пользователь — и предоставили им разные права. Также клиент может создавать новые роли с соответствующими возможностями. 

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

— Так как клиенту важно было создавать вопросы не просто с текстом и картинкой, но и с формулами, мы реализовали в админке этот функционал.  

Но тут была сложность: в готовых админках создание формул не предусмотрено. Поэтому мы изучили более 5 готовых решений под эту задачу и в итоге остановились на CKEditor. Это гибкий визуальный редактор, который заточен именно на создание формул. Прикрутили его к админке и в результате выполнили задачу и сэкономили бюджет клиента на создание собственных решений.

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

Также продумали плавные анимации — они пока не реализованы в MVP-версии сервиса и появятся на нем чуть позже.

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

Фронтенд сайта разработали на React, что сделало его более быстрым, производительным и отзывчивым к действиям пользователей.

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

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

На данный момент сервис полностью готов к запуску викторин, но пока остается на паузе. Ждем, когда клиент финально согласует вопросы по движению денег внутри площадки — и после запустим весь функционал и приступим к задачам по post-MVP.

В итоге клиент получил полноценную онлайн-игру с продуманной логикой, современным дизайном и удобной кастомной админкой. 

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

Кроме того, мы создали брендинг площадки, поучаствовали в придумывании нейминга и разработали посадочный лендинг Askilo.

Немного цифр)

Мы только-только открыли сервис для индексации, а там уже 2 000 авторских вопросов!

А еще сервис быстро работает: показатель performance достигает 98 из 100 баллов по результатам тестирования десктопной версии сайта в Lighthouse.

Ну и не менее важный результат: клиент очень доволен работой — он оценил дизайн и продуманность сервиса и хочет продолжать совместное сотрудничество и техподдержку! 

P.S. по ссылке вы найдете промо-сайт, с которого можно перейти на онлайн-игру Askilo. Мы предоставили вам тестовый доступ и начислили небольшой стартовый капитал, чтобы вам было максимально удобно изучать площадку (и убрали вывод и пополнение средств для тестового доступа). Приятного просмотра и спасибо за внимание!)