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

Привет! На связи Лиза, UI/UX-дизайнер.

В это непростое для всех время хочу немного отвлечься и рассказать о своем недавнем проекте — большом интернет-магазине (148 внутренних страниц, более 1000 товаров), который помог заказчику в несколько раз быстрее обрабатывать заказы, принимать их круглосуточно – 24/7 и освободил время от операционной рутины.

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

Основной запрос Натальи — владелицы бренда «Organic mama» состоял в том, чтобы разгрузить себя и менеджеров от приема заявок и оплаты, сделать более удобный просмотр товаров для клиента, потому что, при покупке, почти у каждого возникает много одинаковых вопросов. На момент начала работы заказы принимались только через Instagram и WhatsApp, что занимало очень много личного времени заказчицы. Поэтому было принято решение — создание сайта.

После первой беседы и постановки задачи я приступила к работе.

Расскажу немного об этапах создания сайта:

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

Часть вопросов из расширенного брифа.

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

Один слайд из презентации для заказчика по анализу целевой аудитории.

3. После анализа аудитории приступила к анализу основных конкурентов. Так как заказчик продвигается исключительно в Instagram – конкурентов я искала именно там, плюс ориентировалась на профили, которые сама Наталья отметила при заполнении брифа. Анализ конкурентов помогает понять: на что они делают акцент? Что хорошо раскрыто, а что поверхностно? На какие вопросы ЦА нет ответов?

Часть сравнительной таблицы конкурентов.

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

Ооочень малая часть карты сайта:)

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

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

6. Согласовав прототип основных страниц, мы приступили к подбору стиля сайта. Так как у заказчика не было четко определенной цветовой палитры и шрифтов (лишь направление стилистики), подбирали практически с нуля. Я предложила несколько вариантов:

1 вариант
2 вариант
3 вариант

В итоге Наталья выбрала 1 вариант.

7. Наконец мы приступили к моему любимому этапу – непосредственно дизайну. Чтобы заказчик был максимально доволен результатом я всегда делаю несколько концепций первого экрана (помимо всего прочего это отлично помогает прокачивать свой уровень в дизайне). Под выбранную концепцию будет подстраиваться и остальной сайт.

1 вариант концепции
2 вариант концепции

Наталью покорил 2 вариант. Все так как и хотелось: минималистично, стильно, не как у всех. При этом с первого взгляда ассоциируется именно с ЭКО товарами.

8. После выбранной концепции 6 рабочих дней ушло на создание остального дизайна сайта. Вот что получилось:

9. Согласовав дизайн сайта, я приступила к заполнению каталога. Сложность была в том, что огромную базу товаров (более 1000 наименований) нужно было собирать по разным сайтам. По итогу получился довольно большой каталог с возможностью выбора размеров, цветов, объемов и многого другого. В общей сложности на заполнение каталога ушло примерно 16 дней.

10. Одновременно с заполнением каталога я приступила к верстке самого сайта. На верстку понадобилось около 14 дней. Добавила легкую анимацию – и сайт заиграл новыми красками.

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

Мобильная адаптация сайта.

12. Завершающим этапом стало подключение необходимых сервисов: онлайн-оплаты, crm системы, сервиса для приема заявок.

Таким образом результатом долгой (более 2 месяцев) работы стал функциональный, удобный, и, что не менее важно, стильный сайт. Большинство вопросов и возражений закрываются на сайте, совершать покупки можно в режиме 24/7 с онлайн-оплатой.

Заказчик остался доволен! Время на прием заказов сократилось в разы.

Буду рада услышать ваши комментарии по этому проекту: )))

Сайт из кейса: organicmama.ru

Инстаграм автора: @elizaveta.ux.ui

Телеграм автора: @elizavetaakhmetova

Сайт автора: bytetown.ru

Всегда рада новым знакомствам и проектам!

0
25 комментариев
Написать комментарий...
Atomic Attack

Честно сказать, сайт как сайт. Обычный сайт.

Ответить
Развернуть ветку
Daler
Автор

Спасибо за ваше мнение

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

Изучая нишу очень мало встречала обычных сайтов) Которые действительно были бы понятны и удобны

Ответить
Развернуть ветку
Atomic Attack

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

Много воды ни о чём, сайт плохо оптимизирован именно для продаж.

Ответить
Развернуть ветку
Sergej Stroh

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

Отличная работа ;-)

Ответить
Развернуть ветку
Daler
Автор

Спасибо большое) Да, я считаю в первую очередь сайт должен отвечать потребностям ца)

Ответить
Развернуть ветку
Владимир Блохин

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

Не слушайте комментарии "экспертов", которые придираются к ошибкам в тексте.

