41
Тренинг «Разработка интернет-магазина: от идеи до реализации» Артём Марков web4sale.ru

Проектирование большого интернет-магазина

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Проектирование большого интернет-магазина

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

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

web4sale.ru

Page 2: Проектирование большого интернет-магазина
Page 3: Проектирование большого интернет-магазина

ПРОБЛЕМЫ

Page 4: Проектирование большого интернет-магазина

Проблемы

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

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

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

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

Page 5: Проектирование большого интернет-магазина

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

Page 6: Проектирование большого интернет-магазина

Обычное ТЗ

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

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

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

ценность

Page 7: Проектирование большого интернет-магазина

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

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

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

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

Page 8: Проектирование большого интернет-магазина

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

Page 9: Проектирование большого интернет-магазина

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

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

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

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

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

Page 10: Проектирование большого интернет-магазина

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

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

Page 11: Проектирование большого интернет-магазина

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

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

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

Выбор CMS

Page 12: Проектирование большого интернет-магазина

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

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

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

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

Page 13: Проектирование большого интернет-магазина

4. Дизайн

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

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

Page 14: Проектирование большого интернет-магазина

5. Верстка

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

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

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

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

Page 15: Проектирование большого интернет-магазина

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

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

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

Page 16: Проектирование большого интернет-магазина

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

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

Backend

Page 17: Проектирование большого интернет-магазина

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

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

Page 18: Проектирование большого интернет-магазина

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

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

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

Page 19: Проектирование большого интернет-магазина

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

Page 20: Проектирование большого интернет-магазина

ПРОЦЕСС

Page 21: Проектирование большого интернет-магазина

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

Page 22: Проектирование большого интернет-магазина

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

Page 23: Проектирование большого интернет-магазина

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

Page 24: Проектирование большого интернет-магазина

Старт!

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

Page 25: Проектирование большого интернет-магазина

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

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

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

Получаем:

Page 26: Проектирование большого интернет-магазина

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

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

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

Текстовое ТЗ

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

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

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

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

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

Контроль:

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

Page 27: Проектирование большого интернет-магазина

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

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

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

Page 28: Проектирование большого интернет-магазина

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

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

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

Page 29: Проектирование большого интернет-магазина

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

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

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

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

Page 30: Проектирование большого интернет-магазина

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

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

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

Page 31: Проектирование большого интернет-магазина

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

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

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

Page 32: Проектирование большого интернет-магазина

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

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

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

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

Page 33: Проектирование большого интернет-магазина

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

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

Page 34: Проектирование большого интернет-магазина

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

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

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

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

Page 35: Проектирование большого интернет-магазина

9. Верстка

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

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

Page 36: Проектирование большого интернет-магазина

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

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

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

Page 37: Проектирование большого интернет-магазина

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

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

Page 38: Проектирование большого интернет-магазина

Финиш!

Page 39: Проектирование большого интернет-магазина

ИТОГО

Page 40: Проектирование большого интернет-магазина

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

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

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

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

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

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

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

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

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

Page 41: Проектирование большого интернет-магазина

web4sale.ru/kak

Артём Марков

[email protected]+7(916)182-32-81