Проектирование веб-сайтов и мобильных приложений....

56

Upload: -

Post on 14-Dec-2014

2.504 views

Category:

Design


0 download

DESCRIPTION

Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy. Ярослав Шуваев для Kostroma Design Weekend 2013. [email protected], ddvb.ru

TRANSCRIPT

Page 1: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy
Page 2: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

Представьте, что вы — клиент

Page 3: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

Красивый сайт или некрасивый?Графический дизайн

БА

Page 4: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

Некрасивый с высокой конверсией или красивый с низкой?

UX-дизайн

10%1%

Page 5: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

Сайт, у которого конверсия 2% или сайт, у которого сейчас конверсия

1%, а через год - 5%?UX-стратегия

Page 6: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

UX-design

Page 7: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

UX-design - определение

Проектирование опыта взаимодействия - воздействие на ощущения и поведение

пользователей путем создания и взаимного согласования тех элементов, которые

оказвают влияние на опыт взаимодействия

UX-дизайн. Практическое руководство по проектированию опыта взаимодействия

Page 8: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

Пример удачного UX-проектирования

Page 9: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

Польза

Page 10: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

Полезное действие

Просмотр, клик,регистрация,

комментирование,публикация,

покупка,одобрение

...

Page 11: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

Вайрфреймы, лэйауты, прототипы

http://f-i.com

Page 12: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

Вайрфрейм

http://www.actualisedesign.com/work-folio.php

Page 13: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

Лэйаут

http://www.actualisedesign.com/work-folio.php

Page 14: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

Прототип

http://www.actualisedesign.com/work-folio.php

Page 15: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

Пользовательский маршрут

Page 16: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

User Story Mapping

Page 17: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

UX-strategy

Page 18: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

UX-strategy - определение

Стратегия управления пользовательским опытом - план

изменения пользовательского опыта в течении времени с учетом поэтапного

изменения продукта.

Page 19: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

Этапы

Интервью stakeholdersКонкурентный анализ

Исследование аудиторииОпределение экосистемы

Workshop с коммандойОпределение групп пользователей

Определение “полезностей” Features продуктаСоздание плана внедрения этих полезностей

Page 20: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

Пример

Page 21: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

Интенсив Web-design в BHSAD

Page 22: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

Пример результата

воркшопа по UX-strategy

и UX-design

Ярослав Шуваев [email protected]

Page 23: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

Интервью

Текущее состояние

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

Желаемое состояние

Мы хотим начать работать с людьми менее оплачиваемых специальностей (специалисты) и с компаниями, заинтересованными в их найме.

Page 24: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

Задачи

1. Создать новый бренд услуг трудоустройства и поиска персонала.2. Создать Интернет-сервис, который будет давать возможность:

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

Page 25: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

Возможности

У нас есть:- эксперты по HR,- система управления бизнесом,- персонал, обслуживающий сайт,- рекламный отдел,- база данных для начала,- оборудованный колл-центр, который справится с увеличением нагрузки до 100 звонков в день,- переговорные, пропускную способность которых можно увеличить на 2 человека в день,- рекламный бюджет и связи, благодаря которым мы сможем обеспечить 500 заходов в день,- ряд рекламодателей, которые будут размещаться на этом сайте,- бюджет, позволяющий проекту существовать год без прибыли, что нужно для формирования лояльности

Page 26: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

Угрозы

- Конкуренция очень высока

Цели на год

- Конверсия заходов в звонки 0,2% (1 чел)- Конверсия заходов в размещение резюме 0,1% (0,5 человек)- Конверсия заходов в отклики на вакансии 0,2% (0,1 человек)- Конверсия заходов в просмотр продвигаемых вакансий 0,2% (1 человек)

Page 27: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

План

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

ЯнвПроектиро-вание (1 этап)Проектиро-вание (2 этап)Производство(1 этап)Реклама

Производство(2 этап)

Фев Мар Апр Май Июн Июл Авг Сен Окт Ноя Дек

Page 28: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

Группы пользователей

(Из интервью)- Соискатели- Работодатели- Рекламодатели

Page 29: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

Портрет соискателя

- мужчина - менеджер продаж- 25-34 лет- 35-55 тыс руб.- города >1млн- работающий с высшим образованием- русский- недорогой смартфон с ОC Android, ТВ, стационарный ПК на работе, нетбук- сайты: vk.com, mail.ru, youtube.com, odnoklassniki

Page 30: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

Портрет работодателя

- женщина (90%)- HR-менеджер- 26-35- города >1млн- образование высшее- базовые знания английского- з/п - 20-30 т.р.- русская- телефон - не смартфон, ТВ, стационарный ПК на работе, нетбук- сайты: vk.com, mail.ru, youtube.com, odnoklassniki

Page 31: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

Портрет рекламодателя

- женщина- PR-manager в образовательной компании- з/п 35 000 - 45 000 т.р.- Москва- русская- смартфон, планшет, ПК на работе, ТВ, ноутбук- сайты: vk.com, facebook, youtube.com

Page 32: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

Инсайты

Инсайты соискателя

