Блог

Новый сайт Планеты АВТО

Задача: Выйти на дополнительную аудиторию клиентов. Для этого сделать сайт продажи автотоваров, шин и дисков planetavto.ru



Помимо отсутствия регистрации и других барьеров для пользователей, сайт внимательно помогает разобраться в сервисном обслуживании автомобилей. Например, для этого специальным образом спроектирован «гараж». Он умеет подсказывать какие товары и услуги наиболее полезны для посетителя сайта. Умеет напоминать о сервисных регламентах и следить за прохождением ТО. При этом совсем не обязательно добавлять автомобиль, заполнять кучу скучных анкет. Маркетинговые инструменты тоже не остались без внимания. Например, привычные всем баннеры легко меняют свои пропорции и подстраиваться под пользователя, а в кабинете живёт много полезных штуковин


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

Еще страничка умеет группировать товары по дате получения и наличию. Обучена подбирать аналог товара, если его по какой-то причине не будет в нужном покупателю магазине и аккуратно указывать на такую возможность.
Регистрироваться не нужно, весь функционал сайта доступен сразу, а при оформлении покупки данные пользователя заполняются автоматически.

Так планета выглядит в телефончике

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



Про кухню

До начала разработки нового сайта была накоплена определенная экспертиза и была готова бизнес инфраструктура. Это позволило сократить время на предпроектный анализ. Одним из существенных факторов в решении создать новый магазин был накопленный опыт и его метрики.

Эскизы и проверка идей
Начал я, понятное дело, с аналитики и системомании

Вместе с продуктоунером обсудили общую архитектуру, основные принципы, механики и инфраструктуру. Синхронизировали идеи с бизнесом, договорились о регламенте встреч. Началось проектирование. Попути наметили состав ЭмВиПи версии.
Вот несколько проволочных идей основных страничек

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

Серия интервью и исследований
Собрав тестовые прототипы в перевязанный ХТМЛ, я отправился проводить интервью покупателей в магазинах Планеты АВТО. Опросил чуть больше 100 респондетнов. Часть людей согласились ответить только на вопросы, остальные опробовали прототип с тестовым сценарием, с интересом комментировали, отвечали на вопросы и задавали их сами.

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

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



Пример стартового экрана одного из прототипов для исследования


Версия 1.0
Прежде чем рассказать о минимальном жизнеспособном функционале, стоит отметить важность обозначения сроков запуска этих функций сайта. Мы не сразу смогли конструктивно сформулировать понимание сроков ЭмВиПи версии. В какой-то момент помог один из участников команды со стороны бизнеса. Нужно было просто вспомнить про полезное действие и просчитать срок запуска, исходя из его максимального коэффициента.

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

Если говорить только про проектирование получится такая картинка

Растянув инфографику на плоскости, можно получить штуку, привычную многим

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

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

Небольшой отрывок из гайда про кнопки, комбоселект, техстиль и редактуру, сущности скушек и части пиктограмм.

Всё собрано в аккуратную библиотеку компонентов, легко использовать, развивать и масштабировать в команде.


Версия 1.1
Адаптивная верстка, подборщик товаров и много всего про последовательное увеличение функциональности сайта

Это маленький кусочек

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

Untitled Document

Эдинбург и Шотландия

Эдинбург и его обитаемый мост

Крыши домов в центральной части города

Фотокарточки с улиц Лонмаркет и Каслхилл

В городе проходит кинофестиваль. В это время много туристов и вообще всего про кино и искусство. Участники фестиваля рассказывают о фильмах и зазывают на просмотр всевозможными способами

Если спуститься к центральному вокзалу по Уорристонс Клоуз, откроется такой вид

А ведёт к нему знаменитая лестница

Чтобы увидеть Эдинбург Касл и скалу на которой он стоит, нужно пройти ещё немного, к национальной галереи Шотландии

Чернобелый вариант

Отдаляясь от центра в сторону парка Холируд, взгляд зацепится за здание парламента Шотландии

Проект здания задумывался как символ прогрессивного взгляда, свободы, близости и сомасштабности с каждым человеком. Период строительства с 1999 по 2004 год

