Экспедиция на Marsland: сайт с личным кабинетом и нативной геймификацией

Запуск с нуля: как из пустоты рождается вселенная Marsland

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

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

говорит project manager

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

Теория большого взрыва: зарождение проекта

Когда заказчик приходит только лишь с концептом, эфемерной неосязаемой идеей, многие разработчики получают страх белого листа.

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

говорит продакт-маркетолог

Прежде всего собрали команду для мозгового штурма — созвали с разных уголков Галактики aka офиса Найнэн креативщиков, способных генерировать идеи на лету и синхронизироваться друг с другом. Получился настоящий дрим-тим: копирайтер, два маркетолога, два дизайнера и один лид-дизайнер.

Перед началом работы каждый участник получил индивидуальное задание:

• провести ревью рынка криптовалют, чтобы выявить текущие тенденции
• проанализировать сервисы для майнинга и выделить самые креативные проекты
• изучить жизненный цикл продуктов и отзывы пользователей: как проекты принимаются целевой аудиторией, насколько быстро они окупаются, какие сложности возникают и как они адаптируются под запросы пользователей
• определить глобальные тренды: кино, сериалы, музыка, игры, мемы, тиктоки и рилсы – всё идет в ход, чтобы понять, чем живет аудитория и в каком инфополе находится

Маркетинг навыки у дизайнеров? Легко!

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

• рынок майнинговых сервисов насыщен нестандартными решениями, а аудитория уже привыкла к креативу. От простых идей на первом экране до действительно топовых проектов — вызов принят
• большинство проектов строятся вокруг тематики животных, персонажей и культурных феноменов, таких как Star Wars или тамагочи
• общие тренды включают экологию, аниме, магические сюжеты, космос, Илона Маска, игры с менеджментом и казино

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

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

Выделили топ-10 идей, к каждой добавили описание, обоснования и предыстории. Это помогло «заразить» заказчика нашим вдохновением и дать четкое понимание задумок, так как некоторые из них были действительно крейзи. Вот некоторые идеи, не нарушая NDA:

• майнинг на шахматной доске с турнирами между пользователями
• кастомный конструктор LEGO и покупка лимитированных деталей
• менеджмент королевств с завоеванием и освоением территорий
• гонки на кастомных машинках, где скорость зависит от инвестиций
• экспедиция на планету с альтернативной энергией для майнинга

Отправились на созвон с питчем каждой идеи. Эмоции заказчика? Шок и восторг. Долгое обсуждение и краш-тесты помогли найти ту самую идею — Большой взрыв! Экология, альтернативная энергия, космическая эстетика, дух авантюризма и немного фантазийных деталей — это привлечет даже самую избалованную аудиторию.

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

Основа успешного продукта — целевая аудитория

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

Аудиторию поделили на три ключевых сегмента:

1. Криптоэнтузиасты и майнеры (50%)

• Кто они? Майнеры, трейдеры, разработчики блокчейн, криптоаналитики.
• Что их мотивирует? Желание быть на передовой криптоиндустрии, интерес к креативным и необычным подходам в майнинге, и, конечно, потенциальные выгоды от участия в инновационных проектах.
• Почему они выбирают нас? Космическая тематика добавляет элемент интереса и инновационности, делая проект более привлекательным.

2. Инвесторы и венчурные капиталисты (30%)

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

3. Технические специалисты и IT-профессионалы (20%)

• Кто они? Люди, заинтересованные в применении своих навыков в инновационных и технически сложных проектах.
• Что их мотивирует? Креативная идея и возможность участия в уникальном проекте с необычной концепцией.
• Почему они выбирают нас? Вызов и интерес к технически сложным и креативным задачам.

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

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

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

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

Космическое приключение: создание уникального лора

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

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

Приветствуем в Marsland: твоя экспедиция начинается

При входе на сайт пользователь становится участником секретной экспедиции на планету Marsland. Это путешествие призвано изменить представление об облачном майнинге.

Marsland — недавно открытая планета. Мы опередили Илона Маска! Недавнее извержение гигантского вулкана открыло новый альтернативный источник энергии. Наш космический корабль способен использовать эту энергию для экологически чистого майнинга биткоина.

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

• Alba — спящий вулкан. Над кратером иногда виднеется дым. Надежный и предсказуемый вариант для начинающих
• Orsia — дремлющий вулкан. Наблюдаются частые слабые извержения майнинг-энергии
• Pavonis — действующий вулкан. Требует постоянного контроля, так как может извергаться в любой момент
• Olympus — эксплозивный вулкан. Редкий и мощный, идеален для опытных майнеров

