Maya: интуитивный браузер на базе ИИ

Контекст

Maya — браузер с ИИ‑ассистентом, который собирает почту, заметки, напоминания, файлы и задачи в одном окне. Идея в том, чтобы человек начинал не с приложения, а с намерения: говорит или пишет, чего хочет добиться, а браузер сам подбирает нужный интерфейс.

Это был стартап без выстроенных процессов. Заказчик — CEO, он же исполнял роль продакт-оунера; рядом — команда из десяти разработчиков. Первые полгода я работала единственным дизайнером, последние три месяца вела команду из одного-двух дизайнеров.

9: месяцев работы над продуктом
10+: плагинов спроектировано
10: разработчиков в команде

Сложности

Видение продукта менялось на ходу: сервис → браузер → операционная система → снова браузер → нишевый сервис → снова браузер. Каждый поворот менял то, что считалось главным экраном.
Идей было много, а описанных сценариев — ни одного: поток идей нужно было превращать в понятные флоу, по которым можно разрабатывать.
Процесса дизайна и передачи в разработку не существовало — его предстояло построить параллельно с самим продуктом.
ИИ‑интерфейсы на рынке плохо считывали намерение и отвечали неполно или мимо — пользователи заранее не доверяли таким инструментам.

Цели

Создать персональный ИИ‑инструмент «всё в одном», который повышает продуктивность, объединяя несколько функций на одной платформе.

Свести почту, напоминания и заметки в решение, которое строится вокруг намерения, а не вокруг приложений.

Давать умные подсказки с учётом контекста и того, чего человек хочет добиться.

Моя роль

UX и UI сложного ИИ‑продукта — с нуля
Превращение хаоса идей в понятные пользовательские сценарии
Визуальный язык и брендинг
Процесс дизайна и передача макетов в разработку
Дизайн-система и Storybook
Руководство небольшой командой дизайнеров и фронтенд-разработчиков

Процесс

Интервью со стейкхолдерами: бизнес-цели, ожидания, метрики успеха
Исследование: домен, конкуренты, боли пользователей, прото-персоны
Сценарии и флоу: боли пользователей и цели бизнеса — в понятные задачи
Архитектура и навигация: аккаунты, пространства, намерения
Плагины, макеты, дизайн-система и Storybook
Коридорные тесты и итерации
Визуальный язык, бренд и сайт

С чего я начала

Интервью со стейкхолдерами

Я начала с разговоров с основателем: нужно было зафиксировать цели бизнеса, сверить ожидания и договориться, что считать успехом. Из этих интервью сложилась рамка продукта.

«Наша миссия — помогать людям достигать своих целей и намерений самым эффективным способом».

«Это как личный секретарь или ассистент руководителя, только без его недостатков. Интерфейс всегда уточнит и проведёт человека к цели».

«Нужно уйти от идеи статичных приложений к динамичным интерфейсам, которые показывают нужное в нужный момент».

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

Исследование домена

Параллельно я изучила рынок по вторичным источникам: тренды, отзывы пользователей, возможности ИИ‑технологий. Из анализа того, как люди пользуются ИИ‑инструментами и где спотыкаются об интеграции, сложился список болей.

Падает продуктивность. ИИ‑инструменты плохо встроены в работу: процессы дробятся, а переключение между приложениями сбивает фокус.
Не хватает настройки. Инструмент трудно подстроить под свой процесс — и его возможности используются наполовину.
Неточные ответы. Чат‑бот ошибается, и это рождает либо ложное доверие, либо ошибки в задачах.
Устаревшая информация. Бесплатные версии обновляются редко — на их ответы нельзя опираться в решениях.
Приватность и безопасность. В финансах и медицине слабая защита данных мешает внедрять такие инструменты всерьёз.

Конкурентный анализ

Вместе с дизайн-командой я разобрала конкурентов — Fireflies, Arc Browser, Waldo — и нишевые ИИ‑продукты вроде тревел-ассистентов. Так стало видно, в чём они сильны, где у них пробелы и чем Maya может отличаться.

Таблица сравнения конкурентов: по строкам продукты, по столбцам стикеры с сильными сторонами, пробелами и возможностями — Сравнение конкурентов: сильные стороны, пробелы и возможности — отдельными столбцами.

Персоны и формулировка проблемы

Для одного нишевого сценария — планирования путешествий — я собрала прото-персоны по отзывам на похожие сервисы: креативная многозадачница Эмили, ориентированный на результат руководитель Джон и Линда, которой нужно совмещать работу, семью и личные проекты. Для каждой сформулирована проблема: Эмили не находит единой платформы под свой творческий процесс, Джон теряет время, жонглируя несвязанными приложениями для общения, расписания и проектов.

Карточки двух прото-персон, Эмили и Джона, с целями, болями и формулировкой проблемы под каждой — Прото-персоны для сценария планирования путешествий и формулировка проблемы для каждой.

Сценарии и флоу

Боли пользователей и цели бизнеса я перевела в сценарии: занятой профессионал с несколькими почтовыми ящиками, менеджер проекта, которому важны сроки и риски, тимлид, исследователь, менеджер по продажам, удалённый сотрудник. Они помогли расставить приоритеты и объяснять решения через задачи реальных людей.

Формальных артефактов вроде карты user story мы не вели — стартапу было не до них. Большая часть этой работы жила прямо в задачах и документации.

Архитектура и навигация

Самое сложное в структуре — аккаунты. У человека их несколько, и все они сходятся в одном аккаунте Maya. Дальше идут файлы, чаты и пространства; внутри пространства — история, закладки и группы намерений; намерение разворачивается во флоу, а флоу состоит из блоков.

