Задача
Спроектировать двухэтажный загородный дом для проживания семьи с двумя взрослыми детьми. На участке в 800 кв.м. уже были построены баня, гараж и старый деревянный дом, который сразу планировалось снести. Под новую застройку был выделен участок площадью не более 80 кв.м. на месте старого дома. Кроме того, хозяева очень дорожили самостоятельно посаженными деревьями, которые нужно было сохранить. Стилевое направление заказчики выбрали в духе малоэтажной архитектуры западной Европы. Каркас дома планировался монолитным, возведенным на заливном фундаменте, с наружной отделкой из клинкерного кирпича. Крыша двускатная и остроугольная. Особенным требованием заказчиков была отапливаемая оранжерея.

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

На втором этаже запланирована хозяйская часть: 3 спальни с гардеробными, ванная комната и постирочная.
Если посмотреть внимательно на план, можно заметить, что дом состоит из двух секций. Это обусловлено тем, что в строительстве частных домов оптимальный пролёт между несущими стенами составляет 5-7 м (а длина нашего дома — 13 м). Большее расстояние возможно только при монолитно-каркасном строительстве на монолитной плите фундамента, что значительно увеличивает бюджет, а также усложняет устройство крыши. Крыш, кстати, по этой причине у дома тоже две.

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

Проработка деталей и инженерные расчеты

Строительство

Архитектор и дизайнер: Юлия Горнова
Архитектор: Александр Филиппов
Инженер: Денис Попов

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

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

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

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

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

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

Про кухню

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Версия 1.2
В этой версии больше товаров сразу «на полке», открылся большой раздел с запчастями.

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

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