КейсБрендингUI/UXРозробкаОнлайн-запис і оплатаМаркетинг-дизайн

Build & Learn Academy.

LEGO-школа для дітей 5–10 років у Лондоні. Проєкт зробив під ключ: спочатку логотип і сайт, потім власна система онлайн-запису з оплатою, а також обкладинки для Reels і друковані матеріали.

КлієнтBuild & Learn Academy, Dagenham Library, Лондон

ЗавданняЗапустити школу з нуля й продавати заняття онлайн

РольБренд, UI/UX, розробка, маркетинг-дизайн

СтекWordPress, PHP, JavaScript, Stripe

Сайт, який сам записує дітей на заняття і приймає оплату

Онлайн-запис 24/7Оплата StripeЛіміт місць у групі📍 Лондон

Сайт Build and Learn Academy на ноутбуці

6кроків від вибору групи до оплати, без дзвінків і листування

24/7запис і оплата онлайн, поки власник веде заняття

8місць у групі: система сама стежить за лімітом

1візуальна мова для сайту, соцмереж і друку

Завдання

Запустити LEGO-школу з нуля й продавати заняття онлайн

У школи не було ні бренду, ні сайту, ні способу приймати записи. Тому потрібно було, щоб батьки самі обирали групу за віком, записувалися й оплачували, і водночас власник не витрачав час на листування й таблиці.

Рішення

Одна зв’язка замість набору розрізнених сервісів

Брендлоготип, палітра, ілюстрований світ
Сайтmobile-first, відповіді на запитання батьків
Записвласна система: групи, ліміт місць, тарифи
ОплатаStripe просто у формі запису
Керуванняпанель власника з усіма записами
ПросуванняReels, пости, флаєри з QR-кодом

01Бренд

Візуальна ідентичність і логотип

Бренд мав водночас сподобатися дітям і викликати довіру в батьків. Тому строгий щільний шрифтовий логотип, а навколо нього яскравий світ із неба, хмар і кубиків LEGO.

Основна версія · іконка збирається з кубиків LEGO

Інверсія на фірмовому градієнті

B&L Academy

Іконка застосунку і фавікон

Аватар у соцмережах

Монохромна версія

Читається навіть у 24 px

Зрозуміло батькамЩільний гротеск без дитячих «бульбашок»: назва читається одразу й виглядає як серйозна школа, а не розважальний центр.

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

Працює всюдиОдна форма логотипа для світлого й темного тла: від шапки сайту та аватарки в соцмережах до друкованих флаєрів.

02Система

Дизайн-система і UI-kit

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

Палітра

Academy Blue#0067BE · заголовки

Sky#1F9DEB → #2F7BFF

Action Green#0DB88F · кнопки

Cloud#E5F3FC · тла

Ink#33373D · текст

Slate#496B84 · вторинний

Brick Yellowакценти, мітки

Whiteкартки

Типографіка · Poppins

Choose your child's age group

Small groups · Max 8 children

Short, friendly sentences for busy parents. One idea per line, clear next step on every screen.

H1 800 · H2 700 · Body 400 · кнопки 700 caps

Кнопки

Continue booking✓ Selected← BackNext →

Прогрес запису

1Group

2Service

3Date

4Details

5Payment

6Done

Картки

Ages 5–6 ✓

📅 Wednesday🕔 17:00 – 18:00👥 Max 8 children

✓ Selected

Ages 7–10

📅 Thursday🕔 17:00 – 18:00👥 Max 9 children

Select group ›

Monthly PackageSame group & instructor · Save £20 per month4 lessons

£60.00

Поля форми

Full Name *Parent full nameEmail *Parent email address

03Десктоп

Desktop experience

Перший екран одразу відповідає на три запитання батьків: що це, для якого віку і де. Крім того, ілюстрація з Dagenham Library показує, що школа поруч із домом, а кнопка зі знижкою на перше заняття завжди в шапці.

buildandlearnacademy.co.uk

Головна сторінка Build and Learn Academy повністю

Прев’ю головної сторінки

Ілюстрований світНебо, хмари й пагорби створюють настрій, а контент лежить на спокійних світлих блоках і добре читається.

Короткий шлях до записуКнопка «Get 50% discount» у шапці та плаваюча кнопка внизу ведуть просто у форму запису з будь-якої сторінки.

Відповіді до запитаньГрупи за віком, розклад, формат і FAQ зібрані так, щоб батькам не потрібно було писати й уточнювати.

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

Mobile experience: mobile-first підхід

Більшість батьків відкривають сайт із телефона, за посиланням із соцмереж або QR-кодом на флаєрі. Тому інтерфейс спершу проєктувався під екран телефона, а вже потім розширювався до десктопа.

Під великий палецьТому головні дії розміщені внизу екрана, у зоні досяжності; крім того, кнопки великі, тож схибити складно.

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

