Alto VisionAlto Vision

Appnow

У Appnow возникла потребность объединить информацию со всех лендингов и заодно рассказать о компании. Чтобы решить задачу, изучаем требования клиентов и статистику старого сайта и лендингов для Appbeauty и Appmenu.

01.png

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

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

Сначала делим их по типам бизнеса, потом — по категориям: некоторые возможности одинаковы и для ресторанов, и для салонов красоты.02.png

Делаем концепт главной. Здесь же придумываем упрощенную форму для создания приложения и избавляемся от .сom в логотипе.

03.png
Appnow:
Простовато, нужно что-нибудь поинтереснее
04.png

Находим идею с собирающимися частицами. Да, мы не хотели делать много анимации, но этот прием так нам нравится, что мы предлагаем его Appnow.

Appnow:
Точно, этот образ очень нам подходит! Давайте попробуем.

У раздела “О компании” много итераций. Сначала это полноценный блок с 3D-туром по офису, потом вместо тура предлагаем видео. Постепенно отказываемся и от него, и от карты с адресами. Чтобы оживить страницу, пробуем добавить персоналии.

05.png
Appnow:
Слушайте, давайте минимизируем контент о компании и оставим только самое главное.Без проблем, упрощаем. Ссылка на раздел переезжает в подвал, в нем остаются только текст, форма для соискателей и электронная почта отдела продаж.

Раздел “Как создать” должен быть необычным и развлекать пользователя: никому не интересно просто читать про шаги.
Одна из задач так и звучит:

Додумать “сумасшедший” концепт страницы “Как создать”
Дизайнер готовит бумажные концепции.07.pngПоказываем бумажные скетчи Appnow, они загораются сумасшедшим вариантом. Работаем с ним.

appnow kithen_08.png

Записываем скринкасты, шлифуем иконки и смартфон.


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



Дизайнер:
Сейчас движение точек подобно бактериям в микроскопе. Движения задумывались более плавными и размер\прозрачность точек разными.
Веб-технолог:
Ок, постараюсь сделать плавнее
Дизайнер:
И динамики нет. Частицы должны разгоняться и притягиваться, как магнитом

Всплывает еще одна проблема.
Веб-технолог:

Метафоры надо другие. Без четких контуров вообще непонятно, что показать хотели
2016-01-19_1312_360.png

Дизайнер: 09.png Веб-технолог:

Дизайнер:
Шикос

Дальше — правки, правки и еще раз правки. Веб-технолог разгребает баги, дизайнер предлагает все новые фичи.Наконец сайт выглядит одинаково на всех экранах, частицы летают, Appnow Phone улыбается, формы работают. Запускаем русскую версию, а через неделю — английскую.

результат
Проектом жили
  • ДизайнерАйрат Хасбиуллин
  • UXЭльвира Ахкямова
    Тимур Черкасов
  • МенеджерЭльвира Ахкямова
  • Арт-директораМарат Хабибуллин
    Артём Ермолаев
  • Веб-технологи Артур Валеев
    Константин Семёнов
Клиент о проекте
Алексей Шишков

Ребята действительно делают офигенный дизайн. UX потрясающий, креатив прёт изо всех щелей, картинки cочные, всё с анимацией, всё летает. Это как раз тот случай, когда дизайнер сам знает, чего хочет заказчик.

Отдельное спасибо за успешное выполнение требования «чуть более желтый и менее золотой»! Редкая компания, у которой качество, логика и результат всегда и намного превышает затраты!

Алексей Шишков
CEO at Appnow