РИТ: Клиентские технологии 2008: Case Study: Проектирование делового портала BFM.ru (Юрий Ветров)

Case Study. Проектированиеделового портала BFM.ru

Юрий Ветров

О чем этот рассказ?

• Как проектируются интерфейсы крупных веб-проектов.

• История создания интерфейса BFM.ru от концепции до запуска.

• Особенности процесса работы и интересные наблюдения.

2

Вводная | История работы над проектом | Особенности процесса | Выводы и наблюдения

Зачем этот рассказ?

• Рассказать об интересных интерфейсных решениях и подходах к процессу.

• Ознакомить с нюансами работы над похожими проектами.

• Показать объем незаметной работы, который стоит за готовым решением.

3


1. История работы над проектомпредыстория, создание концепции, проектирование и дизайн, интерактивный прототип, разработка, редизайн, финальный запуск

2. Особенности процесса3. Выводы и наблюдения

4

Предыстория

• Холдинг Объединенные Медиа расширял деятельность и хотел создать издание.

• Наша компания предложила им придумать концепцию проекта и реализовать его.

• У представителей клиента был предварительный опыт работы с предварительной проработкой концепции.

5


Создание концепции

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

• Основной посыл – большой поток бизнес-информации и инструменты работы с ним.

• Основные тезисы – настраиваемая главная страница, большая база данных компаний, отраслей и котировок, взаимозавязанность всего контента.

6


Проектирование и дизайн

• Проанализировали аналоги – новостные сайты и dashboard-страницы.

• Нарисовали и презентовали наброски wireframes.

• После экспериментов получили добро и отрисовали пакет ключевых страниц.

• Создали дизайн, ориентированный на веб-сервис.

7


Что изучали? (февраль 2007)

Современные новостные сайты

• www.times.com• www.usatoday.com• www.newsvine.com• www.topix.net• www.inform.com• www.kommersant.ru• www.expert.ru• www.dp.ru

Настраиваемые главные страницы

• www.netvibes.com• www.pageflakes.com• www.protopage.com• www.start.com• www.google.com/ig• www.pusk.ru• www.eskobo.com

8


http://www.times.com/

http://www.usatoday.com/

http://www.topix.net/

http://www.topix.net/

http://www.inform.com/

Первые наброски (март 2007)Wireframes Дизайн-макеты

9


Интерактивный прототип

• Создали HTML-прототип с ключевыми страницами и работающим JavaScript.

• Много экспериментировали с прототипом – меняли страницу настройки, другие важные процессы.

• Прототип облегчил демонстрации нам перед клиентом и клиенту перед инвестором.

10


Разработка

• Клиент в Москве, проектирование и дизайн – в Петербурге, разработчики – в Минске.

• Подготовили спецификацию интерфейса на основе концепции.

• В ходе работ постоянно были в контакте с командой, дорабатывая интерфейс.

• По ходу работ интерфейс во многом поменялся и расширился.

11


Редизайн

• Появился новый главный редактор – Антон Носик, – который инициировал редизайн.

• За полторы недели подготовили и утвердили новую концепцию и ключевые страницы.

• Команда разработки за 2 месяца полностью перелицовала и перебрала сайт.

12


Переделка дизайнаБета-версия (март 2008) Релиз (ноябрь 2008)

13


Запуск

• Благодаря редизайну и редакционной политике продукт заработал и обрел постоянную аудиторию.

• Ведутся доработки интерфейса «по живому».

• Есть много планов и уже готовых вещей, которые ждут ввода в действие.

14


Немного цифр

• Более 250 структурных схем страниц (wireframes).

• Более 150 дизайн-макетов страниц.• Около 30 страниц интерактивного

прототипа.

15


1. История работы над проектом2. Особенности процесса

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

3. Выводы и наблюдения

16

Прототип для проверки концепции

• Частые презентации прототипа позволили собрать множество отзывов.

• Отзывы помогли усовершенствовать интерфейс и саму концепцию.

• Больше живых экспериментов, чем предварительной аналитики – более быстрая отдача.

17


Постоянное изменение требований

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

• Множество заинтересованных лиц, участвующих в принятии решений.

• Заказчик – медиа-стартап, внутри которого все быстро и часто меняется.

• Эксперименты с прототипом продолжаются постоянно.

18


Agile-разработка

• Проект управляется по гибким методикам и идет итеративно.

• Команда проектирования отделена от команды разработки – организационно и географически.

• Вопросу взаимодействия команд была посвящена презентация на РИТ-2008.http://www.slideshare.net/jvetrau/agile-presentation-696303

19


Как концепция прошла полный цикл

• Изначальная концепция предполагала газету и инструменты для работы с ее контентом.

• В ходе экспериментов и разработки акцент сместился в сторону сервисов.

• С приходом текущего главного редактора пришло четкое позиционирование и возврат к упору на контент.

20


Несколько запусков проекта

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

• Бета-версия была закрыта и полностью пересобрана.

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

21


Многое из задуманного не доходит до финиша

• Не все идеи проектировщика и дизайнера доходят до конца, а если и доходят – часто не в том виде.

• Длинная цепочка прохождения решений и по дороге обязательно что-то понимается и делается не так.

• Часто перед запуском есть более критичные задачи чем интерфейс и дизайн.

22


Нужен хороший руководитель проекта со стороны клиента

• Такой менеджер не может быть сторонним, должен быть внутри компании.

• Этот человек должен иметь четкое видение проекта, знать куда он идет.

• Важно, чтобы имел влияние внутри компании, мог принимать свои решения.

• Должен быть в курсе современных технологий и направлений их развития.

23


Римейки? История настраиваемых главных страниц• К началу работы над концепцией BFM

аналогичных сервисов нет (февраль 2007).• Первый такой сайт – NewsVine – включает

эту функциональность в конце весны 2007.• Бета-версия настраиваемой главной

страницы BBC запущена 13 декабря 2007.• Идея «Газета + NetVibes» была очевидной и

лежала на поверхности.24


1. История работы над проектом2. Особенности процесса3. Выводы и наблюдения

выстроен agile-процесс, проверены современные интерфейсные решения, отраслевой опыт и наработки

25

Выстроен agile-процесс

• Команда разработки начала планировать и выполнять работы итеративно.

• Создали базовую версию продукта, которая затем постоянно наращивалась и совершенствовалась.

• Интегрировали проектирование интерфейса в гибкий процесс разработки.

26


Проверены современные интерфейсные решения

• Изучили, проработали и испробовали на практике несколько подходов к настройке главной страницы.

• Все материалы взаимопровязаны между собой, предусмотрены сложные выборки (например, «все назначения в энергетике»).

• В плане работ заложено много интересных усовершенствований.

27


Отраслевой опыт и наработки

• Проанализировано и отслеживается множество современных новостных изданий.

• Собраны тенденции в развитии таких сайтов, которые подтвердились за время работы над BFM.ru.

• Подходы применены в нескольких находящихся в работе проектах.

28


Спасибо!

Юрий Ветровwww.jvetrau.com

www.uimodeling.ru

www.bfm.ru

Technology

РИТ: Клиентские технологии 2008: Case Study: Проектирование делового портала BFM.ru (Юрий Ветров)