Концепция и дизайн сайта и интернет-магазина обуви Zenden

Новые, красивые и прибыльные интернет-магазины обуви -- тенденция последнего года-двух. Объем рынка растет на десятки процентов в год.

Иcточники: Cossa, Insales, Shopolog, beznal.pro, internetsales - 1, 2, 3

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

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

Интересно, что средняя оплата заказа (средний чек) в таких магазинах почти втрое больше, чем по интернет-коммерции в целом и составляет почти 6000 рублей (данные сервиса payonline.ru от марта 2013 года).

В последние 2 года в лидеры онлайн-торговли вышли мультибрендовые магазины wildberries.ru, kupivip.ru, lamoda.ru, sapato.ru.

    

   

Развиваются интернет-магазины российских производителей и ритейлеров: centrofashion.ru, tervolina.ru, respect-shoes.ru, www.monro.biz, www.cityobuv.ru, shoes.ru, mascotte.ru

Мы начали заниматься этой темой всерьез, когда к нам за разработкой сайта обратилась компания  «ZENDEN». 

Что мы делаем? Задачи и позиционирование

Задачи проекта амбициозные. Это:

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

Позиционирование

Интернет-сайт ZENDEN должен:

• служить стимулированию продаж в реальных магазинах по всей стране;
• со временем стать дополнительным каналом продаж.

Мы проанализировали сайты конкурентов. Wildberries, Lamoda и Sapato рассматривались скорее как образцы. А в число прямых конкурентов вошли несколько сайтов, который мы и рассматривали с точки зрения качества и конкурентных преимуществ.

Конкуренты, особенности и выводы

      

    

Какие выводы можно сделать по анализу конкурентов?

1.    Все сайты очень достойны. Все они продают, ни один не вызывает раздражения.

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

3.    Сайты хороших компаний, сделанные уважаемыми веб-студиями, на удивление имеют некоторые недоделки и огрехи:

• пустые заголовки title и отсутствие тега h1 (очень важно для продвижения!) на главной странице;
• битые ссылки на # на главной странице, явно оставленные разработчиками после верстки;
• белые экраны с ошибками на 404 страницах.

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

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

Мы сделаем красивый сайт с адаптивной версткой.

Мы планируем проектирование и запуск полноценного интернет-магазина ZENDEN, поддерживающего всех магазинов по всей стране.

Ключевые особенности проекта:

• сайт создается под новую концепцию дизайна магазинов и будет играть важную роль в маркетинге ближайших лет
• сайт будет хорошо отображаться на всех типах устройств: 

- Телефоны (<768px);
- Планшеты (≥768px);
- Мониторы (?992px);
- Большие мониторы (?1200px).

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

Как мы делаем? Организация работы, процесс и результат.

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

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

Специалистам ZENDEN надо здесь сказать большое “спасибо” -- они согласились на предварительное проектирование, что сэкономило всем массу времени, денег и нервных клеток.

ТЗ написала наша Ирина Меллер за 4 недели, попутно вскрыв массу проблем. Большинство -- решили, и решили хорошо. Работу над ТЗ вели в документе Google Docs с общим доступом. Удобно, просто, быстро. Спасибо менеджеру проекта со стороны ZENDEN Марии Беспаловой за конструктив и адекватность.

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

Мозговой штурм и поиск концепции главной страницы

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

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

Мы провели мозговой штурм, где обсуждались идеи. Всерьез рассматривались 4.

1. Была задумка сделать сайт на параллакс-эффекте (определение, анализ, примеры)  

Хороших сайтов на параллаксе мало, а вот неудачных полно. Пример одного из конкурентов еще раз убедил что с обувной темой больше шансов попасть во вторую группу. Здравый смысл победил желание оригинальничать, и идея, хотя и была нарисована на бумаге, но прототипирование не прошла.
Вариант “параллакс” был признан безнадежным.

2. Обложка

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

3. Два в одном. 

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

Получилась предсказуемо перегруженная главная страница.

4. Черт с ним, с корпоративным сайтом!

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

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

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

Дизайн

Мы сделали 2 эмоционально разных дизайна.
Один более спокойный в минималистичном стиле (меньше цвета, меньше деталей, сдержанная подача)

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

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

Отзывчивый (адаптивный) дизайн и верстка

Много страниц, отзывчивый дизайн и верстка (определение, тенденция 2013). 

Пара слов про отзывчивость (еще это называют “адаптивностью”). Это технология, когда один и тот же сайт сам изменяется в зависимости от устройства, на котором его открыли.По-хорошему, так надо делать всегда. 

Это раза в 2 увеличивает трудоемкость некоторых этапов, но дело того стоит.

Путь конверсии

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

Варианты страницы списка товаров. Экспериментируем с фоном и размером фотографии

Товар

Оформление заказа

Как всегда, специально рисуем страницу ошибки “404”.

Технологические нюансы и планы

За ближайший год предстоит сделать массу вещей. 

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

Производство разбито на 2 этапа:

• 1 этап - разработка сайта-витрины, отсутствует возможность заказывать товар через сайт;
• 2 этап - доработка инструментов необходимых для функционирования полноценного интернет-магазина: типы цен по регионам, остатки, личный кабинет покупателя, корзина, оформления заказа, передача информации в 1С.

Резюме

Интересно и приятно решать сложную бизнес-задачу, особенно работая с хорошим фирменным стилем и адекватными людьми. Еще раз спасибо Марии Беспаловой за конструктив и профессионализм и руководству компании ZENDEN за возможность поработать в хорошем проекте.

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

Ура!