Marsland: структура планеты и система безопасности

Marsland, как и любое космическое тело, состоит из слоев. Эта слоистая структура помогает нам интегрировать все ключевые аспекты проекта:

1. Ядро — бизнес-принципы. Забота об интересах пользователей, безопасность и защита во время экспедиции
2. Первый слой — экспертиза и инновации. Гарантия использования передового майнинг-оборудования и блокчейн технологий
3. Второй слой — безопасность данных. Вся информация зашифрована, команда держит руку на пульсе современных технологий безопасности
4. Третий слой — продвинутое оборудование. Сотрудничаем с ведущими производителями оборудования, дата-центры расположены в странах с низкими ценами на электричество
5. Четвертый слой — экология. Поддержка от организации из ОАЭ, контроль углеродных выбросов, использование возобновляемой энергии

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

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

Материализация Вселенной Marsland на интерактивных прототипах

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

Для обеспечения успеха мы подключили SEO-специалиста с самого начала разработки. Он помог нам создать структуру, оптимизированную под поисковые запросы, что привело к появлению страниц Learn Center и Blog. В результате структура сайта стала еще более полной и логичной.

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

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

• Калькулятор прибыли — пользователь может самостоятельно рассчитать профит от инвестиций, буквально ощущая его на балансе своего криптокошелька
• Start Guide — знакомим пользователя с механикой регистрации и покупки тарифа, создавая чувство безопасности за счет полного понимания следующего шага
• О компании — прозрачно рассказываем о компании, ее принципах и миссии, чтобы пользователи доверяли проекту не только из-за идеи

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

Пока копирайтер и маркетолог спорят о дополнительной кнопке CTA на главной странице, UX-инженер строит юзер флоу, визуализируя потоки и предотвращая «дыры» в сценариях.

Личный кабинет может быть небольшим, но требует тщательной проработки:

• покупка тарифа и история платежей,
• менеджмент майнинг фермы,
• вывод профита,
• реферальная программа,
• настройки аккаунта и редактирование профиля.

Мы выделили основные и второстепенные функции, определив ключевые разделы:

• dashboard,
• volcano farm,
• marsland shop,
• transaction history,
• referral program,
• account settings,
• edit profile.

Каждый раздел получил свой контент, сгруппированный по смысловым блокам и распределенный по иерархии. Мы создали 14 страниц прототипа, отточив логику и навигацию.

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

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

говорит UX-копирайтер

Итог: получили интерактивные прототипы сайта с продуманной структурой, захватывающим сторителлингом и высокой вовлеченностью. Личный кабинет стал интуитивно понятным и логичным, вызывая у пользователей ощущение, что они уже знакомы с интерфейсом «космического корабля». Теперь время приступать к финальной ливрее и запуску нашего космического приключения!

Этап UI-дизайна: перевоплощение идей в визуальную эстетику

Когда мы приступили к этапу UI-дизайна, стартовали с тщательной аналитики:

• Провели аудит конкурентов, чтобы понять, какие дизайн-решения и визуальные тренды преобладают в нашей нише
• Зафиксировали удачные решения для адаптации в своем проекте, а сомнительные отметили, чтобы избежать их на старте
• Собрали множество референсов от крутых веб-дизайнов до визуального контента, вдохновленного космосом, Марсом и космическими кораблями

С заказчиком у нас случился полный синхрон во вкусе и визуальном представлении идеи. Уже со второй концепции мы попали в точку! Никакой футуристичности и современности — только стильный, атмосферный, яркий и детально проработанный дизайн. Этот экран мог бы стать постером второго «Марсианина» или новой AAA RPG про космос!

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

• визуализация вулканов. Каждый тариф представлен через визуальные образы активных и спящих вулканов. Пользователь сразу понимает, что перед ним.
• ассоциации пользователя. Возвышенности, визуализация шагов регистрации и покупки.
• микроанимации. Бегущие токи на фоне «Блога», приближающаяся планета в футере.

Страница «О компании» — геологическая структура Marsland. Мы визуализировали информацию о компании как геологическую структуру планеты Marsland, добавив дополнительные детали и сделав данные максимально понятными.

Страница «Блог» — новости из глубин космоса. На странице блога новости и обновления экспедиции с Земли представлены рядом с карточками новостей, стилизованными под стопку газет, фотографий и межгалактических марок.

Страница «Контакты» — иллюминатор и пасхалки. Реализовали её в виде иллюминатора космического корабля, через который виднеется планета Земля. Главный герой тянется к иллюминатору, что вызывает у пользователя чувство тоски по родной планете. Записки-пасхалки:

