Как обновляли дизайн интернет-магазина F.ua (экс-Fotos)

Краткое руководство о том, как аккуратно и результативно обновить дизайн большого интернет-магазина

В закладки

Перед тем, как взяться за реанимирование дизайна такого большого магазина, как F.ua, мы задались вопросом: а зачем вообще это делать? А то знаете, иногда бывает, что люди хотят обновить дизайн просто потому, что он “морально устарел” и иногда это получается обновление дизайна, ради дизайна.

Что говорят и делают клиенты F.ua?

Изначально мы решили выяснить, какую обратную связь дают клиенты F.ua. Что у них болит и на что они жалуются. Старт взяли со звонков операторам в call-centre, просмотрели большое количество отзывов на Facebook, сообщений в Direct и мессенджерах. Обратной связи было действительно достаточно, чтобы понять, что существует ряд вопросов, которые касаются не только оплаты, доставки и возврата. Радует, что современный покупатель с охотой делится впечатлениями об услугах или товарах на просторах всего интернета. Особенно, если ему что-то не нравится.

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

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

Нам понадобилось около 30 000 сессий (записей поведения людей), чтобы увидеть ярко выраженные закономерности. Места, где мы точно нашли ошибки и причины их возникновения.

​Примерно так выглядят записи сессий поведения людей. Тут мы смотрим, как люди выбирают 42” телевизор или решают закрыть вкладку и продолжать смотреть Лигу чемпионов с 11” монитора.) Саша Сергеев, CEO Sense Production, e-commerce agency

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

Sense Storm

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

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

В случае с F.ua, мы генерировали идеи с одной целью — упростить жизнь покупателю в интернете. А после, со всей своей подозрительностью отобрали лучшие решения по нашему мнению. Ну, дальше дело оставалось за малым — реализовать их 🙂

Так выглядит доска с выбранными идеями.​

Изменение дизайна всего двух страниц

В процессе редизайна мы затронули только каталог и карточку товара. Объясняю почему: статистика почти любого интернет-магазина показывает, что это две самые посещаемые страницы, тем более, у F.ua было много органического коммерческого трафика, который попадал как раз на эти страницы.

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

Нам пришлось продумать около 30 карточек товара для разных категорий и это только на момент готовности к тесту. 30, Карл!​
Мы проработали все состояния карточки, а их на F.ua, поверьте, ой как не мало.​

Для некоторых карточек сделали по несколько вариантов отображения, чтобы после А/Б теста проверить какая будет лучше.

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

Переключаем рубильник

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

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

Первые результаты

В первые несколько дней мы включили всего 10% трафика на новый дизайн.

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

Мы стали смелее и после нескольких дней наблюдений врубили еще 25% трафика. В результате, показатель отказов был стабильно ниже, а конверсия выше.

Для нас это был сигнал о том, что наши гипотезы сработали и можно двигаться дальше. Разделили трафик пополам 50% новый, 50% старый.

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

А еще обратные звонки

Также, мы обратили внимание, что на сайте увеличилось количество заявок на обратный звонок, сразу после запуска нового дизайна. Увеличение было около 10%, что тоже было приятно.)

Facepalm

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

После обновления, как-то подозрительно много людей пользовались формой восстановления пароля. Некоторые писали, что вроде бы сайт был вообще без пароля.Мы естественно все перепроверили, было даже предположение, что может они сайт F.ua перепутали с каким-то другим, регистрировались, перерегистрировались, восстанавливали и все работало, как в том анекдоте про программиcтов “а у меня все работает”, а у клиента нет.В результате оказалось, что мы просто забыли залить картинки авторизации через социальные сети и форма авторизации была только с полем логина и пароля.)

Кому конкретно, мы сделали особенно хорошо

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

Вывод

“Сделайте, как у Амазона” — это так не работает, нельзя сходу изменить все 🙂

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

Сейчас мы готовим еще “что-то” для F.ua и чуть позже я обязательно поделюсь новостями.

На этом пока все и спасибо всем, кто дочитал до конца и удачных вам экспериментов.)

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Наталья Павлюченко", "author_type": "self", "tags": [], "comments": 5, "likes": 5, "favorites": 15, "is_advertisement": false, "subsite_label": "design", "id": 88366, "is_wide": false, "is_ugc": true, "date": "Wed, 16 Oct 2019 18:34:26 +0300", "is_special": false }
0
{ "id": 88366, "author_id": 378786, "diff_limit": 1000, "urls": {"diff":"\/comments\/88366\/get","add":"\/comments\/88366\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/88366"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
5 комментариев
Популярные
По порядку
3

проверьте гифку "старый-новый", у меня в 2х браузерах новый на миллисекунду показывается...

Ответить
1

Здравствуйте:)
Спасибо, действительно, слетела.
Исправлю.

Ответить
2

Фотос мог стать номер один ... а стал намбер файф... Зачем нишевый крутой инет маг превратился в рядовой полу маркет плейс - это вопрос 

Ответить
0

Спасибо за хороший вопрос.)

На самом деле так исторически сложилось, что F.ua (Fotos), в самом начале был нишевым (магазин фото-техники). После этого он постоянно увеличивался в размерах, ассортименте и вырос до гипермаркета. В нише оставаться было финансово не эффективно, потому что в Украине сегмент фото-техники сильно демпинганули и сейчас заработать можно только на аксессуарах. 

Проекту 16 лет и откровенно говоря я знаю, как все начиналось (от собственника) и уже после того, как подключился к работе с дизайном (это было 6 лет назад - 2013 год). В 2013 он уже был интернет-гипермаркетом. 

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

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

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

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }