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

Этот процесс может быть ошеломляющим, особенно когда ставки за проект высоки.

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

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

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

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

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

Наша штаб-квартира находится в лаборатории сообщества открытых инноваций La Paillasse. Мы работаем вместе со стартапом ViteUnLieu, который помогает организациям легко находить конференц-залы в Париже, с Жаном Каринти в качестве владельца продукта и Кристофом Робилларом в качестве ведущего разработчика. .

Мы выбрали стек Ruby on Rails для серверной части и «ванильный» (простой, без фреймворков) JavaScript для передней части.

Мы хотим интегрировать React как можно скорее, но на этапе прототипирования мы придерживаемся старого доброго JavaScript.

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

1. Примите ловкий дух

Два дня мы работали с тренером, чтобы изучить основы Agile-разработки.

Главный вывод Agile заключается в том, что вы должны работать в очень тесном сотрудничестве с вашими конечными пользователями. Цель состоит в том, чтобы перебрать каждую версию вашего приложения на основе полученных отзывов.

Таким образом, вы с меньшей вероятностью создадите что-то, что людям не нужно, не нравится или не умеют использовать.

2. Быстро знакомьтесь с пользователями в реальной жизни.

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

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

Болезненность и потребность в нашем продукте определенно оправдались. Этого было достаточно, чтобы мы начали работу над минимально жизнеспособным продуктом (MVP). Это версия продукта с необходимыми функциями, чтобы быть первой используемой версией нашего продукта.

3. Напишите истории пользователей.

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

На модели написано: «Как‹ тип пользователя ›я могу‹ какую-то цель ›(так что‹ какая-то причина ›)».

Вот пример одной из наших простых пользовательских историй: «Как член внешкольного персонала я могу создать профиль со своей личной информацией».

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

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

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

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

Story Map и содержание спринтов могут изменяться на каждой итерации продукта. Обычно это совпадает с сеансом обратной связи с пользователями.

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

4. Настройте гибкий рабочий процесс.

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

Ежедневные стендап встречи

Согласно методологии Scrum, ежедневная стендап - это постоянная встреча, проводимая каждый день спринта. Мы разговариваем друг с другом каждое начало дня по 5–15 минут. Мы стоим, если физически вместе, или разговариваем по телефону, если работаем удаленно.

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

Бэклог разработчиков

Бэклог спринта становится видимым, если помещать его на доску задач , где каждая строка на доске представляет собой историю пользователя. Небольшие индивидуальные задания записываются на «карточках».

Члены команды постоянно обновляют доску задач на протяжении всего спринта, записывая новые карточки или перемещая карточки. Например, карточку можно переместить из столбца «Сделать» в столбец «Выполнение».

Вы можете легко воссоздать эту доску задач на доске задач Gitlab или на Waffle.io в качестве цифровой альтернативы.

Двухнедельные встречи между стартапами

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

  • Установите максимальное время для встречи (от 30 минут до 1 часа)
  • Напишите стикер для каждой темы, которая будет обсуждаться, и говорите только по одной теме за раз.
  • Установите 5-минутный таймер для каждого обсуждения записок.
    Если обсуждение превышает 5 минут, решите между командой, стоит ли сбрасывать таймер еще на 5 минут.

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

Это одна из моих любимых частей в начале проекта - поиск вдохновения для UX и UI в других веб-приложениях, некоторые из которых я использую очень часто.

Меня всегда поражала креативность и смекалка команд, создающих некоторые инструменты, которые я использую. Например, меня вдохновил процесс адаптации на breaz.io. Я также восхищался тем, как drivy.com позволяет пользователям сначала выбрать группу автомобилей, а затем отправить по одному сообщению каждому владельцу после того, как выбор будет сделан.

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

Дриблинг

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

Moodboard

Moodboard позволяет собирать, делиться и комментировать дизайны с вашей командой. Это позволяет каждому почувствовать вдохновение для интерфейса веб-сайта:

Adobe Color

Adobe Color - идеальный источник вдохновения для создания гармоничных палитр. Функция Исследовать позволяет просматривать тысячи вдохновляющих цветовых тем:

6. Создайте первую версию приложения на Rails.

Мы настраиваем наши модели и базу данных с помощью Ruby on Rails и SQLite. Мы использовали драгоценный камень «Devise» для системы аутентификации.

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

Это всегда производит какой-то эффект «вау!» При представлении первых демонстраций. Это первое впечатление может стать решающим фактором, когда пользователи принимают продукт.

Некоторые разработчики предпочитают сначала сосредоточиться на серверной части. Как только они приводят все в рабочее состояние, они снова возвращаются к косметике. Однако мне легче работать над обоими одновременно.

В нашем приложении основным объектом является пользователь. Нам предстоит проделать большой путь, чтобы усовершенствовать систему адаптации и найти стимулы для пользователей, чтобы они часто возвращались в приложение.

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

Ниже приведены несколько скриншотов MVP в действии!

Регистрация:

Ищу сотрудников:

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

Поэтому я решил создать полный еженедельный планировщик доступности Javascript, а затем интегрировать его в приложение Rails. Если вам интересно, вы можете найти здесь код JavaScript.

Версия 0 (недели просмотра):

Версия 1 (добавление определенных временных интервалов и адаптивного поведения):

Версия 2 (интеграция в приложение Rails - страница профиля):

7. Разверните приложение Live.

Последний шаг - запустить приложение. Я обнаружил, что Heroku упрощает его размещение. Развертывание бесплатное, а инструкции очень просты и доступны прямо на платформе.

8. Итерировать

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

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

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

Затем мы возвращаемся к доске задач, чтобы спланировать следующий спринт… До следующего раза!

Заключение

Записки - это жизнь. Без них ничего хорошего в мире не произошло бы.

На этом пока все! Мы уже во втором спринте и с невероятной ловкостью перемещаем стикеры.

Мы приветствуем любые инструменты, которые вы используете в своем собственном процессе и которыми хотели бы поделиться с нами!

Редактировать: Прототип AlloAnim успешно запущен и в настоящее время тестируется и ежедневно используется персоналом города Парижа.

Вы можете найти Открытый исходный код здесь и полную демонстрацию приложения ниже:

Программа # startupdeville - это инициатива города Парижа, реализуемая государственными агентами, которые определили явную проблему во время работы на местах.

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

Если вам понравилась эта вещь, пожалуйста, покажите свою любовь и похлопайте, чтобы другие могли ее найти! Не стесняйтесь следить за мной в Twitter, а также за членами команды #startupdeville, Christian Bockarie, Jean Karinthi и Christophe Robillard

- Лена Фор