Заказчик: Сервис видеонаблюдения в образовательных учреждениях «Парта»
Задача: Обновить интерфейс сервиса. Сделать его максимально простым и лёгким
Процесс. Изучаем имеющийся интерфейс. Выделяем всю плюсы и минусы, собираем обратную связь от пользователей и самые часты запросы в колл-центр, связанные с проблемами использования интерфейса.
Выявляем главные ошибки текущего дизайна, приступаем к проектированию. Составляем карту сайта, выделяем цели и задачи каждой страницы и шаги до целевого действия.
Приступаем к прототипированию.
Во главе всего интерфейса — личный кабинет. Избавляемся от промежуточных экранов, теперь пользователь сразу попадает на нужную страницу — онлайн-наблюдение или архив видеозаписей.
Продумываем удобную навигацию внутри архива, делаем полезное левое меню.
Решаем следующие, очень важные проблемы — непонятные настройки личного кабинета и неочевидное пополнение. Верстаем понятную тарифную сетку и пошагово проводим пользователя от оплаты до покупки нужного тарифа и добавления дней доступа.
Отдельно прорабатываем все формы, через которые пользователь взаимодействует с сервисом.
На примере формы регистрации разбираем, что и как наглядно показать, чтобы проблем не возникало ни на одном шаге.
Форма сразу дает понять, что идёт правильно, а что нет:
Приступаем к отрисовке интерфейса.
Не забываем, что главная задача — лёгкость. Несколько раз проходимся брифтвой Оккама, убирая ненужные украшения. Добавляем пользы в каждую строчку.
Чёткое распределение навигации помогает ориентироваться в большом архиве:
Продумываем все промежуточные состояния.
Отдельно крупно и наглядно показываем, когда у пользователя заканчивается доступ к некоторым группам.
Продумываем меню работы с личным кабинетом.
Верстаем тарифную сетку
Расписываем поведение всех элементов интерфейса:
Верстаем дополнительные страницы «Новости» и «Ответы на вопросы», собираем подвал сайта:
Готово!
Собираем все элементы интерфейса и передаём программистам.