Разработка концепции и прототипа мобильного мессенджера

Для разработки хорошего продукта нужно придерживаться четкой методики проектирования основанной на таких методологиях как Design Thinking или Human Centered Design. Такой процесс отнимает много времени, что в современных условиях не всегда приемлемо. В тех случаях, когда за короткий срок нужно разработать концепцию продукта, можно получить нужный результат сократив количество основных шагов к минимуму.


Проблема

Довольно часто случается так, что стоит задача подготовить концепцию некоего продукта, или минимально жизнеспособный продукт (MVP), но на входе дизайнер получает минимум информации, а на глубокий анализ и исследования нет времени. В таких случаях нужно не впадать в панику а постараться осмыслить входящую информацию, дополнив ее гипотезами и предположениями. В методологиях проектирования, таких как Design Thinking и Human Centered Design, сущесвует вполне определенный перечень шагов количество которых вполне можно сократить для ускорения процесса. Вот эти основные шаги:

  1. Определение целей и потребностей проекта.
  2. Исследование существующих решений.
  3. Персонажи и пользовательские сценарии.
  4. Функционал и информационное наполнение.
  5. Концептуальные прототипы.

Ниже рассмотрим каждый шаг подробнее на основе реального кейса.

1. Определение целей и потребностей проекта

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

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

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

Аудитория: молодые люди активно использующие Интернет и мобильные телефоны для общения, и решения повседневных задач.

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

2. Исследование существующих решений

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

Естественно, для того что бы “погрузиться в тему” нужно установить все эти приложения на телефон и попользоваться ими некоторое время. Фокусируясь на задаче можно делать зметки и скетчи.

3. Персонажи и пользовательские сценарии

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

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

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

Сценарий 1. Утро. Андрей спешит в университет. Перед выходом он надел новую куртку, которую купил вчера на распродаже. Андрей хочет поделиться этой новостью с друзьями и узнать их мнение. Он достаёт телефон, делает фото себя перед зеркалом и быстро выбегает из дома. Добравшись до остановки и сев в автобус Андрей достаёт телефон и запускает приложение IM. Так как Андрею интересно мнение о новой курточке только близких друзей он создаёт новый чат и добавляет из списка контактов близких друзей после чего размещает фото себя в новой куртке. При этом он сразу видит кто из друзей находится онлайн. Буквально через 5 секунд один из друзей пишет сообщение “Крутая куртка!!! Где и почем брал?”. Андрей быстро отписывает по стоимости а также пишет адрес магазина, добавив ссылку на карту, и выходит из автобуса. По дороге в университет он получает пуш-уведомление о новом комментарии от другого друга и отвечает на него.

Сценарий 2. День. Андрей находится в университете. По дороге в аудиторию он вспоминает, что у Саши, одного из его друзей, вчера был день рождения а он его так и не поздравил. Остановившись у самой двери Андрей достаёт телефон, запускает IM и находит в списке Сашу Васильева и начинает с ним чат. Андрей любит поздравлять друзей лично поэтому он решает отправить поздравление в виде голосового сообщения. Для этого он включает запись, диктует короткое поздравление с извинением, публикует его в чате и прячет телефон. Через пол часа приходит пуш-уведомление с сообщением от Саши “Спасибо!”.

Сценарий 3. День. Андрей находится в университете. Прозвенел звонок и наступила большая перемена. Вечером Андрей планировал пойти на свидание с новой девушкой поэтому ему нужно договориться о времени и месте. Он достаёт телефон, запускает IM и смотрит в списке контактов с кем бы можно было поболтать и назначить свидание. Девушка по имени Алёна находится в онлайне поэтому он сначала заходит в её профиль чтобы посмотреть на её фото и узнать сколько ей лет. Алёна оказалась не в его вкусе и несколько старовата поэтому Андрей выходит из профиля Алёны и видит что Марина также в онлайне. Андрей заходит в её профиль и видит по фото, что Марина достаточно привлекательна а также судя по фотографиям в её ленте весьма интересная личность. Он начинает с ней чат и пишет приветствие, попутно вспоминая при каких обстоятельствах с ней познакомился. Марина отвечает через несколько секунд. Андрей без долгой переписки предлагает встретиться вечером в кафе добавив в сообщение несколько смайликов и расположение кафе на карте, чтобы Марина смогла посмотреть по карте где находится кафе. Немного поломавшись Марина соглашается и прощается. Андрей радостный прячет телефон и бежит на пары.

Сценарий 4. Вечер. Андрей после университета заходит на часик в спортзал чтобы немного попрыгать, он занимается акробатикой. Сегодня он хочет попробовать сделать сальто вперед. После нескольких попыток у него получается и он хочет поделиться этой новостью со своим старшим братом. Андрей достаёт телефон, запускает приложение IM, в списке контактов находит брата и создаёт с ним чат. Приложение позволяет публиковать в чате видео поэтому Андрей запускает функцию записи видео и просит одного из тренеров снять видео. После того как Андрей делает сальто он берёт телефон и просматривает видеозапись. Запись получилась не очень хорошей поэтому он удаляет видео и просит записать ещё раз. На этот раз видео получилось чётким поэтому Андрей сразу публикует его в чате с братом, снабжает коротким текстом и прячет телефон. Через пол часа по дороге домой в автобусе Андрей получает пуш-уведомление с комментарием от брата “Красава, горжусь тобой!”.

Сценарий 5. Вечер. Андрей находится дома. Сегодня у него свидание поэтому он хочет посоветоваться со своими друзьями как можно произвести хорошее впечатление на девушку. Андрей запускает приложение IM, создает новый чат и называет его “Советы для Ромео”. Так как до выхода у него есть только 10 минут Андрей добавляет в чат друзей которые в онлайне. Андрей пишет короткий текст в котором излагает суть ситуации и просит поделиться опытом. Друзья конечно же начинают шутить на эту тему снабжая комментарии разными смайлами, однако также есть несколько дельных советов. Андрей также хочет подобрать галстук поэтому ему нужен совет девушек. Андрей создает новый чат с названием “Галстук”, добавляет в него из списка близких друзей девушек которые в онлайне. После этого он надевает поочерёдно несколько галстуков, делает фотографии и публикует их в чате с просьбой оценить какой из них лучше. Через несколько секунд трое девушек отвечают, что синий галстук лучше всего добавляя смайлики. Андрей благодарит их за помощь, прячет телефон и выбегает из дома.

4. Функционал и информационное наполнение

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

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

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

5. Концептуальные прототипы

Ну и после того как дизайнер понимает как будет работать приложение, и что будет на каждом экране, можно приступать к прототипированию. Для этой задачи я рекомендую использовать векторный редактор, например Adobe Illustrator или Sketch.

Ниже представлены результат первого захода, так сказать концептуальные прототипы.

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

Что дальше

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

Заключение

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


Хочешь прокачаться? Получи доступ к лекциям и материалам онлайн-тренинга “DIGITAL PRODUCT DESIGN”. Узнать подробнее

Show your support

Clapping shows how much you appreciated Alex Voloshyn’s story.