Поменять работу, чтобы:

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

Page 33: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

Инсайты работодателя

- Нужен подходящий на должность работник

Инсайты рекламодателя

- Увеличить узнаваемость фирмы- Увеличить прибыль компании- Увеличить заходы на сайт

Page 34: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

Пользы соискателя Пользы работодателя

Пользы рекламодателя

Пользы для групп

Найти более оплачиваемую должность

Найти более высокую должность

Найти работу ближе к дому

Найти соискателей,подходящих на должность

Разместить вакансию

Показ рекламы

Найти менее стрессовую работу

Найти работу, где больше “приятностей”

Разместитьрезюме

Page 35: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

Экосистема

Desktop PC Mobile Phone

Page 36: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

Матрица полезных действий

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

Сервис Соискатель Работодатель Рекламодатель

Соискатель

Работодатель

Сервис

Рекламодатель

ПолучательДатель

Page 37: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

Соискатель для сервиса

Работодатель для сервиса

Смотрит на логотип

Звонит на телефон

Входит в ЛК

Читает условия использования сервиса для сервиса

Читает юр.информацию

Регистрируется как соискатель

Пишет письма

Шерит вакансии

Смотрит на логотип

Звонит на телефон

Входит в ЛК

Регистрируетсякак работодатель

Читает условия использования сервиса для сервиса

Читает юр. информацию

Регистрируется как соискатель

Пишет письма

Шерит вакансии

Page 38: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

Рекламодатель для сервиса

Сервис для соискателя

Смотрит на логотип

Звонит на телефон

Входит в ЛК

Регистрируется как рекламодатель

Пополняет счет

Закупает показы

Читает условия использования сервиса для рекламодателя

Пишет письма

Уведомляет по почте о приглашениях

Уведомляет по телефону о приглашениях

Уведомляет о выходе подходящих вакансий

Page 39: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

Соискатель для соискателя

Работодатель для соискателя

Пишет отзывы о работодателях

Ставит оценки работодателям

Находит резюме

Получает доступ к контактам подходящего соискателя

Размещает вакансии

Редактирует вакансии

Отправляет приглашение

Размещает информацию о себе

Page 40: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

Cервис для работодателя

Соискатель для работодателя

Отправляет оповещения об отклике по почте

Отправляетоповещениеоб отклике по тел.

Подбирает подходящие резюме

Размещает свое резюме

Находит вакансию

Видит продвигае-мую вакансию ($0.02)

Откликается на вакансию

Положительно оценивают компанию Читает описание компании

Page 41: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

Сервис для рекламодателя

Соискательи работодатель для рекламодателя

Показывает статистику

Таргетирует рекламу

Кликает на рекламу ($0.01)

Page 42: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

Перспективы

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

Main Page

AllStates

Соиска-тель

Соиска-тель

Гость

Работо-датель

Работо-датель

Рекламо-датель

Рекламо-датель

ЛК Вакансия

1

1

1

1

1

2

3

4

5

1

1

8

1

1

6

6

6

6

1

1

1

1

1

3

4

5

7

7

9

7

Page 43: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

Перспективы

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

1. Все разделы2. Главная3. ЛК соискателя4. ЛК работодателя5. ЛК рекламодателя6. Профайл работодателя7. Вакансия глазами соискателя8. Профайл соискателя9. Редактор вакансий

Page 44: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

1. Все разделы 2. Главная страницаЛоготип

Разместить резюме

Разместить вакансию

Реклама

Вход

Условия Работодателя Условия Соискателя

Телефон

e-mail

Для рекламодателя

Юр. текст

Поиск вакансий

Смотрит на логотип

Смотрит на Телефон

Регистрируется как Соискатель

Разместить резюме

Разместить Вакансию

Регистрируется как Работодатель

Найти более оплачиваемую должностьНайти более высокую должн-ть

Находит вакансию

Шерит вакансии

Откликается на вакансиюНайти работу ближе к дому

Найти менее стрессовую работу

Видит продвигаемую вакансию ($0.02)

Кликает на рекламу($0.01)

Входит в ЛК

Найти работу где больше “Приятностей”

Читает условия сервиса для Работодателя

Читает условия сервиса для Соискателя

Пишет письма

Регистрируетсякак реклам.

Читает условиядля реклам.

Реквизиты и юр. информация

Page 45: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

5. ЛК рекламодателя 6. Профайл работодателя

Вакансии работодателя

Написать отзыв

Информация о Работод.

Одобрить

Статистика Пополнить счет

Редактор показов Найти более оплачиваемую должностьНайти более высокую должн-ть

Находит вакансию

Откликается на вакансиюНайти работу ближе к дому

Найти менее стрессовую работу

Видит продвигаемую вакансию ($0.02)

Найти работу где больше “Приятностей”

Пишет отзывы о Работодателях

Размещает ин-формацию о себе

Ставит оценки Работодателям

Положительно оценивают

Смотрит статистику

Пополняет счет

Закупает показы

Таргетирует рекламу

Page 46: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

7. Вакансия глазами Соискателя

