Продуктовый дизайн, UX/UI от специалистов Сбербанка, Mail.ru, Ozon, Авито.
С 5 ноября по 20 ноября 2020
Программа
Модуль 1
Discovery. Постановка задачи
Введение в основные понятия
— Что в себя включают понятия юзабилити, UX, CX
— User Centered Design. Дизайн, ориентированный на пользователя
— Введение в Design Thinking
— Изучение конкурентов с помощью подхода Jobs to be Done
— Сегментация аудитории
— Как с этим всем связан подход Customer Development
01
Постановка задачи
— Определение целей работы — что мы пытаемся изменить
— Определение стейкхолдеров (заинтересованных участников) и ролей
— Подготовка брифа. Плюсы и минусы работы над UX/UI внутри компании и на заказ
02
Модуль 2
Research. Исследование
Персонификация
— User profiles. Профили пользователей
— Use cases. Примеры использования
— User stories. Пользовательские истории
03
Путь пользователя
— Подготовка скриптов
— Проведение интервью
— Анализ результатов
04
Путь пользователя
— Построение Customer Journey Map
— Примеры
— Частые ошибки
05
Сценарии использования
— Разбиение Customer Journey Map на сценарии
— Совмещение User Stories и сценариев
— Приоритизация сценариев. Основные сущности и роли
06
Модуль 3
Prototyping. Прототипирование
Ключевые экраны
— Выявление ключевых шагов приоритетных сценариев. Пример Авито Работы: сценарии соискателя и работодателя
— Как ключевые шаги превращаются в экраны интерфейса. Пример Авито Работы: основные экраны в сценарии соискателя
— Навигационные паттерны в мобильных приложениях. Пример Яндекс. Дзена: как разные навигационные решения влияли на пользовательский опыт. Пример Авито Работы: использование навигационных паттернов в сценарии соискателя
— Навигационные паттерны в интерфейсах на десктопе. Пример Яндекс. Маркета: как расположение CTA влияет на пользовательское поведение
07
Макетирование интерфейсов
— Схематичные макеты: где и как их можно рисовать
— Выделение целевых действий на основных экранах сценария. Пример Авито Работы: целевые действия в сценарии соискателя
— Типы элементов
— Основы расположение элементов на экране. Два примера поиска Яндекса: как табличный вид поисковой выдачи провоцировал баннерную слепоту, как сужение выдачи повысило доходы компании
08
Визуальный дизайн
— Сетка. Пример поиска Яндекса: как выравнивание влияет на пользовательский опыт
— Шрифты
— Цвета
— Форма элементов
— Анимация. Пример Яндекс Дзена.
— Единство стиля. Пример Авито Работы: как сетка, типографика и цвет работают на единство стиля
09
Первый кликабельный прототип в Figma
Пример Авито Работы: собираем кликабильный прототип для сценария соискателя
— Возможности приложения Figma: стили, компоненты, автоматический лэйаут. Рисуем главную страницу: меню, поиск, сниппеты
— Прототипирование. Связываем экраны между собой в пользовательский сценарий
— Режим показа прототипа
10
Второй кликабельный прототип в Figma
Пример Авито Работы: улучшаем прототип для сценария соискателя
— Гибкие возможности прототипирования: работаем со скроллом и «прилипающими» элементами, добавляем контекстные всплывающие окна, анимируем переходы между экранами, делаем контекстно всплывающие элементы
— Совместная работа. Библиотеки компонентов. Sharing. Комментарии. Спецификации для фронтенд-инженеров
— Трансляция в мобильную версию приложения
11
Модуль 4
Usability Testing. Тестирование
Подготовка к тестированию
— Определение цели тестирования
— Что и на ком будем тестировать?
— Подготовка скриптов для тестирования
12
Проведение тестирования
— Принципы проведения тестирования
— Метод фиксации результатов тестирования
13
Анализ результатов
— Приоритизация результатов
— Выявление проблем, нуждающихся в исправлении
— Выдвижение новых гипотез для тестирование
— Планирование нового дизайн-спринта
14
Модуль 5
Подведение итогов
Презентация результатов дизайн-спринта участниками
Для кого это курс
Менеджеры продукта
Как быстро вовлечь пользователей, улучшить конверсию и увеличить повторные использования.
Разработчики веб-сервисов и приложений
Как обойтись без дорогих дизайнеров
Предприниматели
Как сделать продукт, которым люди захотят пользоваться
Маркетологи
Как интерфейс может сделать продуктовый оффер еще убедительнее
productuniversity.ru/uxui
С 5 ноября по 20 ноября 2020
Программа
Модуль 1
Discovery. Постановка задачи
Введение в основные понятия
— Что в себя включают понятия юзабилити, UX, CX
— User Centered Design. Дизайн, ориентированный на пользователя
— Введение в Design Thinking
— Изучение конкурентов с помощью подхода Jobs to be Done
— Сегментация аудитории
— Как с этим всем связан подход Customer Development
01
Постановка задачи
— Определение целей работы — что мы пытаемся изменить
— Определение стейкхолдеров (заинтересованных участников) и ролей
— Подготовка брифа. Плюсы и минусы работы над UX/UI внутри компании и на заказ
02
Модуль 2
Research. Исследование
Персонификация
— User profiles. Профили пользователей
— Use cases. Примеры использования
— User stories. Пользовательские истории
03
Путь пользователя
— Подготовка скриптов
— Проведение интервью
— Анализ результатов
04
Путь пользователя
— Построение Customer Journey Map
— Примеры
— Частые ошибки
05
Сценарии использования
— Разбиение Customer Journey Map на сценарии
— Совмещение User Stories и сценариев
— Приоритизация сценариев. Основные сущности и роли
06
Модуль 3
Prototyping. Прототипирование
Ключевые экраны
— Выявление ключевых шагов приоритетных сценариев. Пример Авито Работы: сценарии соискателя и работодателя
— Как ключевые шаги превращаются в экраны интерфейса. Пример Авито Работы: основные экраны в сценарии соискателя
— Навигационные паттерны в мобильных приложениях. Пример Яндекс. Дзена: как разные навигационные решения влияли на пользовательский опыт. Пример Авито Работы: использование навигационных паттернов в сценарии соискателя
— Навигационные паттерны в интерфейсах на десктопе. Пример Яндекс. Маркета: как расположение CTA влияет на пользовательское поведение
07
Макетирование интерфейсов
— Схематичные макеты: где и как их можно рисовать
— Выделение целевых действий на основных экранах сценария. Пример Авито Работы: целевые действия в сценарии соискателя
— Типы элементов
— Основы расположение элементов на экране. Два примера поиска Яндекса: как табличный вид поисковой выдачи провоцировал баннерную слепоту, как сужение выдачи повысило доходы компании
08
Визуальный дизайн
— Сетка. Пример поиска Яндекса: как выравнивание влияет на пользовательский опыт
— Шрифты
— Цвета
— Форма элементов
— Анимация. Пример Яндекс Дзена.
— Единство стиля. Пример Авито Работы: как сетка, типографика и цвет работают на единство стиля
09
Первый кликабельный прототип в Figma
Пример Авито Работы: собираем кликабильный прототип для сценария соискателя
— Возможности приложения Figma: стили, компоненты, автоматический лэйаут. Рисуем главную страницу: меню, поиск, сниппеты
— Прототипирование. Связываем экраны между собой в пользовательский сценарий
— Режим показа прототипа
10
Второй кликабельный прототип в Figma
Пример Авито Работы: улучшаем прототип для сценария соискателя
— Гибкие возможности прототипирования: работаем со скроллом и «прилипающими» элементами, добавляем контекстные всплывающие окна, анимируем переходы между экранами, делаем контекстно всплывающие элементы
— Совместная работа. Библиотеки компонентов. Sharing. Комментарии. Спецификации для фронтенд-инженеров
— Трансляция в мобильную версию приложения
11
Модуль 4
Usability Testing. Тестирование
Подготовка к тестированию
— Определение цели тестирования
— Что и на ком будем тестировать?
— Подготовка скриптов для тестирования
12
Проведение тестирования
— Принципы проведения тестирования
— Метод фиксации результатов тестирования
13
Анализ результатов
— Приоритизация результатов
— Выявление проблем, нуждающихся в исправлении
— Выдвижение новых гипотез для тестирование
— Планирование нового дизайн-спринта
14
Модуль 5
Подведение итогов
Презентация результатов дизайн-спринта участниками
Для кого это курс
Менеджеры продукта
Как быстро вовлечь пользователей, улучшить конверсию и увеличить повторные использования.
Разработчики веб-сервисов и приложений
Как обойтись без дорогих дизайнеров
Предприниматели
Как сделать продукт, которым люди захотят пользоваться
Маркетологи
Как интерфейс может сделать продуктовый оффер еще убедительнее
productuniversity.ru/uxui
