Stefa.books — дитяча бібліотека з підпискою

Сайт і внутрішній облік для дитячої бібліотеки: каталог книг, підписка Mini/Maxi, оренда й купівля, кабінет батьків і адмінка, де видно, яка книга в кого і коли її повернуть.

Product Design
UX/UI
E-commerce
Frontend

Реальний проєкт: сайт працює на stefa-books.com.ua. Ціни й тарифи взято з живого сайту.

Клієнт: Stefa.books, Миколаїв
Роль: Product Designer · дизайн і розробка
Рік: 2025–2026

Сторінка підписки Stefa.books: тарифи Mini і Maxi, терміни від місяця до року зі знижкою — Stefa.books — дитяча бібліотека з підпискоюРоботи · 07 / 09

Відкрити сайт проєкту

тарифи: 1 або 2 книги одночасно: 2тарифи: 1 або 2 книги одночасно
терміни підписки, від місяця до року: 4терміни підписки, від місяця до року
способи отримати книгу: 3способи отримати книгу
адмінка замість таблиць і чату: 1адмінка замість таблиць і чату

Обговорити проєкт

01 /08

Бібліотека, де книгу беруть, а не купують

Stefa.books — невелика дитяча бібліотека в Миколаєві. Книги тут переважно беруть на час: батьки оформлюють підписку, дитина читає, книгу повертають і беруть наступну. Частину книг можна купити.

До сайту все трималося на таблиці й переписці. Каталог жив у Google Таблиці, замовлення приходили в месенджер, а хто зараз тримає яку книгу, знав лише адміністратор. Моя задача була перенести це в продукт, яким зручно користуватися і батькам, і бібліотеці.

Категорія: E-commerce · Підписка · Освіта
Продукт: Каталог, підписка, оренда, купівля, кабінет, адмінка
Статус: Працює, stefa-books.com.ua
Моя роль: Продукт, UX/UI, бренд сайту, розробка

02 /08

Підписка, яку легко зрозуміти

Оренда книги для більшості батьків незвична. Перше питання на сайті — не «яку книгу взяти», а «як це працює і скільки коштує». Якщо відповідь не очевидна з першого екрана, людина пише в месенджер або йде.

Друга половина задачі — зсередини. Бібліотека має бачити оренди, терміни повернення, оплати й залишки без ручного зведення таблиць.

01
Батьки
хочуть зрозуміти тариф, обрати книги за віком дитини й оформити підписку з телефона за кілька хвилин.
02
Дитина
обирає книгу очима: обкладинка, вік, кілька слів про сюжет.
03
Бібліотека
бачить, яка книга в кого, коли її мають повернути і хто оплатив, без таблиць і чату.

03 /08

Як заробляє бібліотека

Каталог

Тариф

Оформлення

Оренда

Повернення

Наступна книга

Підписка Mini: одна книга одночасно
Підписка Maxi: дві книги одночасно
Знижка за довший термін: 3, 6 або 12 місяців
Купівля книги зі знижкою для підписників

Підписка
Основний дохід. Ціна фіксована за термін, тож батьки знають суму наперед, а бібліотека — свій місячний дохід.
Оренда й купівля
Окрема книга без підписки або книга у власність. Це вхід для тих, хто ще не готовий до підписки.

04 /08

Рішення, на яких тримається сайт

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

01
01. Ціна видна одразу
Тарифи стоять на головній як таблиця: скільки книг, на який термін, скільки це за місяць і скільки заощаджено. Одна логіка цін працює і на сторінці, і на сервері, тому сума при оформленні не розходиться з тим, що людина бачила.
02
02. Книга має свою адресу
Кожна книга — окрема сторінка з людською адресою, обкладинкою, віком і описом. Її можна переслати в чат батьків, і її знаходить пошук.
03
03. Мʼякий, але читабельний стиль
Жовтий із логотипа, округлі форми, шрифт Nunito. Жовтий лишився фоном і підкресленням: як колір тексту він не проходив за контрастом.

05 /08

Основні сценарії

FLOW 01
Оформити підписку
1. Обрати тариф і термін
2. Вказати контакти
3. Обрати, як отримати книги
4. Оплатити переказом і надіслати скриншот
FLOW 02
Взяти книгу
1. Знайти книгу в каталозі за віком чи категорією
2. Відкрити сторінку книги
3. Оформити оренду або купівлю
4. Забрати в бібліотеці, курʼєром чи Новою поштою
FLOW 03
Робочий день бібліотеки
1. Нові замовлення й підписки в адмінці
2. Видати книгу й поставити термін
3. Відмітити повернення
4. Оновити каталог і залишки

06 /08

Адмінка замість таблиці

Внутрішня частина важить не менше за вітрину: саме вона замінила таблицю й переписку.

Каталог: додати книгу, сховати її з сайту без втрати історії оренд.
Замовлення, оренди й підписки — окремі списки з фільтрами за статусом.
Терміни повернення видно в оренді, а не в памʼяті.
Налаштування без коду: знижка підписникам, ціна курʼєра, промокоди.
Вхід в адмінку обмежений за кількістю спроб, а кожен адмінський маршрут закритий за замовчуванням.

07 /08