• Веб
  • Р-банк
  • Создание промо-сайта мобильного приложения «Р-банк»

    Описание• Процесс

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

    Проникнувшись темой семейных финансовых отношений, делаем первый подход, основанный на ощущениях.

    Слишком абстрактно и дежурно. Менеджер расчехляет свой «Фотошоп» и бросается в бой, сам внося в промо-сайт побольше жизни.

    Чересчур фотографично, отдает клипартами и совсем не пахнет продуктом. Делаем следующий заход — уже вместе с внутренней страницей.

    Появляется идея поделить экран на три части и рассинхронизировать скролл. Набрасываем прототип.

    Арт-директору не нравится: очень сложно и скучно. Меняем руку, попросив добавить интереса и эмоции. На свет рождается недовольная девочка.

    Арт-директор: ОК.

    Заказчику кажется, что сайт получается интересным, но рассчитанным только на детей. Идем смотреть на семью и собирать будущий образ.

    Параллельно ведем поиски в области кредитных карт. Пробуем поддержать идею накопительных образов-контуров и сохранить недовольство девочки.

    Арт-директор: Мимо.

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

    Арт-директор: Уже лучше, но кажется сложноватым.

    Немного упрощаем детали и добавляем разделы про перевод денег и виртуальную карту.

    Арт-директор просит забыть про концепт и зайти с другой стороны.

    Понимаем, что сейчас сайту не хватает эмоций и ассоциаций с продуктом. Кажется, что нужно все строить на жизненных случаях.

    Проводим в студии опросы среди родителей и прикидываем иллюстрации семейного быта.

    Арт-директор: В ту сторону, но по дороге надо не потерять смысл.

    Выписываем все тезисы продукта и примеряем к ним сгенерированные идеи.

    Отсеиваем нежизнеспособные идеи в ходе мозговых штурмов.

    После набора пула идей формулируем концепцию.

    Собираем быстрый прототип для показа заказчику и готовим презентацию.

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

    Перегруппировываем смыслы и допиливаем идеи.

    Ищем визуальный язык. Возникает задача — не стать слишком детскими и не переиграть во взрослых. Должен соблюдаться некий баланс.

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

    Берем всех этих друзей и ведем их за собой дальше.

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

    Показываем заказчику.

    Заказчик принимает вариант и жаждет увидеть все с финальной графикой. Приходит время тотальной фотосессии героев. Расписываем сценарный план и проводим кастинг среди банковских сотрудников на роли членов семьи.

    Фотосессия занимает весь день. Между сотрудниками студии снует толпа детей, отцов и матерей.

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

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

    Каждая фотография проходит предварительную ретушь в соответствии с задачей сюжета.

    Примеряем результаты фотосессии к макетам и подгоняем детали.

    Понимаем, что с текстом нужно поработать тщательнее, так как у каждого экрана есть четкий и звучный посыл. Сильный неизбитый слог должен держать внимание и призывать крутить страницу дальше. Плотно садимся с редактором за макеты и думаем над смыслом.

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

    В ходе бесчисленных итераций с макетами и текстом страницы плавно эволюционируют от фотосессии к финальному свистку.

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

    Собираем прототип с финальной графикой и показываем заказчику.

    Заказчик все принимает. Отдаем на верстку и думаем над адаптацией сайта под мобильный браузер.

    На пути от создания концепции к финалу холст проекта покрывается множеством словесных перепалок.

    Дорабатываем детали сразу на живой верстке и отдаем все заказчику.