Фундамент и тонкости UX: Курсы

1-ое занятие. Wireframe сайт-визитка

Схема: Что такое UXD и что он в себя включает

• несколько схем, которые под разными углами рассказывают что такое UXD

Вводная в процесс дизайна и разработки

• бриф / бизнес-требования
• тз / проектирование
• дизайн
• разработка
• тестирование
• public
• дальнейшее улучшение

Вводная в UX процесс (и как он ложится на процесс дизайна и разработки)

• этапы работы
• исследование
• формулировка проблемы и задачи
• сценарии взаимодействия
• rapid sketching
• wireframing
• UI storyboard
• usability testing

Зачем нужен UXD

• бизнес-обоснование для UXD
• гуманизм как этическая подоплёка UXD

Принципы проектирования

• от частного к общему, от общего к частному
• быстрые итерации, быстрый фидбек
• data driven
• повелевай и заботься

Практика на бумаге:

• студентам даётся готовая карта сайта
• делаем наброски на бумаге для каждой страницы
• показываю примеры из интернета, заранее готовую подборку для каждой страницы
• делаем в начале карточку контента, потом каталог, потом главную, потом страницу контакты

Практика в UXpin:

• переносим с бумаги в программу
• показываем другим студентам
• вносим изменения собрав фидбек

2-ое занятие. Изучаем работу со сценариями взаимодействия

Общая информация:

• примеры сценариев взаимодействия
• примеры карт экранов
• примеры воронок продаж
• примеры CTA элементов
• примеры карт переходов из аналитики (я-метрика, google analytics & etc)

Задание на быстрый подбор интерфейсов

• находим сайты подходящие по теме
• делаем подборку скриншотов
• изучаем карты сайтов

Составляем сценарии для интернет-магазина

• ждём первых результатов от студентов
• даём подсказки и примеры из специальной подборки
• выделяем воронки продаж
• показываем другим студентам
• вносим изменения собрав фидбек

Переносим сценарии в Axure

• показываем с экрана, как пользоваться Axure
• создаём схему и список экранов
• проверяем работу студентов, даём советы

Свободная работа

3-е занятие. Wireframe интернет-магазина

• доделываем wireframe магазина в Axure
• распределяем приоритеты для внимания пользователя
• выделяем CTA элементы
• задаём контраст
• цветовое кодирование для разделов и тематик
• best practice по оформлению акций и слайдеров
• best practice по работе с фильтрами
• best practice по работе с поиском
• best practice по работе с процессом покупки
• best practice по работе с главной страницей

4-ое занятие. AARRR метрики, Acquisition

• думаем о работе с баннерами
• внедряем SEO практики
• оформление групп в соц. сетях
• думаем, куда будет приземляться трафик

Activation

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

Retention

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

Referral

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

Revenue

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

3 часа свободной работы

5-е занятие. Wireframe мобильное приложение

• работаем с гайдлайнами iOS и Google Play
• делаем ресёч, скриншоты приложений
• изучаем подборку сайтов
• составляем карту переходов
• делаем наброски для четырёх платформ
• начинаем переносить в Axure/sketch

6-е занятие. Учимся работать с разными состояниями экрана

• ошибки
• пустые экраны
• малое кол-во контента
• подсказки
• onboarding
• избранное
• поиск

3 часа свободной работы

7-е занятие. Исследования

Собираем базу референсов, скриншотов, ссылок

• готовая подборка сайтов
• методы поиска
• базы интерфейсов

Выбираем тему большого проекта

• изучаем последние проекты индустрии
• изучаем данные рынка, открытые отчёты по продажам девайсов, обороту рынков и установкам приложений
• фиксируем описание проекта

8-е занятие. Анализ

• заполняем lean canvas
• выделяем ца
• составляем персона-модели
• выделяем промо-хуки
• собираем всех конкурентов в рф и аналоги в мире
• составляем сравнительную таблицу по конкурентам и аналогам
• составляем базу интерфейсов
• составляем базу референсов
• выделяем список функционала
• сравнительная таблица по функционалу и приоретизация
• группировка фич по релизам
• формулирование гипотез, их анализ и методы проверки

3 часа свободной работы

9-е занятие. Большой проект

• составляем подробную карту приложения для 5 платформ
• делаем скетчи
• делаем wireframe для desktop

10-е занятие. Большой проект

• доделываем desktop
• делаем mobile
• делаем tablet

3 часа свободной работы
 

11 и 12 занятия. Ревью проектов, комментарии, доработка, персональные консультации

• Продумываем общий customer exp map нашего продукта и работаем с лэндингами, позиционированием, рекламой
• Тестирование интерфейсов на людях, сбор фидбека и доработка

13 и 14 занятия. Собираем итог всей проделанной работы. Учимся презентовать работу. Оформляем кейсы

Итог обучения

Портфолио, достаточное для трудоустройства.

Кейсы в портфолио содержат:

• описание
• цель в виде конкретных метрик
• сценарий переходов
• карту экранов
• исследование
• сравнительные таблицы
• в некоторых – интерактивный прототип

Общий список фреймворков и инструментов, которые получит студент:

Клиенты, аудитория, юзеры

• выделение целевой аудитории на основе аналитики
• составление персонажей, персона-моделей
• выделение эвристик
• составление психопортрета

Аналитика, исследования, методологии

• дизайн-исследования, работа с Lean Canvas
• построение гипотез и их проверка
• выявление usecases и их приоритезация
• проверка гипотез, выделение MVP
• работа по итерациям, итерационный дизайн
• составление сравнительных таблиц
• составление версионности интерфейса
• выделение AARRR метрик и их максимизация средствами интерфейса

Сценарии

• составление сценариев взаимодействия
• составление карты экранов
• выделение воронок продаж и их оптимизация