Разработка интернет-магазина: от идеи до реализации

Тренинг «Разработка интернет-магазина: от идеи до

реализации»Артём Марков

web4sale.ru

ПРОБЛЕМЫ

Проблемы

• Не знаем чего хотим• Не знаем что получится• Не знаем как сделать• Встречаемся с проблемой взаимодействия

– С подрядчиками– С фрилансерами– Своей командой

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

получиться – переделывайте• Проблема поддерживать сайт в дальнейшем

ВИДЕНИЕ ПРОЕКТА

Обычное ТЗ

- Выглядит как текстовый документ- Скучный настолько, что второй раз

открывать тяжко- Предназначен для того, чтобы тыкать друг-

друга при разрешении проблем- Много формальностей, что снижает его

ценность

ТЗ для интернет-магазинов сложнее

- Каждое место должно продавать- Задача: довести покупателя до цели- Нужно продумать взаимодействие и

работу сложных и интерактивных элементов

- Информация о товарах не передается в виде текста статьи, как на информационном сайте

Матричный вид технического задания

Преимущества

Понимание смысла каждого элемента на протяжении всего проекта

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

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

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

1. Определение целей(стратегия)

Изучаем рынок Выбираем нишу и основную линейку продуктов Создаем портрет посетителя Делаем УТП для рынка

2. Определение функционала для достижения цели(тактика)

Изучаем функционал конкурентов Опросы аудитории на форумах Работа с покупателями Работа с «экстремальными пользователями» Корректировка портрета посетителя

Выписываем найденный функционал Сортируем по важности для пользователя Сортируем по ROI

Выбор CMS

3. Создание прототипа

Распределяем элементы из базового набора Распределяем элементы необходимые в этой нише

Получаем первую обратную связь

Можем начинать разработку

4. Дизайн

Отдаем прототип дизайнеру на «раскраску» Снабжаем дизайнера регламентом работ и ТЗ

Получаем:1. Сокращение стоимости2. Сокращение сроков3. Хорошие отношения

5. Верстка

Передаем дизайн верстальщику (им может быть и программист)

Снабжаем верстальщика регламентом работ и ТЗ (!) Верстальщик должен быть со знанием Jquery Отладка верстки и проверка элементов

Получаем:1. Верстку со скриптами2. Понимание проекта

верстальщиком

6. Программирование Backend

На основе готовой и отлаженной верстки можем начать программировать публичную часть

При программировании сверяемся с пунктами:• Цели• Функции• Прототип• Верстка

7. Программирование Frontend

На основе предыдущего шага делаем публичную часть сайта и сверяемся с пунктами:• Цели• Функции• Прототип• Верстка• Программирование

Backend

8. Наполнение

Информационные страницы Каталог товаров

9. Тестирование

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

• Про это часто забывают• На фрилансе эту часть работ возлагают на заказчика

Как это ТЗ в итоге выглядит?

ПРОЦЕСС

Линейный и оптимизированный процесс:

Оптимизированный процесс:

Оптимизированный процесс:

Старт!

Цели Календарный план работ Стоимость разработки

1. Сбор сведений

Анализируем рынок, инструменты:• Wordstat• Счетчики конкурентов• Чек конкурентов

Анализ аудитории Составляем портрет посетителя Начинаем Backend Программирование

Получаем:

2. Техническое задание

Макет сайта Распределяем элементы из базового набора Распределяем элементы необходимые

в этой нише Начинаем Backend Программирование

Текстовое ТЗ

Нужно: Сбор сведений

Получаем: Макет сайта

Нужно: Сбор сведений

Нужно: Макет сайта

Получаем: Текстовое ТЗ

Контроль:

Относительно сбора сведений

3. Определить параметры для подборщика и фильтрации

Нужно Прайс листы

Это нужно для: Backend Программирования, но не задерживает его выход

4. Backend программирование

Нужно Сбор сведений Учет фильтров по параметрам Покупка лицензии

Установка CMS Настроить ЧПУ Поставить на базовом шаблоне

5. Написание текстов для информационных страниц

Нужно Сбор сведений

Страницы, на которые нужен текст: Главная О компании Доставка и оплата Контакты Гарантия Каталог

Раздел каталога 1 Раздел каталога …

6. Интеграция на стандартном шаблоне из коробки

Нужно Готовое Backend Программирование Тексты информационных страниц

Делается для: Скорейшей индексации

6. Интеграция на стандартном шаблоне из коробки6.1 Выкладка текстов

Нужно Готовое Backend Программирование Тексты информационных страниц

Делается для: Скорейшей индексации

7. Заполнение товарами «вслепую»

Нужно Готовое Backend Программирование Определены и запрограммированы фильтры

Делается для: Скорейшей индексации Сокращение сроков производства Уже можно тестировать работу фильтров

- Минусы:- Не отображается все так, как будет в финале- Нужен второй проход

7. Заполнение товарами «вслепую»

Персонал: Менеджер контент-менеджеров Набор фрилансеров Раздача заданий Распараллеливание работ Контроль по времени Контроль по качеству Расчет с фрилансерами Определение фильтров Тз на заполнение

8. Дизайн Нужно

Сбор сведений Макет сайта

Страницы для отрисовки: Главная Каталог Товар Корзина Корзина … Сравнение Результаты поиска Страница не найдена 404 Результат работы фильтра Статья Контакты

Контроль: Соответствие макету Отражение интерактива Расстановка маяков Юзабилити чеклист

9. Верстка

Нужно Дизайн ТЗ макет ТЗ текст

Контроль: Валидность Кросс-браузерность Соответствие дизайну

10. Frontend программирование

Нужно ТЗ макет ТЗ текст Верстка Тексты Товары

Контроль: Проверка валидности Проверка скриптов Работа программы

11. Тест всех систем

Дизайн Программирование Заполнение

Финиш!

ИТОГО

В программу включено: 29 декабря – первое задание для закрытой группы «Маркетинг для

интернет-магазинов». 10 января (вторник) старт для 2х групп – обратная связь по первой части:

разбор ДЗ (пишите отчеты).«Обработка прайс-листа и определение ассортимента».

13 января (пятница) Гостевая лекция «Копирайтинг для интернет-магазинов»

16 января (понедельник) «Проектирование интернет-магазина» 18 января (среда) «Составление технического задания на создание

интернет-магазина» 21 января (суббота) Гостевая лекция «Брендинг для интернет-магазинов» 23 января (понедельник) «Взаимодействие с фрилансерами и своей

группой разработки» 25 января (среда) Гостевая лекция «Составление договора и

взаимодействие с вебстудией» 27 января (пятница) – финал для Silver и Gold группы 28 января (суббота) – VIP день и финал для Platinum группы – личная

встреча участников и живой однодневный тренинг.

web4sale.ru/kak

Артём Марков

artem.markov@web4sale.ru+7(916)182-32-81