Эдинбург расположен на берегу Ферт-оф-Форта — залива Северного моря. Море врезается в земли округов Лотиан, Фолкерк и Сити-оф-Эдинбург на  77 километров.

Вид с катера на один из первых в мире мостов консольного типа

Вблизи южного берега залива

Если сделать черно-белую фотографию одиного из двух маяков Форта, получится кадр исторической хроники

Парочка, возмущенная нашим приближением

Закат и ещё один мост через залив

Следующая остановка севернее от берегов реки Форт, вблизи Стерлинга и монумента Уильяму Уоллесу.
Сам монумент с двуручный мечом внутри башни выглядит так

Территория Стерлингского университета, сам Стерлинг и окрестности города

В университет можно получить научную степень, например, по футболу.

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

Невероятно кайфовая дорога к озеру Лох-Несс

Само озеро Несс

Фьорд Лох-Дуйх и замок Эйлен-Донан

Замок снимали в нескольких фильмах, «Горец», Джеймс Бонд — «И целого мира мало». Но крутость замка в другом, внутри него музей и там кайф (фоток не сделал).

И наконец несколько фотокарточек с острова Скай

Если сфоткать с кривыми настройками баланса белого, получится так

Я и аил оф Скай

Untitled Document

Цены

Задача: сделать таблицу удобную для чтения


Решение

19 января   Мерката
Untitled Document

Знания через игры



Я катаюсь на лыжах и доске уже много лет. Падений, за это время, было достаточное количество. Но опыт перелома костей получил впервые.
Как-то, ещё в школьном возрасте, катаясь ночью, на всей скорости налетел лицом на трос подъемника. Трос с лязгом и характерным костным звуком прокатил по черепу и слегка оттянулся как резинка, вобрав в себя часть энергии от моей скорости. Спустя мгновение, трос подкинул меня в воздух, выстрельнув как рогатка. В полете я совершил двойной задний бэкфлип и упал в глубокий снег.
Только спустя несколько месяцев я осознал, на сколько встреча встреча с тросом была лишена печальных последствий для глаз и остальных органов головы.
Примечательно, что во всех, даже самых эпичных и серьезных падениях до этого я получал новый опыт. В этот раз я сломал себе два ребра, но в момент хруста костей внутри тела я вдруг понял, что подобное я уже переживал. Дело в том, что упал я обычно, боль и дискомфорт от удара были вполне привычные. Но вот звук я распознал сразу. Благодаря серии игр Мортал Комбат, я смог за доли секунды понять что именно произошло и не терять драгоценное время.
Каталку этого дня и много другого можно посмотреть, подписавшись на мой Ютуб

Не теряйте концентрацию в горах, играйте только в хорошие игры.

Untitled Document

Компьютерщик

Заменяю, починяю. Вжух…
Задача: заменить сдохший аккумулятор

Заводская батарея стала экстремально быстро разряжаться и появился странный запах из корпуса. Но при этом МакОС по прежнему считала, что с аккумулятором всё ОК. Только в последние несколько дней появилось сообщение «Требует обслуживания».

Процесс

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

Бюджет: 3500 ₽ + 1 час работы

13 декабря   apple   mackbook   аккумулятор
Untitled Document

Церматт

Подьем 1600→3920, спуск 3920→1860

Спуск с ледника

9 декабря   Церматт   Швейцария
Untitled Document

Операционка от АйБиЭм

Сегодня один разработчик рассказал мне, что все версии Виндоуса его бесят своим неудобством. Даже последняя, десятка.

Первый его компьютер работал на операционке OC/2 от АйБиЭм. Было легко и понятно пользоваться компьютером под управлением этой оси. Мне стало любопытно, полез почитать об истории создания этой штуки.
Первая публичная верст вышла почти на 4 года позднее чем первая макинтош от эплов.
Сравните на сколько похожи принципы, использованные при проектировании интерфейсов.
Первая версия МакОС (24 янв 1984) и первая версия ОС/2 (дек 1987)

Был рад узнать об ОС/2 АйБиЭма. Всегда интересно слышать истории и отзывы, что принципы человекоориенторанного интерфейса вызывают комфорт у пользователей, а иногда и теплые воспоминания :-)
Жаль, что у ребят не хватило запала развивать операционку дальше.

2019   IBM   Microsoft   OS   История
Untitled Document