• «Попробуйте найти ровер Opportunity» — отсылка к марсоходу, потерявшему связь в 2018 году
• «Не забудьте поздравить с Днем рождения Curiosity» — марсоход, который сам себе спел с днем рождения в 2018 году

Страница «Центр помощи» — космическая приборная панель. Центр помощи, обслуживающий SEO-требования, оформлен в виде приборной панели космолета. Вопросы и ответы отображаются в виде голограмм на лобовом стекле, а на заднем фоне виден космос с планетами и звездами.

Дашборд: игровая эстетика и функциональность

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

• Статистика за последние сутки. Позволяет пользователю быстро оценить производительность
• Сводка по мощности фермы. Текущая мощность и её изменения
• Функция вывода средств. Удобный и быстрый доступ к финансовым операциям
• Форма для покупки нового тарифа. Мотивирует пользователей увеличивать инвестиции, уменьшая количество выводов средств

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

Личный кабинет полностью соответствует общей стилистике проекта, но при этом использует привычные UX-паттерны:

• Яркие иллюстрации облегчают когнитивную нагрузку и ускоряют восприятие информации
• Сочные неоновые цвета акцентируют внимание на ключевых элементах интерфейса
• Стилизованные иконки подчеркивают аутентичность сервиса и легко считываются

Адаптивный дизайн: решаем проблемы с нагревом

Понимая, что большинство пользователей будет заходить на Marsland с мобильных устройств, мы детально проработали адаптивную верстку страниц. Столкнулись с проблемой: айфоны нагреваются из-за обилия градиентов, блюров и анимаций. Мы хотели создать полное погружение, но не такой ценой. После нескольких итераций оптимизации нам удалось «охладить» показатели. Теперь дизайн остается привлекательным и удобным на всех устройствах.

Наш проект Marsland не просто технически совершенен, но и визуально привлекателен. Дашборд, стилизованный под игровой интерфейс, мотивирует и вовлекает. Личный кабинет, поддерживающий общую тематику и удобный в использовании, обеспечивает интуитивное взаимодействие. Адаптивная верстка и оптимизация сделали сайт доступным для всех пользователей, независимо от их устройства. Впереди нас ждет финальный запуск нашего космического приключения!

Финальные штрихи: верстальщик, программист и SEO-специалист

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

Сначала выполнили валидную верстку по принципу Pixel Perfect — здесь каждый пиксель важен, ведь каждая микроанимация и иллюстрация играют роль в создании целостной вселенной Marsland. Верстальщик улучшил производительность страницы и минимизировал скорость загрузки ресурсов, что стало настоящим вызовом из-за масштабных 4к изображений, обеспечивающих полное погружение в историю.

Провели комплексное QA/QC тестирование на различных устройствах и разрешениях экранов в последних версиях браузеров. Это особенно важно для нашей целевой аудитории, которая всегда в курсе технологических новинок. Протестировали каждый пользовательский сценарий, убедившись, что все анимации и функциональные элементы работают безупречно.

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

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

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

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

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

Презентационное моушен-видео: ключ к успешному маркетингу

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

1. Сценарий. Разработали сценарий, который динамично рассказывает историю и укладывается в рамки одной минуты. Мы многократно вычитывали текст вслух, чтобы убедиться, что он хорошо воспринимается в разговорной речи и звучит естественно.
2. Голос для озвучки. Подобрали молодой, харизматичный голос с американским акцентом. Он приятен на слух и не вызывает раздражения, что важно для удержания внимания зрителя.
3. Техническое задание на озвучку. Создали техническое задание для озвучки, включив в него наш вариант в качестве референса. Подчеркнули нужные интонации и ударные слоги в сложных словах.
4. Раскадровка. Реализовали стильную и продуманную раскадровку видео. Сколько кадров может быть в ролике на 60 секунд? Очень много! Мы не отдавали эту задачу на аутсорс, доверив её дизайнерам, которые уже рисовали проект. Раскадровка получилась стильной, с готовыми идеями и сценариями анимаций.
5. Анимация и монтаж. Передали материалы моушен-дизайнерам и терпеливо ждали результата. Прошли через 4 раунда итераций правок, перебрали десятки вариантов фоновой музыки и второстепенных звуков.

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

В результате мы создали уникальную вселенную Marsland, объединив многостраничный сайт и личный кабинет в одно космическое приключение. Проект получил интерактивный сторителлинг и нативную геймификацию на уровне лучших примеров жанра — Марсианина и Mass Effect