Схема архитектуры: аккаунты сходятся в аккаунт Maya, ниже файлы, чаты и пространства, затем группы намерений, намерения, флоу и блоки — От аккаунтов к блокам: иерархия, на которой держится вся навигация.

Привычную вкладку заменило намерение (intent): его можно собрать в группу, перенести в другое пространство, закрепить или добавить в закладки. Навигацию я спроектировала в двух вариантах — горизонтальном, похожем на обычный браузер, и вертикальном, с деревом папок и намерений. В адресной строке вместо «введите адрес» стоит вопрос «Чего вы хотите добиться?», рядом — голосовой ввод и умные подсказки.

Структуру я согласовывала и проверяла вместе с командой: человек должен переходить между плагинами и разделами аккаунта, не задумываясь, где он находится.

Вертикальная панель навигации с деревом папок и намерений и два контекстных меню с действиями над намерением — Вертикальная навигация и действия над намерением: сгруппировать, перенести в другое пространство, закрепить.

Горизонтальная строка вкладок с адресной строкой, в которой написано «What would you like to accomplish?» — Горизонтальный вариант: адресная строка спрашивает, чего вы хотите добиться.

Плагины

Я спроектировала больше десяти плагинов: почту, календарь, заметки, напоминания, файлы, контакты, новости, рецепты и другие. Каждый открывается рядом с остальными в одном окне, а не уводит на отдельную страницу.

Ответ ИИ — тоже не полотно текста, а интерактивный блок. На запрос о перелёте Maya показывает карточки рейсов с кнопкой выбора и уточняет, сколько человек летит, — готовыми вариантами, а не открытым вопросом.

Плагин календаря с расписанием дня и блок ответа с рейсами Вроцлав — Париж, под ним вопрос о числе путешественников с готовыми вариантами — Календарь и ответ ИИ в виде интерактивного блока: рейсы можно выбрать, а на уточняющий вопрос — ответить одним нажатием.

Макеты

Ключевые сценарии и сложные флоу я довела до детальных макетов. Они решали три задачи сразу: быстро проверить идею, показать её основателю и дать разработчикам однозначный ориентир.

Два окна браузера в тёмной и светлой теме: в каждом несколько плагинов открыты рядом — напоминания, контакты, меню на неделю, список покупок, календарь — Несколько плагинов в одном окне — в тёмной и светлой теме.

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

Мобильную версию делал другой дизайнер; я задавала направление, ревьюила работу и следила, чтобы она оставалась единым целым с десктопом, а где нужно — дорабатывала ключевые взаимодействия.

Экраны мобильной версии: главный экран, пространства, список намерений, новости — Мобильная версия повторяет логику десктопа: те же намерения, пространства и блоки.

Библиотека компонентов и Storybook

Дизайн-систему никто не заказывал — я настояла на ней сама: без неё продукт, который пересобирается при каждой смене видения, разъезжался бы на глазах.

Я собрала библиотеку компонентов для светлой и тёмной темы с чёткими спецификациями, а затем вела двух фронтенд-разработчиков через перенос в Storybook: ставила задачи, проверяла результат, следила за обновлениями. Разработка пошла быстрее, а интерфейс остался цельным.

Библиотека компонентов: кнопки, уведомления, календарь и переключатели в светлой и тёмной теме — Одни и те же компоненты в светлой и тёмной теме.

Тестирование

Тесты были быстрыми и неформальными — в основном коридорными. Я просила коллег, в том числе не из дизайна (например, HR), решить в продукте реальную задачу — спланировать корпоративное мероприятие. Так нашлись проблемы в ответах ИИ и в навигации.

«Это ровно то, что было мне нужно два месяца назад, когда я планировала корпоратив!»

«Разделение экрана — спасение. Теперь я работаю с несколькими документами сразу и не теряю фокус».

«Инструмент предлагает то, о чём я бы сама не подумала, — это экономит время и упрощает работу».

Чего мы не ожидали

Люди не понимали, что делать после того, как ИИ выдал блок с ответом. Кнопки Maya они просто не замечали — и застревали.

До

Следующие действия прятались за кнопкой Maya в углу блока. Я сделала их заметнее и добавила блок «Что дальше?» с вариантами. Его стали видеть — но отредактировать ответ или продолжить всё ещё было слишком трудозатратно.

После

Прямо в блоке появились редактирование на месте и поле «Задать уточняющий вопрос». Люди сразу поняли, что с ответом можно работать дальше.

Три версии блока ответа: в первой действия спрятаны за кнопкой Maya, во второй добавлен блок «Что дальше?», в третьей появились редактирование и поле уточняющего вопроса — Три шага итерации: от незаметной кнопки — к редактированию и уточняющему вопросу прямо в блоке.

Главный урок: заметность — ещё не удобство. Сделать действие видимым мало, если до него по‑прежнему далеко тянуться.

Визуальный язык, бренд и сайт

Я разработала весь визуальный язык Maya: цвета, типографику, UI‑паттерны и набор иллюстраций-иконок. Логотип начинал другой дизайнер; я довела его до финала и привела к общему стилю.

Сайт продукта я спроектировала с нуля — от вайрфреймов до финального визуала, вместе со всем содержанием. Задача была простой: чисто и современно, с понятной навигацией и рассказом о ключевых возможностях Maya.

Путь логотипа: от первых вариантов до финального.

Страницы сайта Maya: главная, блок с возможностями на тёмном фоне, страница команды — Сайт продукта: главная, возможности, команда.

Итог

За девять месяцев идея, которая несколько раз меняла форму, стала цельным продуктом: браузер с понятной архитектурой, десятком плагинов, двумя темами, дизайн-системой в Storybook, брендом и сайтом.

На тестах участники отмечали интуитивный интерфейс и ИИ‑функции — и то, что почта, документы и планы наконец оказались в одном месте.