Scanner Pro з'явився в App Store ще 2009 року — і за цей час із простого сканера перетворився на справді складний професійний інструмент, у якому функцій більше, ніж більшість користувачів будь-коли спробує. Така зрілість — це сила, але команді хотілося, щоб серйозний професійний інструмент водночас залишався привітним і людяним.
Масштабний редизайн Scanner Pro мав якраз скоротити цю дистанцію.
Одне з найтихіших рішень редизайну виявилося одним із найпомітніших: Scanny — маленький синій кубик зі світла, який тепер живе у світі Scanner Pro.
Ми поговорили з Галиною Волошаненко, дизайн-лідкою Readdle, про те, як з'явився Scanny.
Ближче до користувачів
Ідея Scanny виросла з редизайну природно. «Головна мета була підвищити впізнаваність бренду й посилити емоційний зв'язок із користувачем під час глобального редизайну, — розповідає Галина Волошаненко. — Ми хотіли оновити спілкування з нашими користувачами. Через маскота набагато легше доносити маркетингові меседжі й залучати нову аудиторію».
Вік Scanner Pro лише ускладнював завдання.
За майже два десятиліття застосунок давно переріс просте сканування й став насиченим функціями професійним інструментом: потужним, але не завжди таким, що одразу викликає симпатію. «Ми хотіли, щоб цей складний професійний продукт було легше сприймати, щоб він став емоційнішим і людянішим, — пояснює вона. — Саме з цього бажання почався і редизайн, і пошук способу додати застосунку емоцій. Ми зрозуміли, що тут допоможе маскот. Він не переосмислює сам продукт, але робить його значно привітнішим».
Команда сформулювала завдання дуже конкретно: зробити інтерфейс зрозумілішим із перших хвилин, а кожен новий реліз — схожим на те, ніби вам усе показують і пояснюють, а не просто вручають список змін.
Як з'явився Scanny
До Scanny команда дійшла не одразу. «Загалом ми створили чотири повноцінні концепції, — каже Галина Волошаненко. — Зупинилися на четвертій, бо вона найкраще передавала суть нашої технології й при цьому не перетягувала на себе зайвої уваги. Цей напрям ідеально пасував продукту: чистий, сучасний і мінімалістичний».
Ще до появи цих концепцій команда подивилася довкола. «Ми дослідили ринок: подивилися на сову Duolingo, кота monobank, персонажів Headspace і Gentle Streak», — розповідає вона. Команда хотіла зрозуміти, які ролі може виконувати маскот, перш ніж вирішити, яка з них пасує Scanner Pro. «Нам було цікаво проаналізувати, де саме використовують маскота, яку роль він відіграє в продукті та в яких каналах комунікації живе.
У багатьох із цих застосунків увесь брендинг побудовано навколо персонажа. Ми ж шукали власний ідеальний баланс, де маскот грає допоміжну роль і лише делікатно доповнює серйозний інтерфейс нашого інструмента».
Хто такий Scanny
Попросіть Галину Волошаненко описати Scanny кількома словами — і вона обере спокій, а не милоту: «Scanny — це про спокій, надійність, сучасність і м'яку підтримку». Кожне візуальне рішення мало бути привабливим і водночас передавати одну з цих рис.
Форму заокругленого кубика обрали, щоб він здавався доступнішим. «Щоб зробити строгу технологію людянішою, ми обрали мінімалістичну форму, але відмовилися від гострих кутів, — каже вона. — Ці м'які заокруглення перетворюють звичайний куб на привітного й корисного помічника, а ще візуально перегукуються з формою іконок на головному екрані iPhone». Глибокий синій колір, навпаки, тримає Scanny в межах серйозного інструмента. «Щоб зберегти відчуття серйозного професійного інструмента, ми використали глибокий синій. Це пряме продовження нашого візуального стилю, який працює на довіру користувачів».
Єдиний справжній засіб вираження для Scanny — світло. «Його головний інструмент взаємодії — промінь світла, — пояснює Галина Волошаненко. — З одного боку, це пряма й зрозуміла метафора самого процесу сканування. З іншого — саме цим м'яким сяйвом він показує, що дбає про вас: ніби каже, що стежить за вашими документами й допомагає спростити щоденну роботу».
Навіть його передісторія пов'язана з продуктом. «Сканування й покращення зображення відбуваються крок за кроком, піксель за пікселем, — каже вона. — Тому Scanny спершу був звичайним пласким пікселем, який згодом ожив і перетворився на об'ємний динамічний кубик».
Те, від чого команда відмовилася, важило не менше за те, що вона залишила.
Аудиторія Scanner Pro — переважно дорослі професіонали віком від 30 років, і це від самого початку задало чіткі рамки. «Ми намагалися уникати надмірної дитячості, мультяшності й перебільшеної експресії, — каже Галина Волошаненко. — Щоб не перетворювати роботу з документами на розвагу й зберегти довіру до серйозного інструмента, ми відмовилися від класичної антропоморфності: рук, ніг, складної міміки».
Від брейншторму Crazy 8s до Figma і Rive
Шлях до фінального кубика пролягав через три окремі етапи.
Спершу було дослідження: команда з'ясувала, де маскотів використовують конкуренти та в яких точках контакту самого Scanner Pro маскот міг би з'явитися. Це визначило технічні обмеження й критерії для подальших пошуків.
Далі був брейншторм: команда зібрала власні асоціації зі скануванням, провела сесію Crazy 8s, щоб швидко згенерувати ідеї, і оцінила результати за критеріями на кшталт зв'язку з брендом, придатності для інтерфейсу, потенціалу для анімації та гнучкості для рекламних кампаній. Після цього фільтра залишилося три напрями.
Фінальний етап узяла на себе дизайн-команда.
«Наша маркетингова дизайнерка Аня зробила неймовірну роботу, — згадує Галина Волошаненко. — Вона взяла кожен із трьох обраних напрямів, створила концепцію й представила її команді.
Під час презентацій ми разом обговорювали кожен варіант, розбирали всі плюси й мінуси». Замість того щоб одразу визначити переможця, четверту концепцію зібрали з найвдаліших рішень усіх трьох. «Різких поворотів не було — це радше була еволюція, — каже вона. — Пропрацювавши перші три концепції, ми зрозуміли, що жодна з них окремо не ідеальна. Тож просто взяли найвдаліші рішення з усіх трьох ітерацій і поєднали їх».
За її словами, найскладніше рішення стосувалося не так вибору концепції, як того, скільки деталей має бути в Scanny. «Ми шукали тонкий баланс: створити максимально просту форму, яку легко анімувати й яка не перевантажить серйозний інтерфейс, але водночас матиме власний характер і не виглядатиме нудно».
Перші ескізи малювали від руки під час сесії Crazy 8s, а все подальше перейшло у Figma, де для швидких пошуків допомагав Procreate.
Головне обмеження з'явилося, коли до роботи долучилася моушн-команда: Scanny створюють, щоб згодом він працював як інтерактивна Rive-анімація в застосунку й на сайті, а Rive може рендерити ефекти на кшталт градієнтів і складного сяйва, які не завжди коректно переносяться з макета у Figma. «Головне обмеження полягало в тому, щоб використовувати у Figma лише ті ефекти й візуальні рішення, які моушн-дизайнер міг би на 100% точно відтворити в анімації, — щоб персонаж скрізь виглядав однаково», — каже Галина Волошаненко.
Тож довелося тестувати й допрацьовувати такі деталі, як сяйво променя та м'які переходи форми, щоб вони стабільно виглядали однаково — зокрема і в світлому, і в темному режимах інтерфейсу.
Справжній кросфункціональний проєкт
Scanny створювала не лише дизайн-команда. «У нас була кросфункціональна команда: керівник продукту, продакт-менеджери, продуктові дизайнери і я як дизайн-лідка, — розповідає Галина Волошаненко. — Ми також залучили креативних дизайнерів компанії та незалежного консультанта, щоб отримати свіжий погляд ззовні».
Попри те що результат був важливим для багатьох людей, процес минув напрочуд без конфліктів. «Серйозних чи гострих суперечок не було, — зазначає вона. — Оскільки ми з самого початку чітко визначили обмеження й домовилися про метафори, команда мала спільне бачення. Внутрішній фідбек радше допомагав шліфувати деталі, ніж змінювати загальний курс».
Перш ніж остаточно визначити емоційний діапазон Scanny, команда «вивела його в люди» й протестувала на реальних користувачах — на справжніх скриншотах для App Store і маркетингових креативах. «Ми тестували маскота на скриншотах для App Store і маркетингових креативах, — каже Галина Волошаненко. — Тести показали позитивний результат і підтвердили нашу гіпотезу. Лише після цього ми перейшли до фінального доопрацювання його емоцій і додаткових станів».
Ім'я — і де він з'явиться першим
Над ім'ям навіть не довелося довго думати. «Ім'я Scanny походить від слова scan, але звучить м'яко й дружньо, підкреслюючи його роль привітного помічника», — каже Галина Волошаненко.
Усередині компанії реакція була захопленою. «Команда в захваті, — каже вона. — Scanny чудово підкреслює наше оновлене бачення та інтерфейс. Він ідеально врівноважує продукт: Scanner Pro залишається професійним інструментом, але тепер здається значно привітнішим і людянішим».
Readdle запроваджує його поступово, крок за кроком. «Ми обрали стратегію поступового впровадження, щоб не перевантажувати користувачів під час редизайну», — каже Галина Волошаненко. Спершу Scanny з'явиться на сайті Scanner Pro і на скриншотах в App Store, а потім перейде в сам продукт — почне з пейволів, а далі буде більше. Дещо команда поки тримає в секреті: «Ми ще не розкриваємо всіх деталей, бо хочемо приємно здивувати наших користувачів».
Озираючись назад, Галина Волошаненко найбільше пишається тим, чого команда вирішила не робити. «Найбільше пишаюся тим, що ми не пішли шляхом класичних маскотів з обличчям і мімікою, а змогли передати характер виключно через чисту форму 3D-кубика та динаміку світла, — каже вона. — Scanny вийшов саме таким, як ми задумували: делікатним. Він не відволікає від роботи з документами, а дуже органічно доповнює інтерфейс».
Якби можна було щось переробити, це було б не дизайнерське рішення. «Мабуть, я порадила б собі в минулому: помнож початкову оцінку часу щонайменше на три, — каже вона. — На старті здавалося, що створити персонажа — доволі простий процес, який ми легко закриємо. Але, як це часто буває в дизайні, зробити щось справді простим і зрозумілим — найскладніше».
Те, що вона хоче, щоб відчули люди, теж зрештою просто. «Я сподіваюся, що, побачивши Scanny в застосунку, у рекламі чи на сайті, користувачі впізнаватимуть у ньому саму технологію сканування: розумну, швидку й зрозумілу, — каже вона. — Ми хочемо, щоб плавні рухи маскота і його м'яке сяйво зробили взаємодію із застосунком живішою під час роботи з документами».
Scanny вже можна побачити на сайті Scanner Pro і на скриншотах в App Store, а незабаром він з'явиться й у самому застосунку. Стежте за новинами: він уже на підході.
