Universe — продуктова IT-компанія, яка входить в екосистему бізнесів холдингу Genesis. Працює в трьох напрямках: створення утиліт для iOS, розробка казуальних ігор для смартфонів та розвиток R&D-центру. Сьогодні продуктами компанії користуються понад 35 млн користувачів з усього світу (США, Японія, Латинська Америка тощо).

Аня Шулик, продакт-дизайнерка Universe, розповіла Telegraf.Design про особливий підхід до створення дизайн-систем мобільних застосунків, інструменти і підходи, що використовують в Universe, та основні тренди у візуальному оформленні цифрових продуктів.

Додатки, з якими працює дизайн-команда Universe

Що таке дизайн-система і навіщо вона потрібна

Дизайн-система містить три складника: візуальну мову (окремі елементи, кольори, шрифти, іконки тощо), фреймворк (код, що описує візуальну мову) та гайдлайни (опис процесів). За допомогою дизайн-систем робота над візуальною складовою додатку стає максимально автоматизованою, консистентною та залишає команді більше часу на UX-дизайн та прототипування.

Команда продуктових дизайнерів Universe працює над створенням дизайн-систем для семи додатків. Серед них найпопулярніші: Translator Guru — переклад текстів, ScanGuru — сканування документів, Cleaner Guru — очищення кешу на смартфоні. В нашій роботі ми використовуємо не зовсім традиційний підхід до створення дизайн-систем.

Дизайн-система ScanGuru

Більшість дизайн-команд дотримуються атомарного підходу. Вони починають роботу зі створення елементів — іконок, шрифтів, тіней, модальних вікон. Пізніше збирають дизайн-систему. Ми переконані, що краще спочатку створити платформу — так ми не втратимо час та ресурси на зайві елементи. Тому зазвичай продуктова команда починає з глибинного дослідження, вивчення аудиторії та MVP. Уже на основі цих даних дизайн-команда створює customer journey mapping та розпочинає проєктування платформи.

Лише після цього ми опрацьовуємо атомарні елементи:

• Збираємо перелік візуальних атрибутів (відступів, кольорів і типографіки), який стане базою для створення візуальної мови;
• Складаємо список з перерахуванням кожного елемента інтерфейсу користувача (кнопки, картки, модальні вікна), який допоможе нам створити бібліотеку компонентів інтерфейсу користувача;
• Створюємо візуальну мову дизайн-системи: розмір, інтерліньяж, шрифти, інтервали, зображення (іконки/знаки, ілюстрації).

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

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

Перше враження — найголовніше

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

За даними дослідження Sixteen Ventures, клієнт, який не відчув користі від сервісу з перших взаємодій, залишить додаток протягом 30-90 днів. І навряд чи він повернеться, адже на нього вже чекають конкуренти.

Онбординг для xScan WEB (один із портфелю додатків Universe)

Поглянемо на статистику:

• Продукт втрачає 75% нових користувачів упродовж першого тижня;
• 40-60% користувачів, які розпочали тестовий період, скористаються продуктом один раз і більше не повернуться;
• У більш ніж ⅔ SaaS-компаній показник відтоку користувачів перевищує 5%.

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

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

У процесі створення продукту ми завжди опираємося на принципи Human-Centered Design. Це підхід, заснований на емпатії та увазі до потреб користувача. Його запити — понад усе.

Research HCD – Co-Creating Well-Being

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

Онбординг у додатку Translator Guru до оновлення

Так сталося із Translator Guru: його дизайн став застарілим та непослідовним. Раніше його інтерфейс був розрахований на iPhone 8. Аналітика показувала, що більшість наших юзерів користуються новішими моделями iPhone — з більшими екранами. Що ми зробили? Комплексно підійшли до змін:

• Створили новий інтерфейс під розмір останньої моделі Pro Max, де завдяки більшій площині вдалося розмістити нові елементи;
• Змістили акценти із сейл скріну на екрани, що транслювали переваги продукту. Все це анімували;
• Доповнили все коротким, але змістовним текстом;
• Змінили візуальну подачу (ілюстрації, градієнти, блюр).

Оновлений онбординг додатку Translator Guru

