«У вас не сайт, а боль»: как мы перестали быть олдскульными и увеличили количество сделок
В начале декабря мы начали редизайн сайта ДамПродам.ру. Он был старомодным и многих раздражал. Рассказываю, почему мы взялись за перестройку только сейчас и как новый UX повлиял на бизнес.
Старый дизайн мы подсмотрели у логистов
В разработке прошлого дизайна участвовал дизайнер-фрилансер. Мы его никогда не видели: нам просто порекомендовали его на небольшие работы.
Собственной концепции сайта не было. За референс взяли логистическую компанию Eride. Несмотря на совершенно разные продукты, мы нашли схожесть логики и на её основе создали свою первую страницу выкупа-обмена айфонов.
В итоге мы скопировали часть пользовательского пути, сделали дизайн под себя, добавили определенные хотелки и запустили в работу. Вот что получилось:
А это дизайн компании Eride в 2017-м:
Тогда у нас был только один вопрос: взлетит сервис или нет. Через неделю тестирования мы поняли, что путь выбран правильный. Можно смело инвестировать время, ресурсы и деньги в развитие.
Спустя две недели после запуска нового дизайна мы перестали запрашивать мобильный телефон клиента перед тем, как показывать стоимость выкупа. Сперва нам казалось, что все конкуренты будут пользоваться расчетом и что это нечестно. Но мы быстро отказались от этих мыслей.
Во-первых, мы не планировали спамить тем, кто не готов был пользоваться нашим сервисом. Во-вторых, если лично у нас, как у пользователей других сайтов, такой «прием» вызывает негативные эмоции, то зачем так делать у себя? Работать с клиентами через принуждение — плохой способ.
В итоге многие страницы сайта прожили с нами 2,5 года – до последнего редизайна.
Ниже страница расчета стоимости MacBook. До сих пор не обновились: очень трудный движок внутри, надо много всего предусмотреть, чтобы ничего не потерять.
С 2017-го в другие страницы сайта мы постепенно добавляли мелкие элементы и вносили правки.
Периодически что-то подкрашивали, улучшали для удобства пользователей. Но всё это было сделано на том же базовом уровне. Изменения мы вносили на основании вебвизора, отзывов клиентов и других сайтов, где нам нравились какие-то элементы.
Страницу расчета стоимости iPhone обновить успели. Старый вариант:
Новый вариант калькулятора:
Вариант «старого» логотипа сделали за 1 час в фотошопе, выбрали самый подходящий по смыслу и запустили:
А так стало через какое-то время:
3абегая вперед, сразу покажу наш новый логотип и несколько элементов:
Почему мы решили поменяться
Со старым дизайном мы жили с 2017 до 2020 года, пока к команде не присоединился человек, который в свободное время занимается венчурными проектами. Он консультирует нас по стратегическим вопросам и помогает в переговорах с крупными брендами.
Однажды на встрече он сказал: «Ребята, я настаиваю, чтобы вы сделали новый дизайн. Ваш настолько олдскульный, что мешает мне делать интро своим коллегам. Очень важно иметь современную обертку, которая соответствует трендам времени. А у вас боль, а не сайт!».
После услышанного мы возмутились и удивились. Неужели наш дизайн может кому-то настолько не нравиться? Тысячи глобальных компаний вроде Авито, Amazon или eBay абсолютно не беспокоятся по поводу дизайна, зато вкладываются в умные механизмы скоринга, в улучшение пользовательского опыта, конверсию и удовольствие от покупки.
Но раз уж так, мы принялись за поиски нового дизайнера. В результате остановились на парне, который пришел к нам по рекомендации и ранее занимался дизайном интерфейса в Яндекс.Музыке.
Концепция
Разработка концепции заняла около двух месяцев. Наше единственное пожелание было — сохранить логику пользовательского пути.
Дизайнер обрисовал задачу так: «Обновление стиля с заданными константами в виде метафоры логотипа и приведение коммуникации к общему знаменателю».
Важно было пересмотреть структуру и найти универсальное решение для добавления любых типов устройств, так как сервис предоставляет возможность избавиться почти от любой техники Apple или Samsung.
Как говорит разработчик, «помимо структурной работы хотелось сделать сайт более дружелюбным для пользователя и сократить количество одновременно выливаемой информации. Этого удалось достичь за счёт разделения калькулятора на смысловые этапы и увеличения пространства в вёрстке в целом».
Ниже визуальные примеры того, что было:
А вот что стало в 2020-м году:
Для нового дизайна выбрали новый современный шрифт, провели косметическую работу с логотипом и подобрали новый освежающий цвет, который лучше ассоциируется с продажами или приобретением новых гаджетов.
Шрифт Halvar Breitschrift — прагматичный гротеск с грубым инженерным шармом. Он широкий, основательный, подчеркивающий уверенный характер сервиса. Также он хорошо читается как в крупном, так и в мелком формате, что позволяет использовать его для всех материалов.
В процесс дизайна мы почти не вмешивались. Нам предложили три варианта в рамках одной концепции. Мы выбрали самый простой и лаконичный.
В результате остановились на существующем варианте, который зарелизили примерно на 70%. Остальное в процессе.
И еще раз. Было:
Стало:
Было:
Стало:
Что в итоге
Для нас решение о редизайне сперва было спорным. Мы постепенно привыкаем, но с некоторыми моментами не согласны до сих пор. Тем не менее, запустились как есть, потому что продолжаем верить в то, что в итоге рулит продукт, а не его оболочка.
В нашем сервисе ключевой фактор для принятия решения — это цена и сервис. Какой бы хипстерский, минималистичный, современный дизайн не был, вы не будете терять даже 2 тысячи рублей ради красивой картинки. А если вас устраивает сервис, удобство, качество и скорость, то вопрос решен.
Тем не менее, надеемся, что сейчас мы достигли общего знаменателя: и сбалансированного дизайна, и удобного технологичного решения.
Конверсии не упали – наоборот, выросли. Вряд ли это полностью связано с новым дизайном. Думаем, что это совокупность факторов всего 2020-го, которые в целом повлияли на наш бизнес. В прошлом году рост количества сделок показал + 300%.
Предлагаем вам оценить наш путь не только на уровне нравится/не нравится, а пройти до конца – и написать в комментариях, что смущает, а что зашло в новом дизайне.
Комментарий недоступен
Почему у вас акцентная гарнитура вообще везде?)
Как будто дизайнер впервые увидел широкий шрифт и так его на весь сайт и забабахал, это неправильно, держу в курсе))
Акцент правильнее ставить туда, куда он нужен, например в заголовки.
Если убавить жирность, оставить акцент только в некоторых местах, то будет выглядеть аккуратнее.
Да-да, первое, что подумалось — расскажите дизайнеру о шрифтовых пАрах.
Дизайнер читает. Если найдет аргумент прокомментировать, услышим *почему*
Оценил свой крутой и довольно редкий по нынешним временам МБП. Примерно раза в два, два с половиной меньше рынка.
Редизайн решит все проблемы, ок :)
Проблемы решаем, а редизайн помогает.
Посчитал аймак 2019, 580x, 2tb, 32 ram, в идеальном состоянии - от 65к.
Вы угараете?
Кстати, в опросе отсутствует модель видеокарты, а это очень важно.
Комментарий недоступен
Комментарий удален модератором
Стрелка в логотипе, которая ещё и удлиняется анимацией, говорит вовсе не о простоте и быстроте сделки, а об обратном.
Комментарий недоступен
С чем *обратным* у вас ассоциация?
Комментарий недоступен
Добрый вечер. 1. Мы выкупаем в линейке Huawei только флагманские модели, остальные совсем не ликвид. 2. Как написали, некоторые разделы до сих пор переносим на новый дизайн, процесс небыстрый ... спасибо за *в целом неплохо* :)
А вот с телефона не просто будет пользоваться. Могу полноценно видеть только продукты в верхней линии...
Но что совсем непонятно это почему iMac спрятан в разделе Macbook. Для Apple Pencil есть отдельная категория, а чтобы посмотреть предложение по стационарному iMac надо догадаться что он спрятан среди ноутбуков. Я бы на вашем месте это поправил...
Это баг, поправим. Про iMac в разделе макбуков была определенная логика.
Редизайн это шикарно, а что говорят метрики? Насколько выросли конверсии? Насколько снизилось количество отказов?
А то я бы не сказал что прошлая версия выглядит совсем плохо. 2017 был не так давно и решения тех лет еще не сильно устарели.
Согласны, что с 2017 года решения не устарели. Это была одна из позиций, и история сама именно про это. А метрики растут, но тут дизайн вряд ли имеет определяющее значение
Я вообще не увидел никакой нужды в редизайне.
Выглядит хорошо, только прошлый шрифт выглядит читабельней, новый какой-то чересчур вытянутый и странный
Ровно такое же впечатление было сначала. Но иногда тренды работают вперед нас, мы должны их понять. Шрифт вроде теперь даже нравится.
Покажите когда доделаете. Вообще, лично для меня, концепт интересный очень. Всё как мне нравится))
👌
После "дизайн мешает мне продавать" читать стало тоскливо
Жаль. Статья не про это.
можете дать справку из серпстат (самому лень) о достижениях или гостевой в метрике... примерно так пожалуй надо отвечать на звонок, при впаривании услуг...
Вы ребят мне напоминаете моего сына при прохождении ларька с игрушками 2021, все прозрачно ведь и врать даже президентам все труднее... эх вам.
Статья про дизайн. Мы вам ничего не доказываем, можно расслабиться
какие нахрен достижения ;) дно пробито
спасибо налоговой bo.nalog.ru
гляну всенепременно и возьму слова про отсутвие пруфов обратно, только к чему тянуть... кладите сюдой.
з.ы. я не душный, меня такие как вы с"""ка трижду уже кинули
ё:)
Сообщение удалено
Сообщение удалено
Dropbox же
Крутой редизайн, но полоса прокрутки режет глаз) И про шрифтовые пары тоже правильно отметили, под кнопки и описательный текст просится обычный шрифтец, типа roboto или inter
Она вообще уже немного морально устарела и если что, лучше её внизу располагать.
На большом мониторе слишком резиново получилось
Главное, рейтинг 5 :)
Да всё неплохо выглядит и работает, посчитал пару устройств.
Но, думаю, упор надо сделать на контент, а не шрифт или цвет кнопок...Например, у меня нет царапин и сколов на ноуте, т.е. его не били, не роняли, но есть пятна и потертости. Это вроде как лучше, чем царапины и сколы, но по факту - неизвестно, в форме про это ничего нет. Возникает ощущение, что будут неоправданные ожидания при передаче товара.