Ещё одна проверка

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

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

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

Стартовый экран выглядит так


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

Альтернативный вид стартового экрана
В сценарии со сканером всё достаточно просто и быстро. Интересно посмотреть как можно облегчить путь пользователям в случае отсутствия информации, нужной системе, для безошибочного платежа.

Например, можно так


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

Таким образом можно собрать данные из разных организаций, добавить их к оплате и провести единым платежом. В отчете, который дублируется на эл. почту, будет указано отдельными этажами подитог по каждой организации + общая сумма транзакции.
А если совсем не хочется тратить время на эти операции, то можно настроить автоплатеж или воспользоваться этой функцией в истории последних операций.

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

Есть ещё много «узких» мест и сценариев, решение которых нужно показывать на дополнительных картинках.
Но не смотря на это, уже можно запускать тестирование прототипа и собирать комментарии пользователей.

Ещё
Прочитать про концепт кассы для проверки множества разных идей.


Untitled Document

Рочестер

В город приехал из Нью-Йорка, использовал Грейхаунд. Это такая хитрая и дешёвая сеть междугородних автобусов в США. В Рочестере был пять дней и успел узнать город глазами студента местного колледжа.
Здание библиотеки Раш Рес

Обьем здания, всё той же библиотеки, с другой стороны

Это разные здания студенческого кампуса, в переводе, общаги.

Символика студенческого сообщества Сигма Чи

Дорожка из песка и гранитной крошки

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

Недавно тут проходил концерт памят Виктора Цоя и группы КИНО. Это было написано в одном из объявлений. Американские студенты пели их песни. Я изрядно офигел!

Первое, что я почувствовал — парк. А внутри этой зелени разбросаны здания университета. От этого атмосфера внутри какая-то невероятная, ничего не давит и не отвлекает. Ноль шума, нет ни визуального, ни акустического. Человекоориентированная среда.

Ещё учебный корпус университета

Многофункциональный зал

А это скульптура первого президента университета, Мартина Бремера Андерсена

Оказалось, что все или почти все исследования студенты проводят вне отрыва от современной практики. Студенты медики, например, закреплены в местных лабораториях при больницах. И все свои эксперименты обязаны проводить там. Это очень круто.

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

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

Дорожка к кампусам, проходящая вдоль реки Джинеси

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

Разные скульптурные инсталляции вокруг него

И ещё немного города

Untitled Document

Проверка

Для тестов, проведения интервью и проверки гипотез, собрал макеты кассы на нативных компонентах двух мобильных операционок

Это не первая попытка провести подобное тестирование. Ранее я делал концепт кассы для проверки множества разных идей.


Untitled Document

Батл в Контуре

Так было в Контуре, на дизайн апдейте 1.2 (третьем по счету)

Ребята рассказали про то как уже почти 9 лет пилят иконочный шрифт и очень хотят перестать это делать

Все присутствующие узнали кто такой Михаил Череда и какие проекты он дизайнит для Екатеринбурга

Показали Льва Либермана, а Лев показал других ребят, каллиграфов и леттеристов

Ещё, Контуровцы решили разнообразить митапчик, и провели Батл.
Дизайнерам, Максиму (Джетстаил) и Саше (Контур) дали задание — задизайнить этикетку для вина. Раздали библиотеку элементов в Фигме и дали попробовать вино.
Такие этикетки получились в результате

Пока ребята рисовали, все остальные поедали пиццулю

Остальные фото в альбоме Контура

Приходите на следующий дизайн апдейт, предлагайте свои темы и участвуйте в батлах.

Untitled Document

Академический рисунок и живопись

Откопал свои работы за 2003→2007

Графит (лето 2003)

В качестве моделей были люди, но не сразу. Обучение построено так, что сначала тебе нужно понять всякое про то как нужно рисовать на геометрических примитивах и скелете человека. Ты набиваешь руку на геометрических объектах, примитивной геометрии строения человеческого тела.
Например такой

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

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

Немного рисунков

Уголь (зима 2005)
Соус (зима 2005)
Графит (зима 2005)
Акварель (зима 2005)
Акварель (осень 2006)

А так проходила оценка проделанной работы

Untitled Document
Ранее Ctrl + ↓