Поки що ми тестуємо новий інтерфейс, але вже бачимо, що конверсія зросла на 15% на етапі покупки підписки. Наразі арсенал інструментів, доступний дизайнерам, надзвичайно широкий. У нашому досвіді стали у пригоді:

• Моушн-елементи, які спрощують взаємодію з продуктом;
• Робота з типографією та шрифтами;
• Градієнти та блюр;
• 3D зображення;
• Ефект матового скла;
• Інтуїтивна навігація свайпом;
• Анімація Lottie на онбордингу і всередині додатку.

Як ми працюємо

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

• Reach (охоплення): яку кількість юзерів ми зможемо охопити, утримати або залучити;
• Impact (вплив): наскільки реалізація гіпотези змінить кількісні показники: конверсію, дохід тощо;
• Confidence (впевненість): наскільки команда впевнена у доречності гіпотези (у відсотковому відношенні);
• Effort (зусилля): яку кількість ресурсів та часу потрібно буде витратити на перевірку гіпотези.

Ми можемо сформувати близько 50 гіпотез, і лише найбільш перспективні підуть у роботу. Щотижня у нас відбуваються дизайн-планування, де ми розподіляємо задачі та фіксуємо їх у team board від Jira.

90% задач дизайн-команда виконує у Figma — там ми можемо кооперуватися в режимі реального часу. Крім цього, у Figma імплементовано прототипування — коли у кілька кліків дизайнер може створити майже готовий продукт та віддати його на тестування команді. Для розробників є опція Inspect, завдяки якій вони відразу бачать, який вигляд матиме готовий продукт (всі елементи, відступи тощо). Розвиненою є і Figma-ком’юніті, там дизайнери діляться власними напрацюваннями: іконками, плагінами, дизайн-системами.

Коли у нас уже є інтерфейс у вигляді цифрового прототипу або готовий продукт, ми проводимо юзабіліті-тестування. Це потрібно, аби оцінити зручність та ефективність інтерфейсу для користувачів. На цьому етапі користуємось відкритою платформою User Testing, яка має свою базу тестувальників. Вони перевіряють продукт за кількісними і якісними показниками, а ми збираємо та аналізуємо їхній фідбек.

Для відслідковування взаємодії користувача з продуктом послуговуємося інструментом Value Proposition Canvas — системою, яка описує весь цикл взаємодії. Вона містить три категорії: jobs — всі дії, які робить юзер, pains — проблеми, які вирішує продукт, gains — вигоди, які отримує юзер.

What is the Value Prosotioin Canvas?

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

Чим надихатися? 7 трендів у дизайні застосунків

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

Водночас важливо пам’ятати, що тренди — річ швидкоплинна, тож ми намагаємось утримувати баланс між сучасними тенденціями дизайну і реальними потребами наших користувачів. Є декілька трендів, які останнім часом увійшли в моду та вже встигли закріпилися в індустрії:

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

• Неоморфізм. М’які, плавні лінії, градієнти та відтінки, що разом роблять інтерфейс близьким до тривимірного, наче з пластика;

Фото: Dribble

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

ASO зображення для додатку Ceaner Guru (скріни, що відображаються в App Store)

Чек-лист ресурсів для ідей

Щоб не пропустити останні креативні дизайни в індустрії, раджу слідкувати за такими ресурсами:

• Awwwards — тут сайти конкурують за звання найкращого дизайну. Ви можете підтримувати проєкти, віддавати за них свій голос або брати участь у змаганні самому. Корисно переглянути список номінантів, який можна розсортувати за категоріями, тегам або кольором;
• Dribbble — онлайн-сервіс, який об’єднує графічних дизайнерів, веб-дизайнерів, ілюстраторів та 3D-візуалізаторів. Автори публікують свої роботи, оцінюють проєкти інших учасників спільноти та можуть стати більш знаними в спільноті;
• Mobbin — ретельно підібрана колекція нових шаблонів мобільного дизайну з додатків, яка відображає найкращі рішення на ринку. На платформі зібрані скріншоти додатків кожного кроку та екрану користувача. Вивчаючи подібні матеріали, можна більше дізнаватися про поведінку юзерів у додатках. На сьогоднішній день на сайті зібрано 170 застосунків і 10.000 скриншотів;
• Корисною є платформа Growth Design, де зібрані кейси топових компаній: AirBnb, Atlassian та інших.