8. Профайл соискателя

Кратко о Работод.

Описание вакансии

Откликнуться

Поделиться

Разместить вакансию

Размещает ин-формацию о себе

Резюме

Разместить резюме

Находит резюме

Шерит вакансии

Откликается на вакансию

Page 47: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

9. Редактор вакансий

Редактор вакансий

Разместить вакансию

Page 48: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

1. Все разделы

2. Главная

3. ЛК Соискателя

4. ЛК Работодателя

5. ЛК рекламодателя

6. Профайл работодателя

7. Вакансия глазами Соискателя

8. Профайл соискателя

9. Редактор вакансий

Логотип

L/H/L

Телефон

H/H/L

Реклама

L/H/L

Вход

H/H/L

Для рекламодателя

L/H/L

e-mail

M/M/L

Юр. текст

L/L/L

Поисквакансий

H/H/H

Разместитьрезюме

H/H/L

Разместитьвакансию

H/H/L

Условиядля соиска-теля

L/L/L

Условия дляРаботода-теля

L/L/L

ПоискВакансий

Н/H/Н

Редакторрезюме

H/H/L

Уведомлениепо e-mail

H/H/L

Уведомлениепо SMS

H/H/L

Уведомлениео подходящихвакансиях

M/M/H

Поиск резюме

H/H/Н

Редакторвакансий

H/H/Н

Подходящие резюме

H/H/H

Уведомлениепо e-mail

H/H/L

Уведомлениепо SMS

H/H/M

Редакторданных

H/H/M

Одобряемость

L/M/M

Отзывы

L/L/M

Статистика

L/H/L

ПополнитьЛК

H/H/L

Редакторпоказов

L/M/H

Вакансиикомпании

Н/Н/L

О работо-дателе

H/H/L

Одобряемость

L/M/M

Отзывы

L/L/M

Описаниевакансии

L/H/L

О работо-дателе

H/H/L

Откликнуться

L/H/L

Поделиться

Н/H/L

e-mail Юр. текст

Резюме

H/H/L

Редакторвакансий

L/H/L

Этап 1 Этап 2

Page 49: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

Главная

ЛК Соиска-тель

ЛКРаботода-тель

ЛКРекламо-датель

Авториза-ция

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

Восстано-влениепароля

Юр. Инф.Соиска-тель

Юр. Инф.Работода-тель

ДляРекламо-дателья

ПрофайлСоиска-тель

ПрофайлРаботода-тель

ВакансияРедакторВакансия

Диаграмма экранов

1

2 3 4

5 6 7 8 9

13 14

10 11 12

Page 50: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

1.1 Главная

Logo +7 012 345 67 89

Для рекламодателя Юридическая информация [email protected]

Найти Вакансию Разместитьрезюме

Разместитьвакансию

Расширеный поиск

Войти

Баннер

Page 51: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

Войти

1.2 Главная - Расширенный поиск

Logo +7 012 345 67 89

Для рекламодателя Юридическая информация [email protected]

Найти Вакансию

Искать рядом с Москва

ЗП от 25 000 до 45 000 руб

Разместитьрезюме

Разместитьвакансию

скрыть Расширеный поиск

Баннер

Page 52: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

Войти

1.2 Главная - Результат поиска

Logo +7 012 345 67 89

Для рекламодателя Юридическая информация [email protected]

Найти Вакансию

Искать рядом с метро ВДНХ

ЗП от 25 000 до 45 000 руб

Разместитьрезюме

Разместитьвакансию

скрыть Расширеный поиск

Название Вакансии, длинное 45 000 рубНазвание Компании м Проспект Мира

Название Вакансии, длинное 45 000 руботНазвание Компании Ак. Королева 8

Название Вакансии, длинноеНазвание Компании 165 метров

35 000 ― 45 000 руб

Page 53: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

клик по

Разместить резюме

ПользовательВошел какРоискатель?

1.1 Главная 2.1 Авторизация 5.1 ЛК Соискатель

нет

ПользовательВошел какРаботодатель?

6.1 ЛК Работодатель

7.1 ЛК Рекламо-датель

нет

ПользовательВошел какРекламодатель?

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

нет

А.1 Диаграмма переходов «Главная - Разместить резюме»

Page 54: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

ПользовательВошел какРоискатель?

2.1 Авторизация 5.1 ЛК Соискатель

нет

ПользовательВошел какРаботодатель?

6.1 ЛК Работодатель

7.1 ЛК Рекламо-датель

нет

ПользовательВошел какРекламодатель?

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

нет

А.2 Типовое действие «Авторизация с переходом в ЛК»

Page 55: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

клик по

Разместить Вакансию

1.1 Главная

А.3 Диаграмма переходов «Главная - Разместить вакансию»

А.2 Авторизация с переходом в ЛК

Page 56: Проектирование веб-сайтов и мобильных приложений. UX-design и UX-strategy

ddvb.rudirectdigital.ru

клик по

Войти1.1 Главная

А.4 Диаграмма переходов «Главная - Войти»

А.2 Авторизация с переходом в ЛК