Перейти до прикладу
Продуктова та дизайнерська команда

У наявності — десять тисяч книг. Читач прийшов по одну.

Інтернет-книгарня України зберігає на своїх полицях понад десять тисяч найменувань. Ми перебудували магазин навколо однієї задачі: надати читачеві потрібну книгу в потрібному форматі та оформити замовлення, не залишаючи сторінки, на якій вони знаходяться.
На що відповідає редизайн

+102%

Середня вартість замовлення

+128%

Мобільна конверсія

+104%

Каталог до покупки Перетворення
Сервіс
UX/UI-дизайн та CRO
ПЕРЕГЛЯНУТИ СЕРВІС
Домашня сторінка після редизайну: пошук по всьому заголовку, каталог одним клацанням миші, потім надходження цього тижня та полиця категорій.
Клієнт
Відповідно до NDA
Промисловість
Електронна комерція · книги
Ринок
Україна
Клієнт
Інтернет-книгарня з доставкою по Україні
Художня література, дитячі, ділові та навчальні книги з власного складу, а також попередні замовлення, електронні й аудіокниги. Назва магазину залишається за клієнтом відповідно до NDA.
10,000+
назв в наявності
18
розділи в каталозі
3
форматів однієї книги
5
способи отримання замовлення
Про що нас просили
Редизайн всього магазину, від головної сторінки до облікового запису читача.
Екрани
Домашня сторінка, каталог, категорія, сторінка продукту, кошик, оформлення замовлення, підтвердження замовлення, обліковий запис, списки побажань, автори, видавці, акції, новини, блог, контакти, інформація, вхід і 404.
Платформи
Робочий стіл на 1920 і 1440, телефон на 375. Кожна сторінка має власний макет телефону, а не зменшену копію.
Нові надходження, попередні замовлення та акції змінюються щотижня. Макет мав прийняти це без перемальовування кожного сезону.
Проблема

Для десяти тисяч найменувань потрібно більше ніж один шлях.

Що мав вирішити магазин · Інтернет-книгарня, відповідно до NDA
[ 01 ]
Більше десяти тисяч назв у вісімнадцяти розділах. Читач, який знає книгу, має дійти до неї за один крок; той, кому не потрібна полиця, яка звужується.
[ 02 ]
Одна книга доступна як паперова, електронна та аудіокнига, кожна за своєю ціною. Читач має побачити всі три перед тим, як вибрати, а не після.
[ 03 ]
Нові надходження, попередні замовлення та знижки змінюються щотижня, тому перший екран має працювати як вітрина, яка оновлюється сама.
Каталог відкривається з шапки на будь-якій сторінці: вісімнадцять розділів ліворуч, їхні полиці біля них. Будь-який жанр знаходиться в двох кліках, де б не був читач.
Хто купує
Два читача, один каталог
Обидва потрапляють на одну домашню сторінку. Їм від цього потрібно інше.
[ 01 ]
Знає назву
Читач, який знає книгу
Приходить з назвою або автором на увазі, часто з огляду або друга, і хоче купити, перш ніж мине момент.
Приходить для
Книга, в наявності, в тому форматі, який вони хочуть, за ціною, яку вони бачать.
Зупиняється на
Пошук, який нічого не повертає, формат, прихований на іншій сторінці, перевірка, яка спочатку хоче обліковий запис.
Відповів
Пошук у заголовку з обкладинками та цінами в результатах, паперові, електронні та аудіокниги на одній сторінці та швидкі покупки в одній короткій формі.
[ 02 ]
Перегляд
Читач шукає наступну книгу
Знає жанр чи настрій, а не назву. Переглядає, що нового, що популярне та що надходить за попереднім замовленням.
Приходить для
Короткий список, який варто відкрити: нові надходження, бестселери, попередні замовлення та пропозиції.
Зупиняється на
Полиця з тисячами, яку неможливо звузити, і сторінка, на якій не вказано, чи хороша книга.
Відповів
Дерево категорій із підрахунками, фільтри, які залишаються видимими як фішки, рейтинги на кожній картці та вкладка, щоб прочитати уривок перед покупкою.
Ставка

Кожна книга знаходиться в одному кроку від пошуку та в одному екрані від оплати.