Всё красиво целостно и удобно.
Прекрасный кейс.

Ответить
Развернуть ветку
Daler
Автор

Спасибо большое) Стараюсь так и делать)

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Daler
Автор

Спасибо)

Ответить
Развернуть ветку
Nathan Zachary

1. После пассажа "проработаны текстА" (множественное число русского слова "текст") про квалификацию автора всё стало понятно.
2. Но профессиональное любопытство протащило читать дальше. И что же? Опять кликбейт как он есть. Заголовок не соответствует содержимому 🤷🏻
Что такого необычного было сделано? Да ничего! Стандартная работа по созданию интернет-магазина. Другое дело, что первоначальной магазин хозяина, очевидно, был сделан на коленке. Но об этом мы не знаем...
3. Ах да, ещё маненько рекламы "~". Ну, куда ж без этого!

Ответить
Развернуть ветку
Владимир Блохин

Можно подружелюбнее? Вообще-то человек делиться своим кейсом.

Критики не увидел, токсичность лишняя.

Ответить
Развернуть ветку
Nathan Zachary

И что, теперь каждого, кто пишет заметку на VC, нужно облизывать и в дёсны целовать? Нет, человек приходит сюда за мнением специалистов и за трезвой оценкой. Я надеюсь. Вот вам и оценка!
И, пожалуйста, поподробнее про токсичность - вот я начинаю загибать пальцы 1...2...3...

Ответить
Развернуть ветку
Владимир Блохин

Если вы пишите про конструктивную критику, то будьте добры и её принимать. Или каждому кто теперь прокомментирует надо в "десна целовать" ?

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

Так что примите критику, что ваш комментарий не уместный.

Ответить
Развернуть ветку
Daler
Автор

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

Маленько рекламы - почему бы и нет. Ничего плохого в этом не вижу, я не кричу же о ней в каждом предложении.

Считаю, что можно более позитивно преподносить свои мысли)

Ответить
Развернуть ветку
Nathan Zachary

"Зачем учить географию, если есть извозчик" (с)
У классика это поле кругло, но общий смысл ясен. Зачем дизайнеру русский язык? - абсолютно не нужен, лишнее! 🤦🏻
А по поводу более мягких комментариев... Ну что могу сказать - зайдите в соседние ветки, посмотрите. Уж я совсем мармеладно-карамельно написал. Сейчас народ глобальными проблемами занят, а то бы вы тут огребли, ребята слов не подбирают и с нежными девичьими чувствами не считаются. Тут все ремесленники, мастера, профессионалы, им не до розовых соплей.

Ответить
Развернуть ветку
Daler
Автор

Я за сохранение правил такта на любых площадках

А то, что дизайнеру не нужен русский язык не говорилось
Лишь сказала, что ошибка в тексте для дизайнера не связана с его квалификацией

Ответить
Развернуть ветку
Atomic Attack

Полнойстью согласен с вашим комментарием, но осмелюсь спросить, если позволите.
Это вы "ремесленник, мастер, профессионал"?

Ответить
Развернуть ветку
Vyacheslav Teplyakov
делать вывод по одной ошибкИ

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

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

Все в одно лицо сделано? Заказы в итоге куда валятся и как обрабатываются? Что за CRM? Какая доставка и эквайринг? Связка с ERP есть? Как управляете остатками и ценами?
Какая в итоге конверсия? Что по SEO?

Ответить
Развернуть ветку
Анатолий Голощапов

Ты спамер.
Я сделал что-то, заходите закажите, вот сайт. Вместо этой простыни оставила бы просто номер и "жду заказав"

Ответить
Развернуть ветку
Андрей Богданов

Я конечно не знаю, что и как вы там прорабатывали...
Но клик в первую попавшуюся ссылку ("Контакты") показывает:
1) "пункт выдачи САМОВЫВОЗА",
2) "второй офис с края здания".
Самовывоз - это что, предмет, чтобы его выдавать?

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

Ответить
Развернуть ветку
Daler
Автор

Заказчик самостоятельно редактирует сайт - это уже его изменения

Ответить
Развернуть ветку
Pavel Milasheuski

Не думали отказаться от "бутерброда" (тем более справа) и вернуть привычную навигацию. Считаете так привычнее для пользователя?

Ответить
Развернуть ветку
Aleksandr Pesikoff

Приличный объем по товарам... Почему всего 2 варианта рассматривали: самопис или тильда? Самопис тоже сами делали бы под ключ?

Ответить
Развернуть ветку
Daler
Автор

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

Ответить
Развернуть ветку
Wera Ferat

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

Ответить
Развернуть ветку
Daler
Автор

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

Ответить
Развернуть ветку
22 комментария
Раскрывать всегда