Портфолио

• Составление проектной документации;
• Разработка интерактивного прототипа приложения;
• Проведение пользовательского тестирования на удобство использования интерфейса;
• Написание технического задания на разработку;
• Курирование процесса разработки.

Программист Олег недоволен тем, что трое его детей постоянно проводят время в Интернете. Он сделал веб-приложение, в котором каждому ребенку устанавливается лимит пользования интернетом в мегабайтах. У каждого ребенка только одно устройство, и они честно пользуются только им. При исчерпании лимита выход в интернет с этого устройства невозможен.

Нарисуйте макет или прототип этого веб-приложения, в котором можно:

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

Результатом решения задачи был выполнен динамический прототип со следующими особенностями:

• Все кликабельное и рабочее — визуально отображена близкая к реальным условиям детализация и динамика приложения.
• Авторизация: вход и выход.
• Статистика за прошлые месяцы.
• Установка лимита для каждого пользователя.
• Установка общего лимита.
• Добавление нового пользователя.
• Удаление пользователя.
• Используется системы скрытых подсказок по наведению.
• Инлайн редактирование лимита у каждого пользователя
• Оптимизировано для просмотра в браузере Firefox, в других могут проявляться некоторые визуальные отличия.
• Сохранение значений в формах работает по enter-у ;)
• Человеко-часы:
  • 5 часов на концепцию,
  • 17 часов на прототип.

Основные роли в проекте: владелец продукта, проектировщик опыта взаимодействия, менеджер проекта, клиентский разработчик.

Работы в рамках создания MVP продукта:

• Спроектированы и описаны бизнес-процессы, предметная область маркетплейса.
• Переработка ключевых пользовательских интерфейсов витрины и административной части интернет-магазина отвечающих за бизнес-показатели площадки (проектирование + фронтенд).
• Написание технических заданий на разработку (бэклог), курирование разработки, приемка работ, контроль качества.
• Коммуникация и контроль подрядчиков (SEO, меркетинг и т. д. ).
• Принятие ключевых решений на проекте.
• Решение проблем различного характера.

Также разработан блог (WP) для тематического продвижения площадки.

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

Вся документация по проекту.

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

• Развитая система помощи, включая гид по разделам;
• Панель инструментов индексной страницы;
• Гайдлайн для команды разработчиков по системному внедрению дополнительных функций в новый интерфейс с точки зрения клиентской разработки;
• Качественный надзор за разработкой в релизе.
• И многое-многое другое :)

• Динамический прототип.
• Вся документация по проекту.
• Изучение специфической предметной области, сбор качественных данных, составление основных сценариев использования.
• Разработка динамического прототипа (Bootstrap+jQuery+css+php) который позволил наглядно протестировать модель интерфейса, а также сэкономить на специалистах по дизайну и фронтенду, то есть прототип полностью ушел в производство.

Выполнено проектирование и также вся верстка технологических элементов. Уникальность решения требует нестандартного подхода — элементы администрирования должны гармонично встраиваться в шаблон сайта. Все глобальное вынесено в общую панель управления.

Пример проектной документации:

• Модуль «Корзина»
• Модуль «Вопрос — ответ»

• Макет сайта масштабируются под разрешение монитора, включая изображения.
• Уделено достаточно внимания информационной подаче содержания: список фильмов, расписание сеансов и т. д.
• Разработана интерактивная схема кинотеатра, с двухсторонней возможностью навигации по объектам: через категории объектов, через объекты на схеме. Схема разрабатывалась без использования технологии «флеш», так что можно при случае давать ссылки на непосредственный объект чтобы посмотреть как к нему добраться.
• Разработана схема выбора мест для последующей покупки или брони. Развитая обратная реакция системы на возможные ограничения. Решены задачи в связи с нетривиальной предметной областью по возможности покупки билетов в связи законодательством, ограничением по времени на операции по покупке или брони в связи с блокированием билета на продажу, деления реакции системы на события по бронированию и покупке в связи с тем, что бронировать могут только держатели карт.
• Проработаны страницы личного кабинета пользователя: информация по текущим и архивным заказам, активация бонусной карты, подписка, профиль.
• Доработаны специфичные разделы администраторского раздела для бекенда основанного на системе управления содержимым UMI.CMS

• 

  Интерактивная схема кинотеатра

• 

  Схема зрительного зала на конкретный сеанс

• 

  Успешное бронирование

• 

  Управление подпиской в личном кабинете

• Easy Guide
  Две навигации: по стрелкам и по шкале движения к счастью. Интерфейс адаптирован к разным экранам: стрелки всегда прибиты к своим краям; шкала счастья прибита к левому верхнему углу браузера, так что она всегда доступна для пользователя при любом разрешении. Особенности визуализации: ползунок шкалы можно также таскать, одновременно проматывая все шаги в реальном времени; активный слайд высветляется в отличие от своих неактивных собратьев; неактивная навигационная стрелка уводится в прозрачность и снимется признак активности курсора (pointer).

• Навигация
  Глобальная навигация имеет в подразделах навигацию второго уровня если необходимо. В сайдбаре реализованы две навигации: служебная (помощь, обратная связь, быстрое руководство) и дополнительная, совмещающая в себе ссылки на важные подразделы и отображающую текущую активность счетчиком для каждой из категорий.

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

• Профиль пользователя
  Подразделы выполнены посредством вкладок.

  Profile: содержимое полей редактируется путем инлайн-реализации с возможными вариантами для выбора.

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

  Video: загрузка видео, карусель превью для выбора ролика, заголовок и подпись к ролику, удаление.

  Looking for: содержимое полей редактируется путем инлайн-реализации с возможными вариантами для выбора аналогично разделу profile с учетом своей специфики.

  Settings: смена пароля, ящика, настройка уведомлений, использование защищенного соединения https, скрыть профиль, удалить профиль.

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

  Общий поиск выполнен в виде предложения с изменяемыми в нем частями — параметрами. В предложении визуально выделены ключевые составляющие. В выпадающем списке полов автоматически выставлен противоположный пользователю пол.

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

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

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

• Записная книжка
  Специальный раздел для контактов пользователя с делениями по подразделам: General, куда попадают все контакты по умолчанию с кем было какой-либо взаимодействие; подраздел MyList, куда попадают желанные контакты; BlackList, куда заносятся контакты которые более не будут беспокоить пользователя. Списки снабжены краткой информацией о контактах. Здесь же можно проставить рейтинг. Интерфейс позволяет осуществлять перенос контактов из одного подраздела в другой и удаление.

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

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

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

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

• Обратная связь
  Реализована через форму жалоб в просматриваемом профиле и форму службы поддержки.

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

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

• Разработка
  Выполнена реализация front-end части интерфейса (кроме JS)