Создать интернет-магазин за пару часов: миф или реальность? Раскрываем все секреты разработки детально с примерами

В интернете море привлекательных кликбейт-заголовков типа "Онлайн-магазин всего за пару часов." или "Создай свой интернет-магазин — это просто, быстро и бесплатно". Так ли это на самом деле? Давайте разберём реальный жизненный кейс!

Недавно я получила в телеграм чат запрос от своей знакомой:

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

Вот основные доступные из них:

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

Минусы: Дорого. Купить сайт с доменом будет еще дороже, так как вы покупаете уже знакомый людям бренд. Скорее всего в 90% случаях придётся дорабатывать логику уже самостоятельно.

Плюсы: Быстро, как и хотели, плюс уже есть своя база покупателей.

Заказать разработку сайта в веб-студии.

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

Можно также согласиться на их уже готовый конструктор, в таком случае они разместят ваш сайт на своем хостинге и будут сами его обслуживать. С вас только абонентская плата за сам хостинг и SSL-сертификат. Админку, как правило, будете настраивать сами. Вам в помощь могут скинуть руководство.

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

Плюсы: Скорее всего вам сделают все качественно. Особенно, если вы правильно опишете им свою идею и концепцию проекта.

Сделать всё самим. Купить домен, развернуть CMS (content management system) — это cистема управления контентом, то есть та среда, которая позволит вам установить нужную тему и создавать в ней нужные разделы и страницы. Самые известные из таких CMS — это WordPress, Tilda, WiX.

Минусы: Очень долго, ибо понадобится время, чтобы освоить инструмент. Он не такой простой, как вам рассказывают на вебинарах. В некоторых случаях для доработки потребуется знание HTML, так как в выбранной вами теме может и не быть тех объектов, которые вам нужны.

Плюсы: Дёшево, как и хотели.

Использовать готовые сервисы типа Shopify, AliExpress, Amazon, Ebay, Ozon, Wildberries, Avito и так далее.

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

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

Почему?

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

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

Итак, поехали:

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

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

БОНУС: расскажу, как вас могут надурить на каждой из этих стадий.

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

Объясняю все базовые вещи простым языком. Очень детально. Погнали!

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

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

Стадий всего семь:

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

Здесь нужна чёткость! Желательно, чтобы эта чёткость исходила от вас, ведь вы основной заказчик своего проекта.

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

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

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

Как не пойдёт:

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

Как надо:

"Я хочу осуществлять круглогодичные продажи верхней зимней женской одежды из драпа для женщин 45+ размера XXL, через специализированный интернет-магазин с собственным брендом."

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

В этом вам поможет бизнес модель Остервальдера и Пинье. По ссылке представлена чёткая инструкция, на какие вопросы нужно ответить и какие моменты нужно продумать ПРЕЖДЕ ЧЕМ создавать какой-либо бизнес вообще.

Только тогда, когда подробная бизнес-модель у вас в кармане, переходите к следующему пункту.

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

Имея перед собой свою уже проработанную бизнес-модель (см.п.1), вам будет легче определить: кто и как будет пользоваться вашим сайтом.

Пример вопросов, которые помогут определиться с пользовательскими ролями:

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

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

Давайте графически нарисуем всех действующих лиц и продумаем какие функции они должны выполнять:

Как строить подобные диаграмы можно почитать ЗДЕСЬ.

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

Не пропускайте шаг № 2.

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

Описать логику поможет правило моделирования бизнес-процессов (см.ниже).

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

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

Иначе, ваши ожидания могут быть не оправданы. Хотели одно, а получили другое.

Обычно разработчик тоже не долго мучается — берёт шаблон от предыдущего клиента и продает его вам. Не хватает опций ? Пиши ТЗ и доплачивай.

Поэтому продумываем хотя бы каркас!

В бизнес аналитике есть понятие "Моделирование верхнеуровневых процессов", где верхнеуровневый — это и есть наш первый уровень, который показывает общие шаги, приводящие к финальной цели.

Нам не нужно здесь вдаваться в конкретику. Помните, мы всё делаем поэтапно.

Итак, берем Схему 1 и составляем структуру процессов первого уровня:

Процессы пронумерованы не просто так. Это их идентификатор, который пригодится нам на следующем шаге.

Смотрим дальше.

Второй уровень — это уже конкретизация процессов первого уровня. Разбиваем первый уровень на более детальные шаги.

Каркас готов!

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

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

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

