Проектирование финансово-образовательного сайта

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

1. Постановка задачи, сбор информации и формирование требований

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

• Что нужно сделать? Разработать ресурс, благодаря которому люди будут учиться инвестировать деньги.
• Для кого? Для жителей Швейцарии, которые хотят выгодно инвестировать личные средства и быть спокойными за свое финансовое благосостоние в будущем.
• Зачем? Какая цель проекта? Помочь людям разобраться в теме инвестирования и дать людям возможность записаться на консультацию к специалисту, делать инвестиции.

Сначала был составлен краткий портрет ЦА и собраны ссылки на похожие ресурсы, для анализа данной предметной области. В работе над этим проектом я ориентировался на подход Jobs to be done и основной фокус был на задачи, которые будет решать пользователь с помощью сайта, потому портрет пользователя и был описан достаточно коротко.

Так как у меня уже была определенная экспертность в сфере решений для образовательных проектов (варюсь в это теме с 2012-го года) мне было достаточно просто описать функциональные требования. Функциональные требования, по сути, это описание того функционала, который нужен для того, чтобы пользователь смог решить свои задачи. Ключевые задачи пользователя были определены исходя из целей проекта, вот они:

• узнать информацию о способах и инструментах финансирования от лучших экспертов на рынке;
• пройти обучение по основам финансовой грамотности;
• получить консультацию от эксперта;
• начать инвестировать.

Проект был разбит условно на две части: информационный сайт с контентом и кабинет с курсами. Сначала были описаны функциональные требования к сайту.

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

Кроме описания требований была определена общая структура курса.

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

2. Проектирование сайта

Первым делом нужно продумать последовательность действий пользователя с помощью диаграммы (User Flow) потока задач. Такая диаграмма помогает определить логику работы пользователя с сайтом и выделить ключевой сценарий взаимодействия.

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

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

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

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

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

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

После этого осталось все это проработать и отобразить в прототипе.

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

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

3. Передача проекта

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

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