case

Про проєкт

До мене звернулася Лєра — засновниця онлайн-школи іноземних мов Valehrerin.School. Лєра неймовірно креативна людина, її головний підхід: «Вивчення мови може бути захоплюючим»

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

На той момент сайт школи, який ми разом робили, вже успішно працював близько року, і на ньому були окремі сторінки для різних продуктів (гайди, розбори фільмів, пісень). Для цього розбору фільму «Letzte Weihnacht» так само потрібно було створити окрему сторінку сайту.

( Задача )

Показати нас такими, якими ми є, щоб до нас приходили саме ті люди, яким подобається наш підхід і які будуть почуватися з нами комфортно

( Мета)

Сайт має бути інформативним, привабливим, дружнім, із простим викладом інформації, щоб у клієнта виникла фраза «ХОЧУ»

Розбір фільму у вигляді презентації pdf, надісланий Лєрою, який потрібно було додати на сайт →

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

Також потрібно було повністю автоматизувати продажі, щоб Лєра могла займатися улюбленою справою, а система сама приймала оплати та миттєво надсилала матеріали на пошту після покупки.

Підготовка

Весь проєкт я вела самостійно: від ідеї та аналітики до фінальної верстки й налаштування автоматизації. Але про все по черзі)

Етапи роботи над проєктом:
→ Бриф
→ Аналіз
→ Текст
→ Дизайн
→ Верстка

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

Аналіз аудиторії та конкурентів у мене вже теж був — глобальний, по всьому проєкту, ми його робили раніше. Тому тут цей етап був у стислій формі.

Структуру так само склала швидко, спираючись на вже існуючі на сайті сторінки, трохи переробивши, щоб показати вивчення за фільмами під новим кутом.
І тепер можна було переходити до найцікавішого)

Текст

Тексти для сайту були одним із найвідповідальніших завдань. Мені було дуже важливо передати унікальний стиль і манеру спілкування Лєри: її щирість, енергію та ту саму любов до вивчення мов

Для цього я

(1)

Переглядала Instagram та Telegram-канали Лєри, виписувала улюблені слівця, інтонації та те, як вона спілкується зі своїми учнями

(2)

Використовувала GPT як асистента. Я «згодовувала» їй транскрибації Лєри, щоб ШІ навчився наслідувати її стиль. Ми генерували десятки варіантів

(3)

З величезного масиву згенерованого тексту я збирала фінальний текстовий пазл

(4)

У підсумку тексти вийшли дуже щирими. І я, і Лєра були задоволені, можна було переходити до наступного етапу

Мудборд

Робота почалася з глибокого занурення. Щоб упіймати той самий настрій, я переглянула фільм і зробила десятки скриншотів. Я шукала «зачіпки», які можна перенести в дизайн

У якийсь момент я зрозуміла, що Лондон у цьому фільмі — окремий персонаж. Його старовинні вулички, вивіски кафе та різдвяні вогні продиктували всю концепцію. Головною ідеєю стало використання лінійних візерунків для фону — таких самих легких та ажурних, як ковані елементи на мостах або вітринах різдвяного Лондона.

Дизайн

Фільм «Letzte Weihnacht» дуже добрий, ніжний і магічний. Мені хотілося передати цю різдвяну магію, тепло та затишок через дизайн сайту. Тому, надихнувшись на етапі мудборду, використала такі прийоми

(1) Перший екран

Падаючий сніг на головному екрані: те, що миттєво створює зимовий настрій та асоціацію зі святом

(2) Колір

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

(3) Фон

Щоб структура не виглядала монотонно, я розділила блоки за настроєм. Там, де ми говоримо про сам фільм, фон стає глибоким і темним, створюючи ефект кінозалу. А коли переходимо до розділу про авторку — все стає світлим і «повітряним», підкреслюючи відкритість та експертність Лєри

(4) Рукописний шрифт

Щоб додати текстам життя, я використала вкраплення рукописного шрифту для створення відчуття особистого листа або нотатки на полях підручника

(5) Анімація

за мишкою тягнеться м’який казковий шлейф, схожий на іскри бенгальського вогню

текст заголовків з’являється плавно, немов проступаючи крізь морозне скло

додала дуже нюансне світіння булітів, що нагадує мерехтіння далеких зірочок

Після презентації дизайну отримала такий приємний відгук)

Автоматизація

Фінал

Фінальним технічним штрихом було налаштування оплати та автоматичної розсилки

Студент оплачує гайд і матеріали миттєво приходять йому на пошту. Без ручної участі, повністю автоматично. За відпрацьованою схемою, яку ми вже використовували раніше

Награды

Але на цьому історія не закінчилася. Цей проєкт настільки мені полюбився і запам’ятався якоюсь своєю магією, що я відправила його на конкурси. І він завоював три міжнародні нагороди

Guru of the DAY

(Web Guru Awards)

(Top Design King)

King Of The Day

Site of The Day

(BEST CSS)

( P.S )

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