В таблицу также будут добавлены роли с отметками о том, какие функции им будут доступны, а какие нет.

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

Что дальше?

Здесь нам надо показать пошаговый сценарий.

"Зачем? Разве уже не понятно, что нужно сделать?"

Нет, не понятно. Особенно, если вы это описание отдадите программисту. Он каркас то создаст, а логику где он брать будет? Сами придумывать точно не будут? Могут взять что-нибудь от прошлых клиентов. Не нравится? Пиши ТЗ и доплачивай.

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

Смотрите как делается стандартное описание бизнес-функции:

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

Примечание: На этом лёгкая работа закончилась и теперь вам понадобится хороший бизнес или системный аналитик, который под ваше описание дополнительно разработает ER диаграмму, опишет весь состав данных и локализацию для всего вашего проекта.

Дизайн — это тоже важный шаг в разработке вашего проекта. Дизайн делится на этапы UX и UI.

UX дизайн — это создание прототипа проекта (эскиза) в соответствии с подготовленными пользовательскими сценариями.

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

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

Пользователь любит простоту и "сразу к делу".

Примеры того, как выглядит UХ дизайн для интернет-магазина можно легко найти в гугле:

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

UI дизайн — это прорисовка пользовательского интерфейса с созданием фирменного стиля, графических объектов и цветовой гаммы.

Основная цель UI-дизайна — превратить то, что сверху, в изумительно красивую картинку. Это тоже важно, так как визуал решает всё)

Вот пример того, как выглядит UI дизайн одного из самых востребованных интернет-магазинов в России:

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

Что здесь интересного?

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

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

Стадия разработки начнется сразу после анализа вашего технического проекта и дизайна. Именно по этим двум составляющим, вам дадут оценку по срокам и по стоимости.

Процесс разработки будет состоять из циклов. Вполне возможно, что вас подключат к системе управления задачами (JIRA, TFS, Trello, Asana и прочее) для мониторинга процесса разработки.

Команда разработки — это тоже целый спектр специалистов. В зависимости от сложности проекта ее состав будет разным.

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

Стадия тестирования — это неотъемлемая часть любого процесса разработки. Она помогает выявить несоответствия конечного результата и того, что написано в ваших сценариях.

Вот почему полезно их иметь!) Любой недочет сразу можно будет исправить бесплатно, так как ошибка не на вашей стороне.

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

Как это работает?

1. Открываете тестовую версию интернет-магазина;

2. Открываете документацию, в которой описаны сценарии вашего проекта;

3. Начинаете выполнять все как написано в сценарии;

4. Если сайт реагирует в точности как и написано, значит все хорошо. Если где-то что-то не вопроизводится, то это ошибка (в терминологии — это бага).

Если ошибка вам очевидна, то сообщите об ошибке тестировщикам или программистам (в терминологии -— это bug report или, по-нашему, баг-репорт).

Баг-репорт должен отображать AS IS и TO BE варианты.

AS IS (как работает сейчас)— пошагово опишите сценарий вопроизведения ошибки и приложите скрин.

TO BE (как нужно) — прикрепите описание сценария, который не срабатывает и приложите макет, на котором отображен желаемый результат.

О формате оформления баг-репортa можно договориться с тестировщиками и программистами индивидуально.

Базовые примеры:

Руководство по написанию баг-репорта — здесь.

Образец заполненного баг-репорта — здесь.

Что может пойти не так?

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

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

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

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

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

Напоминание: Каждый раз, перед тем как выкладывать обновления, убедитесь, что для текущей версии выполнен бэкап**. Если что-то пойдет не так, можно будет всё вернуть в исходное состояние. Лишним не будет!

**Бэкап — это копия всей предыдущей версии вашего сайта.

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

Время от времени, клиенты будут обращаться в тех поддержку по вопросам оплаты, статуса заказов, доставки, "все поломалось" и так далее.

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

Руководство по тому, как организовать службу поддержки пользователей описан ЗДЕСЬ.

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

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

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

Поэтому, найдите для себя самый оптимальный вариант.

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

Остальные этапы вы уже знаете.

P.S.: В случае с моей знакомой, которая прислала мне сообщение (см. начало статьи), мы решили, что самым оптимальным вариантом по её временным и денежным ресурсам будет для начала, начать осуществлять продажи через Avito.

Ну, а дальше посмотрим, как пойдут дела.

#интернет_магазины #интернетмагазин #онлайнмагазин #бизнесаналитика #разработкасайта