2 заметки с тегом

Сайт

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

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



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


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

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

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

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



Про кухню

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

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

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

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

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

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

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



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


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

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

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

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

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

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

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

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


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

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


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


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


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

Untitled Document

Корпоративный сайт и университет

Проект под тайной. Чтобы увидеть как работает сайт и университет, приходите работать Тритон.

Палитра всех элементов сайта продиктована фирменным стилем компании.

Задача
Задизайнить обновление корпоративного сайта.

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

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

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


Самое важное на главную страницу

Палитра всех элементов сайта продиктована фирменным стилем Компании

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


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

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

Картинки · Видео · Справочник
Так выглядит этажик с последним обновлением в альбомах, визуальным блоком контактов и мини опросом отдела персонала

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



Этаж университета
Учебные материалы наглядны и персонализированы для каждого пользователя

Важные документы и новости с полей
Здесь живут учебный план университета и наиболее востребованные документы. Левую часть экрана занимают последние деловые события компании.

Завершает композицию главной страницы функциональный подвал тремя разделами корпоративного чата

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



Контакты

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



База знаний
Книги, журналы, выдержки из научных статей и докладов. Инструкции, регламенты и учебный план сотрудников



Календарь событий



Несколько шаблонов для редакторов сайта



Станьте сотрудником компании, чтобы воспользоваться сервисом.

Untitled Document