[ 01 ]
Пошук і каталог знаходяться в заголовку кожної сторінки, і порожній пошук все одно пропонує шлях далі.
[ 02 ]
Одна сторінка на книгу, а не на формат: папір, електронна та аудіокнига змінюються, кожна має свою ціну.
[ 03 ]
Купівля ніколи не відриває читача від сторінки: кошик відкривається над ним, а для швидкої покупки потрібна одна коротка форма.
Три правила, п'ять етапів. Кожна зміна нижче є однією з застосованих.
Етап за етапом
Що потрібно читачеві на кожному кроці, і що ми туди вкладаємо
Один блок на етап. Кожен містить запитання, на яке він відповідає, що відправлено та номер, за яким ми спостерігаємо, щоб знати, що він працює.
[ 01 ]
Головна та пошук
Питання, на яке воно відповідає
Де книга, за якою я прийшов, або, якщо я ще не знаю, що мені прочитати далі?
Що ми зробили і чому
Поле пошуку в усьому заголовку та кнопка «Категорії» поруч, яка відкриває повний каталог, а потім банери тижня, бестселери, нові надходження та попередні замовлення, оскільки читач або вводить, або переглядає, і обидва починаються тут.
[ 02 ]
Каталог
Питання, на яке воно відповідає
Як перейти від тисяч назв до полиці, яку я можу прочитати?
Що ми зробили і чому
Дерево категорій ліворуч із підрахунком біля кожного жанру, кожний активний фільтр у вигляді фішки над сіткою з одним «Очистити все» та сортування за рейтингом, оскільки в каталозі такого розміру фільтри є навігацією.
[ 03 ]
Сторінка товару
Питання, на яке воно відповідає
Який формат, за якою ціною і чи хороший він?
Що ми зробили і чому
Папір, електронна та аудіокнига як три перемикачі зі своїми цінами, рейтингом і запасами під назвою, доставкою, оплатою та поверненням під кнопкою та вкладками для оглядів та уривка, бо це вирішує читач.
[ 04 ]
Кошик і оформлення замовлення
Питання, на яке воно відповідає
Скільки це буде коштувати загалом і як це дістанеться мені?
Що ми зробили і чому
Кошик, який відкривається над сторінкою, потім одна каса в пронумерованих блоках — замовлення, доставка, оплата, отримувач — з Новою Поштою та Укрпоштою, вибір відділення на карті та кожна знижка у своєму рядку в підсумку праворуч.
[ 05 ]
Обліковий запис і списки бажань
Питання, на яке воно відповідає
Де мої замовлення, і куди я поклав цю книгу на потім?
Що ми зробили і чому
Історія замовлень, адреси та одержувачі в обліковому записі, списки побажань імена читачів, заповнення та переміщення книг між собою, тому що книгарня живе другим замовленням і десятим.
Етапи 03 і 04 виконують замовлення. Обидва внизу, ближче.
ДЛЯ ІНТЕРНЕТ-МАГАЗИНІВ · ПРОПОЗИЦІЯ НА 90 ДНІВ

Ми покращуємо конверсію вашого онлайн-магазину на 80% за 90 днів без збільшення рекламного бюджету.

Коли реклама перестає працювати, а більший бюджет більше не приносить більше продажів, ми дивимось, як люди поводяться у вашому магазині, читаємо аналітику, спілкуємося з вашими покупцями та перебудовуємо пропозицію та інтерфейс так, щоб покупки повторювалися, а середнє замовлення збільшувалося на 20%.
Ваше ім'я*
Електронна пошта*
Безкоштовний аудит
Прогноз результатів для вашої ніші
Перший результат через 14 днів

5.0

5.0 на Clutch · 15 відгуків
Усі п’ятнадцять – п’ятизіркові
C
D
T
P
ClipSwift · DEOZEN · Тандем · PickUpShoes
Клієнти, яких ми можемо назвати
Особлива похвала зчеплення
2024 · 2025 · 2026
Етап 03 · Сторінка товару
Одна книга, три формати і кожна відповідь на одному екрані
Папір або аудіокнига, скільки, є в наявності, коли прийде, чи можу я прочитати сторінку першою — кожне питання, яке виникає у читача в момент прийняття рішення, стоїть біля кнопки.
Сторінка
Сторінка товару на робочому столі: обкладинка та сторінки ліворуч, формати, ціна та обидві кнопки праворуч, умови доставки під ними та вкладки внизу.
Блок рішень, ближче
1
2
3
Обидва читачі
[ 1 ]
Три формати, три ціни
Папір, електронна та аудіокнига сидять поруч як перемикачі, кожен має свою ціну, тому вибір робиться тут, а не на трьох сторінках.
Знає назву
[ 2 ]
Два способи покупки
«Додати в кошик» для кошика книг, «Швидка покупка» для тієї, за якою прийшли: коротка форма замість кошика та повна оплата.
Перегляд
[ 3 ]
Відповіді під кнопкою
Варіанти доставки, способи оплати та умови повернення протягом 14 днів розміщено одразу під ціною — саме там, де читач уже шукає цю інформацію.
Етап 04 · Кошик і оформлення замовлення
Кошик над сторінкою та касу в чотирьох пронумерованих блоках
Скільки загалом, у якому відділенні, як платити, хто забирає — у такому порядку каси запитують і весь час тримають у полі зору.
Візок
Кошик відкривається над сторінкою, на якій був читач: кожна книга з її кількістю та сумою, підсумком і двома кнопками — назад на полицю або на касу.
Оплата
1
2
3
Знає назву
[ 1 ]
Новий або повернутий одним дотиком
Дві вкладки над контактною формою. Читач, який повертається, перемикає вкладки замість того, щоб знову заповнювати форму.
Обидва читачі
[ 2 ]
Пронумеровані блоки, заповнені по порядку
Замовлення, доставка, оплата, одержувач. Нова Пошта або Укрпошта, відділення або кур'єр, з обраним відділенням на карті.
Перегляд
[ 3 ]
Кожна знижка на свою лінію
Підсумок праворуч поділяє товари, доставку, знижки на продукти, промокод і особисту знижку, тож читач бачить, чому загальна сума є такою.
На чому базується кожне рішення на цій сторінці
[ 02 / 04 ]
02 · Сторінка товару
[ 01 ]
Наскільки поширене пошкодження
82%
сайтів мають серйозні проблеми з зручністю використання на сторінці продукту
Інститут Беймарда · тест на сторінці продукту
[ 02 ]
Скільки його читають
20%
слів на сторінці – це те, на що має час середній відвідувач
Nielsen Norman Group · як мало читають користувачі
[ 03 ]
Скільки коштує один заблокований розмір
68%
сайтів не дозволять покупцеві замовити товар, якого тимчасово немає в наявності
Інститут Беймарда · дослідження сторінок продукту

