Malé kroky
Рассказы в авторском чтении, которые можно купить и послушать, но нельзя скачать
Посетить сайт →
Malé kroky («Маленькие шаги») – рассказы, которые Яна Хмелова написала и сама начитала. Мы подготовили для них дизайн-систему в Figma и по ней собрали сайт на WordPress с собственной темой и собственным плагином. Рассказ покупают без регистрации и оплачивают банковским переводом по QR-коду. Как только платёж приходит, рассказ сам появляется в библиотеке покупателя. Слушают его прямо на сайте, и запись никогда не уходит с него одним файлом.

Задача
Яна Хмелова пишет рассказы об обычной жизни и сама их читает. Она хотела продавать их по одному, за 49 крон. Но MP3, который кто-то скачал, можно тут же переслать дальше, и продажи нет. Защита, какой пользуются большие стриминговые сервисы, оплачивается каждый месяц, и рассказ за 49 крон её не окупит. К тому же покупка не должна была начинаться с регистрации. Тот, кто хочет послушать шестнадцатиминутный рассказ, не станет ради него заводить аккаунт и придумывать пароль. Платят переводом, так что между заказом и прослушиванием может пройти день или два, и всё это время покупатель должен понимать, что происходит. А новые рассказы Яна будет добавлять сама, без программиста.
Наше решение
- Дизайн-система в Figma выросла из логотипа, который у автора уже был.Цвета мы взяли из него и из её постов в соцсетях: кремовый фон, оливковый текст и терракота на листьях и следах. Чёрного в палитре нет. Основной текст набран кеглем 17 px, и каждое сочетание текста с фоном проходит контраст WCAG AA.
- У рассказов нет иллюстраций, обложку им заменяет цвет жанра.Оливковый значит «к размышлению», медовый «с юмором», терракотовый «из жизни», а песочный достаётся грустным. Поэтому к новому рассказу никому не нужно искать картинку.
- Сайт работает на WordPress с собственной темой и собственным плагином.Ни конструктор страниц, ни WooCommerce мы не ставили. Покупают всегда один рассказ или один сборник, без корзины и без доставки, и плагин интернет-магазина для этого не нужен.
- Заказ – это форма с именем и e-mail.После отправки сайт выставляет через SimpleShop счёт-фактуру и сразу показывает QR-код, номер банковского счёта и вариабельный символ. Фактура приходит и на почту.
- После оплаты всё происходит без Яны.SimpleShop сообщает сайту, что платёж пришёл. Сайт создаёт аккаунт, открывает рассказ и отправляет письмо со ссылкой, по которой покупатель задаёт пароль. А если сообщение о платеже где-то потеряется, сайт каждый час сам проходит по оплаченным фактурам.
- Тот, кто покупает через интернет, может в течение 14 дней отказаться от договора.С рассказом, который за это время уже прослушан, это не сочетается. Поэтому в заказе спрашивается, хочет ли покупатель получить рассказ сразу после оплаты и отказывается ли он от этого права. Без такого согласия сайт откроет рассказ только на пятнадцатый день.
- Запись никогда не уходит с сайта одним файлом.После загрузки плагин режет её на десятисекундные фрагменты и шифрует каждый. Плеер собирает их на ходу, а сервер при каждом фрагменте заново проверяет, что покупатель вошёл в аккаунт и рассказ у него куплен. Ссылка на запись действует шесть часов и только для того входа, которому была выдана.
- От DRM мы отказались намеренно.За него платят каждый месяц, и рассказ за 49 крон этого не потянет. Нашей защите хватает обычного хостинга с PHP, и она останавливает кнопку «Скачать», пункт «Сохранить как» и пересланную ссылку. В один аккаунт одновременно можно войти не больше трёх раз. Записать звук с колонок можно всегда, этому не помешает даже Netflix.
- Плеер свой, без меню, которое браузер добавляет к звуку.Он умеет ускорять вдвое, замедлять до 0,75× и перематывать на 15 секунд в обе стороны. Он запоминает, где прослушивание остановилось, и библиотека предлагает продолжить с того же места, в том числе на другом устройстве. Бесплатные рассказы он проигрывает целиком и без входа.
- Админка – это WordPress, в котором осталось только то, что нужно Яне.Меню мы сократили и добавили в него «Рассказы», «Сборники», «Покупательницы» и «Продажи и платежи». Чтобы добавить рассказ, она заполняет название, описание, жанр и цену и загружает MP3. Длительность сайт считает сам, а нарезку и шифрование делает в фоне. К этому у неё есть руководство на 21 страницу.
Сайт
Скриншоты с работающего сайта malekrokydoouska.cz, а не из макета.



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



На телефоне
Те же страницы на ширине телефона, снова с работающего сайта.
Дизайн-система в Figma
Один файл с цветами, шрифтами, 73 иконками и 35 компонентами. Из них собраны 14 экранов для компьютера, 6 для телефона и 2 письма.




Что мы реализовали
Дизайн-система в Figma: 35 компонентов и 73 иконки
WordPress с собственной темой и собственным плагином
Покупка без регистрации, оплата переводом по QR-коду
Прослушивание зашифрованными фрагментами, файла для скачивания нет
Аккаунт и библиотека после оплаты создаются сами
Плеер, который помнит место прослушивания
Бесплатные рассказы целиком и без входа
Управление рассказами без программиста, руководство на 21 страницу