Запис без болюФорма бронювання на телефоні така ж зручна, як на комп’ютері: кроки, великий календар, оплата карткою через Stripe.

Екрани сайту прокручуються самі: так їх бачать батьки на телефоні.

05Власна система запису

Custom booking system: UX-логіка

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

1Group

2Service

3Date

4Details

5Pay

6Done

Choose your child's age group

Small groups · Max 8 children

Ages 5–6 ✓

📅 Wednesday · 17:00–18:00👥 Max 8 children

Ages 7–10

📅 Thursday · 17:00–18:00👥 Max 9 children

Continue booking

Choose your booking option

Select the package that suits you

Monthly PackageSave £20 per month4 lessons

£60

Single Lesson60 minutes1 lesson

£20

Welcome Offer50% off first session1 lesson

£10

Pick a date

Only real class days · spots left

SuMoTuWeThFrSa12345675 left8910111213145 left151617181920212 left222324252627285 left293031

Parent details

Only three fields

Full Name *Anna SmithEmail *anna@email.comPhone *+44 7700 900123 Complete booking

Payment

Secure payment by Stripe

Monthly Package · Ages 5–6£60.00

Card number4242 4242 4242 4242

Expiry12 / 28CVC•••

Pay £60.00

✓

You're booked!

Wednesday 14 · 17:00–18:00
Ages 5–6 · Monthly Package

Paid£60.00

Back to home

Натискайте на кроки: екран показує, що бачать батьки

Під логіку бізнесуГрупи, ліміти, абонементи та промо влаштовані так, як працює школа, а не як вирішив автор плагіна.

Без підписокНемає щомісячної плати за сторонній сервіс бронювання і комісії понад Stripe.

У стилі брендуФорма виглядає як частина сайту, а не як чужий віджет, тому їй довіряють.

Панель власникаЗаписи, оплати й заповненість груп в одному місці, без таблиць і листувань.

06Офлайн

Друковані матеріали та айдентика

Для просування офлайн, у бібліотеці та по району, зробив флаєри й постери. Крім того, вони продовжують стиль сайту й ведуть на запис через QR-код.

Флаєри DL · 99 × 210 ммДрук 300 ppi

Флаєр Hands-on STEM Build and Learn Academy

Флаєр Why parents choose us Build and Learn Academy

Флаєр Free trial Build and Learn Academy

07Соцмережі

Дизайн обкладинок і Reels

Серія обкладинок для Reels і постів у тій самій системі: небо, хмари, жовта мітка з локацією та зелена кнопка «Book a free class». Завдяки цьому акаунт у стрічці виглядає цілісно, а кожне відео продовжує шлях до запису.

Обкладинка Reels Build and Learn Academy

Пост для Instagram Build and Learn Academy

08Результат

Цілісна екосистема

У цьому проєкті я зробив не лише сайт, а продумав усю екосистему бренду: від бейджів команди й ролапа в бібліотеці до Reels і системи запису. Зрештою кожна частина веде до наступної: батьки бачать флаєр або відео, потрапляють на сайт, записуються й оплачують, а власник отримує запис без жодного дзвінка.

Ролап Build and Learn Academy у холі бібліотеки — Ролап для бібліотеки

Мобільна версія сайту в руці — Мобільна версія

Бейдж співробітника Build and Learn Academy — Бейджі команди

фундаментБрендЛоготип, палітра, ілюстрації й тон спілкування: одне обличчя для всіх каналів.

залученняReels і друкОбкладинки, пости, флаєри й постери з QR-кодом приводять батьків на сайт.

довіраСайтВідповідає на запитання про вік, формат, розклад і ціну до того, як їх поставлять.

конверсіяОнлайн-записШість кроків від вибору групи до підтвердження, з лімітом місць і промо.

грошіОплата StripeПередоплата просто у формі: місце закріплене, пропусків менше.

керуванняПанель власникаУсі записи й оплати в одному місці, власник займається дітьми, а не адмініструванням.

Reels / флаєр→Сайт→Запис→Оплата→Панель власника→Задоволені батьки розповідають іншим

09Живий проєкт

Переглянути живий проєкт

Сайт працює і приймає записи онлайн. Відкрийте його й спробуйте пройти запис самі.

Відкрити живий сайт ↗

→Інші кейси

ЗастосунокAFINAPWA для обліку особистих і сімейних фінансів: витрата за три дотики, спільний бюджетДивитися кейс → ЛендингGTStudioЛендинг студії тонування в Лондоні: калькулятор ціни, підбір відтінку за законом UK, три мовиДивитися кейс → Усі кейсиУсі проєкти з фільтрами за типом задачіПерейти →

Хочете таку саму систему для свого бізнесу?Розрахунок вартості за 30 секунд · без дзвінків · відповідь сьогодні Розрахувати