Книги не змінювалися. Змінилося те, як швидко читач добирається до одного.

Що змінилося
Домашня сторінка, каталог, сторінка товару, кошик, оформлення замовлення та обліковий запис. Кожен забезпечує доступність умов пошуку, наявності та доставки, і жоден не відриває читача від сторінки, щоб купити.
Те, що ми залишили в спокої
Асортимент, ціни та партнери по доставці. Магазин вирішує, що він продає та як доставляє; сайт робить це видимим.
Що б ми робили далі
Читайте пошук → сторінка продукту та сторінка додавання в кошик поруч. Якщо читачі шукають і не відкривають книгу, результати потребують роботи; якщо вони відкривають її та не купують, сторінка продукту робить це.

Інші проєкти

Електронна комерція B2B/B2C
Купуйте для спільноти
Щоб переконатися, що нова функція покупки та повний редизайн магазину були інтуїтивно зрозумілими, ми протестували прототип із спільнотою користувачів Pko. Результати підтвердили безперебійну взаємодію з користувачем, зафіксувавши середню тривалість сеансу 93 секунди та коефіцієнт конверсії понад 80%.
Електронна комерція B2B/B2C
TandemShop
Спочатку 80% відвідувачів Tandem Shop не переходили до першого екрана, пропускаючи ключові продукти та заклики до дії. Завдяки покращенню навігації та видимості сайту середня вартість замовлення зросла на 19,4%.
Електронна комерція B2B/B2C
Каталог Електронна комерція
Перепланування магазину з підходом до мобільних пристроїв і чіткими сигналами довіри спростило процес покупки. Відповідно, загальна кількість конверсій зросла на 18% (мобільні на 38%), середня вартість замовлення зросла на 10%, а показники відмов знизилися на 18%.
Електронна комерція B2C
Premium Store
Щоб зменшити кількість залишень у кошику, наша команда запровадила інтелектуальні значки доставки, оновлення валюти в реальному часі та динамічне оформлення замовлення. Цей локалізований підхід усунув регіональну плутанину та забезпечив прозорість ціноутворення для всіх покупців.

Більше наших робіт на Behance

Переглянути на Behance

Відгуки

5.0

1111111Робота DizArm UX/UI Agency покращила утримання користувачів і навігацію, підвищила впізнаваність бренду та професійну присутність клієнта на ринку. Крім того...

Богдан Лищенко

Засновник ClipSwift

5.0

Робота DizArm UX/UI Agency покращила утримання користувачів та навігацію, підвищила впізнаваність бренду та професійну присутність клієнта на ринку. Крім того...

Богдан Лищенко

Засновник ClipSwift

5.0

Робота DizArm UX/UI Agency покращила утримання користувачів та навігацію, підвищила впізнаваність бренду та професійну присутність клієнта на ринку. Крім того...

Богдан Лищенко

Засновник ClipSwift

5.0

Робота DizArm UX/UI Agency покращила утримання користувачів та навігацію, підвищила впізнаваність бренду та професійну присутність клієнта на ринку. Крім того...

Богдан Лищенко

Засновник ClipSwift

5.0

Робота DizArm UX/UI Agency покращила утримання користувачів та навігацію, підвищила впізнаваність бренду та професійну присутність клієнта на ринку. Крім того...

Богдан Лищенко

Засновник ClipSwift

Перший крок – це завжди розмова

Заповніть форму сьогодні та отримайте відповідь протягом 1 години. Якщо ми пропустимо це вікно, ви отримаєте безкоштовний аудит продукту або розробку концепції від DizArm.

0/5000
Бюджет* (необов'язково)
0/5000
дякую! Ваше звернення отримано!
Ой! Під час надсилання форми сталася помилка.

Буду радий надати додаткову інформацію про рішення, розроблені нашою командою, і допомогти у виборі оптимального підходу.

Богдан Лищенко
[Генеральний директор] DizArm.Creative
hello.dizarm@gmail.com
Ми хочемо створювати інновації разом з вами
Як структурувати процес менеджера проекту?
дякую! Ваше звернення отримано!
Ой! Під час надсилання форми сталася помилка.