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

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

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

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

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

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

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

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

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

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

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

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

Особенности процесса

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

Предыстория

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

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

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

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

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

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

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

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

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

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

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

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

Что изучали? (февраль 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

Первые наброски (март 2007)

Wireframes

Дизайн-макеты

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

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

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

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

Разработка

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

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

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

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

Редизайн

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

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

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

Переделка дизайна

Бета-версия (март 2008)

Релиз (ноябрь 2008)

Запуск

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

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

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

Немного цифр

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

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

Около 30 страниц интерактивного прототипа.

История работы над проектом

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Римейки? История настраиваемых главных страниц

К началу работы над концепцией BFM аналогичных сервисов нет (февраль 2007).

Первый такой сайт – NewsVine – включает эту функциональность в конце весны 2007.

Бета-версия настраиваемой главной страницы BBC запущена 13 декабря 2007.

Идея «Газета + NetVibes » была очевидной и лежала на поверхности.

История работы над проектом

Особенности процесса

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

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

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

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

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

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

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

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

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

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

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

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

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

Спасибо! Юрий Ветров www.jvetrau.com www.uimodeling.ru www.bfm.ru

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

2 comments

Notes on slide 1

2 Favorites