Торік ілюстрації застосунку Headway визнали найкращими в категорії Digital Art and Graphic Design за версією Novum Design Award. Headway app — це основний продукт українського EdTech-стартапу Headway, в якому містяться 15-хвилинні текстові виклади бестселерів, також там є щоденні інсайти та гейміфіковані челенджі.

Відірватися від конкурентів та стати лідером на ринку допомогли ілюстрації, а саме — унікальний підхід до створення обкладинок, розповідає Visual Design Lead Поліна Гонта. Поліна намалювала вже понад 1 000 ілюстрацій для застосунку, розробила винятковий фреймворк кастомних обкладинок та сформувала команду, яка відповідає за виготовлення обкладинок у Headway.

Поліна Гонта — Visual Design Lead у Headway

Обкладинки — ключовий елемент диференціації

Перше, що бачать користувачі у нашому застосунку — обкладинки до book summary. Англійська ідіома Don’t judge a book by its cover починає працювати у зворотному напрямку. Адже метафори та підказки на обкладинках допомагають читачам зрозуміти головні ідеї книги.

Коли ми запустили застосунок, то мали два шляхи оформлення обкладинок (але насправді один):

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

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

Book summaries ставало все більше, а візуальний складник змінив вигляд застосунку. Яскраві та на 100% унікальні обкладинки відмінно поєдналися зі світлим та мінімалістичним інтерфейсом. Ми зробили перші кастомні обкладинки, які стали нашою візитівкою та допомогли відмежуватись від основних конкурентів.

Як працювати в продукті, не роблячи з рутини гільйотину

Зараз у застосунку вже понад 1 500 обкладинок до book summaries, а також різноманітні колекції та челенджі. Насамперед ми активно нарощували стартовий обсяг контенту. За тиждень виходило 13-15 обкладинок, і так протягом трьох місяців.

Ідеї та асоціації з’являлися швидко: лідер — кубок, успіх — вершина гори, планування — to-do list. У нонфікшні є багато категорій, але найпопулярніші — бізнес, інвестиції, кар’єра, продуктивність, саморозвиток. За даними нашого дослідження, 60% користувачів Headway app із США, Британії та Австралії називають підвищення продуктивності головною ціллю, задля якої вони користуються застосунком.

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

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

У процесі роботи ми сформували алгоритм створення обкладинки:

1. Досліджуємо текст та визначаємо тему книги. Часто в заголовках зустрічаються крилаті вислови. Важливо розуміти, що вони означають. Від цього вже можна відштовхуватись.
2. Враховуємо настрій. Ton of voice головних ідей книги допомагає зрозуміти настрій, визначитись з кольоровою палітрою та образами.
3. Аналізуємо відгуки читачів на Amazon. Вони допомагають подивитись на книгу під іншим кутом.
4. Знаходимо метафори на основі сучасних культурних течій, щоб зобразити ключові ідеї та тему книги.
5. Використовуємо візуальну ієрархію, щоб розставити акценти та гармонійно поєднати ілюстрацію з текстом.
6. Обираємо відповідні шрифти та кольори.
7. Робимо заголовок помітним.
8. Не випускаємо з уваги підзаголовок і корінець. Вони створюють візуальне враження справжньої книги.

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

• графічні елементи з помірною деталізацією;
• використання шейпу (абстрактного або образного);
• невеликий набір шрифтів (до 15);
• добре вибрана палітра з контрастними кольорами, які гармонійно поєднуються.

Нам було важливо звести час створення ілюстрації до адекватного мінімуму та легко використовувати елементи в інших ілюстраціях. У нас уже понад 1 500 обкладинок, тому цілком логічно використовувати певні елементи в інших ілюстраціях. Після появи єдиного стилю ми взялися за оновлення старих обкладинок, щоб досягти консистентності у візуальній складовій застосунку. Цей підхід став важливим доповненням до нової стилістики.

Чутливі теми та оновлення внаслідок повномасштабної війни

Наші користувачі мають різний культурний бекграунд, етнічну приналежність та гендерні ідентичності. Важливо враховувати особливості кожного, тому ми культивуємо diversity в ілюстраціях. Наша команда стежить за новинами та трендами на пріоритетних для застосунку ринках — США, Велика Британія, Австралія, Канада, Латинська Америка та Іспанія — аби розуміти місцеві особливості та дбати про комфортне сприйняття контенту.

Нещодавно ми запустили напрям Sex Education. Це чутлива тема, зокрема для людей з різними релігійними переконаннями. Тому ми ретельніше ставимось до вибору візуальних образів та тестуємо ілюстрації.

На початку березня ми випустили колекцію — War in Ukraine: What’s Happening, and Why It Matters — про тероризм росії проти України. Мета колекції — розказати якомога більшій кількості людей у світі про злочини рф, пояснити, чому варто закрити небо над Україною і закликати допомогти нашій країні фінансово. В обкладинках ми зробили акцент на кольорах та сенсах, які важливо донести до 15 млн наших користувачів з понад 140 країн.

Що далі

Headway має амбітну ціль — стати лідером у галузі освітнього bite-sized (лаконічного) контенту. Ми все більше орієнтуємося на дослідження, data-driven підхід, розвиваємо R&D. Команда Headway працює над тим, щоб перетворити складні думки в прості та лаконічні образи, а глибокі ідеї — у сучасний та привабливий візуальний контент.