UX-дизайн для сервиса по подбору репетитора

Это учебный проект курса UX в Tilda School, на котором я опробовал все знания, которые получил на курсе.

Описание задачи

Задача

Спроектировать веб-сервис с помощью которого человек может выбрать для себя репетитора для обучения (по нужной теме).

Зачем, цель

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

Для кого, целевая аудитория

Люди в возрасте от 18-ти до 60-ти лет, активные пользователи мобильных телефонов и Интернета, которым периодическу нужна помощь репетитора в обучении.

Бизнес-требования к продукту

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

Исследования

Анализ конкурентов

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

Идём в поисковик и ищем сайты по прямому запросу.

UX-дизайн для сервиса по подбору репетитора 1

Отобрал 12 сайтов-конкурентов. Я ставлю перед собой задачу пройти путь клиента и посмотреть:

  • было ли мне комфортно?
  • решил ли я свою задачу?

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

UX-дизайн для сервиса по подбору репетитора 2

Внутри страниц скриншоты элементов, блоков, страниц и вывод по ним. То, что мне показалось удобным или неудобным.

UX-дизайн для сервиса по подбору репетитора 3
UX-дизайн для сервиса по подбору репетитора 4

Собрал все минус и плюсы списком, чтобы удобнее было ориентироваться

UX-дизайн для сервиса по подбору репетитора 5

Интервью

Вопросы для интервью

UX-дизайн для сервиса по подбору репетитора 6

Было проведено 5 интервью. Созванивались по телефону, в зуме или переписывались в чате. Результат по каждому интервьюеру:

UX-дизайн для сервиса по подбору репетитора 7

Опрос

Кроме анализа конкурентов и интервью, я создал опрос в гугл формах и разместил попросил своих подписчиков ответить на 4 вопроса.

UX-дизайн для сервиса по подбору репетитора 8

Анализ ответов на опрос

Всего было 22 ответа.

Выводы:

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

Общие проблемы:

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

Полевые исследования

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

Проверяли тестом на 25 вопросов из простой грамматики, не удосужившись, какие цели у меня есть. Потому что моя реальная цель — разговаривать.

Группа была разрозненной, было куча новичков, я сидел там и скучал, потому что информация уже мне была известна. Я быстро отвечал на простой для меня вопрос и сидел ждал минут 10 остальных.

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

Отключился от урока минут через 15, поняв, что я больше жду, чем отвечаю.

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

Систематизация и анализ полученных данных

Профили пользователей

UX-дизайн для сервиса по подбору репетитора 12

Customer Journey Map

UX-дизайн для сервиса по подбору репетитора 13

Анализ проблем и генерация идей

По каждой проблеме из CJM прописал решения в виде карты Xmind.

UX-дизайн для сервиса по подбору репетитора 14

Требования и ценность

Функциональные требования

UX-дизайн для сервиса по подбору репетитора 15

Технические требования и ограничения

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

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

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

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

Не должно быть всплывающих чатов и окон

Переход на карточку при клике на всю карточку репетитора

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

Возможность сделать возврат за с момента оплаты и за сутки до начала урока.

Ценность продукта

Что: Веб-сервис для поиска репетитора.

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

Как: Сайт, где можно найти и выбрать репетитора писать,

User Flow

Прописал пользовательский сценарий, где точка старта это поиск через поисковик, а конец — отправка отзыва. Синим пометил те элементы, где наш продукт, сайт, непосредственно влияет на решение задачи.

UX-дизайн для сервиса по подбору репетитора 16

Структура страниц

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

UX-дизайн для сервиса по подбору репетитора 17

Прототип

На основании исследования разработал прототип страницы. Учёл ошибки и правильные решения конкурентов, пожелания реальных пользователей из ин. В конце страницы вы можете

UX-дизайн для сервиса по подбору репетитора 18

Кликабельный прототип

UI/UX дизайн для сервиса FnBook

Ко мне обратился основатель сервиса FnBook Дмитрий Масланов. Он пришёл с задачей создания сервиса для фанфиков.

Фанфики — любительское сочинение по мотивам кинофильмов, телесериалов, аниме, комиксов, компьютерных игры. Авторами как правило, становятся поклонники оригинальных произведений. Обычно фанфики создаются на некоммерческой основе и для чтения другими поклонниками.

Описание задачи

Задача

Спроектировать веб-сервис с помощью которого человек может читать и писать фанфики.

Зачем, цель

Сделав удобный веб-сервис мы помогаем легко и просто читать и делиться с другими произведениями. Заработок сервиса строится на платных функциях. Если учтём проблемы и исправим их в нашем сервисе — привчлемём больше бользователей и больше заработаем.

Для кого, целевая аудитория

Люди в возрасте от 14-ти до 50-ти лет, активные пользователи мобильных телефонов и Интернета, которым хочется прочитать сочинения по темам любимых произведений или поделиться своим произведением.

Бизнес-требования к продукту

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

Исследования

Исследование в этом проекте проходили в 4 этапа: анализ конкурентов, опрос пользователей, интервью, сбор отзывов с сайтов-агрегаторов.

Анализ конкурентов

Прежде чем пытаться разработать какое-то решение — нужно посмотреть, что сделали конкуренты. В процессе анализа постараться объективно оценить хорошие решения и ошибки.

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

По каждому конкуренту составил заметки с хорошими решениями и ошибками.

UI/UX дизайн для сервиса FnBook 19

Опрос

Для опроса я создал анкету из 6 ответов. В создании вопросов для опроса главное уместить важные вопросы в 3−6 вопросов. Часть простых, часть открытых, чтобы пользователи могли бы рассказать свое видение и подсказать нам направление в работе.

Создал форму в Google Forms.

UI/UX дизайн для сервиса FnBook 20

Для привлечения аудитории к опросу использовал рекламу Вконтакте. Подобрал изображения, написал текст и начал откручивать рекламу. Использовал героев популярных вселенных. Хотя на последнем изображении я явно схалтурил — Фродо или Гендальф подошли бы лучше 🙂

UI/UX дизайн для сервиса FnBook 21

Потратил 100 рублей, получил 81 переход и 29 ответов на анкету, развернутые ответы ниже.

Ответы на вопросы

UI/UX дизайн для сервиса FnBook 22
UI/UX дизайн для сервиса FnBook 23

Интервью

Для интервью я нашёл 5 человек. Все они проводят много времени на сайтах с фанфиками. Кто-то написал много фанфиков, кто-то прочитал и оценил. С некоторым общался созвонившись, с другими в чате.

UI/UX дизайн для сервиса FnBook 24
UI/UX дизайн для сервиса FnBook 25
UI/UX дизайн для сервиса FnBook 26

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

UI/UX дизайн для сервиса FnBook 27
UI/UX дизайн для сервиса FnBook 28
UI/UX дизайн для сервиса FnBook 29

Все вместе

Я собрал все ответы, со всех интревью и опросов и собрал их в заметке. Поделил на пользователей и авторов.

User flow

Составил User Flow на 2 основные задачи: прочитать фанфик и написать фанфик.

UI/UX дизайн для сервиса FnBook 30

Структура сайта

Составил структуру всех страниц и элементов, которые помогут в решении задач из User Flow. На основани анализа конкурентов, опроса и интервью, снабдил структуру элементами, которые нужны пользователям.

UI/UX дизайн для сервиса FnBook 31
UI/UX дизайн для сервиса FnBook 32

Зарисовки дизайна

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

UI/UX дизайн для сервиса FnBook 33

Прототип

UI/UX дизайн для сервиса FnBook 34
UI/UX дизайн для сервиса FnBook 35

Дизайн

UI/UX дизайн для сервиса FnBook 36

Было отрисовано порядочно интерфейсных деталей

UI/UX дизайн для сервиса FnBook 37
UI/UX дизайн для сервиса FnBook 38

Кликабельный прототип

Разрабтал кликабельный прототип в Figme, чтобы можно было протестировать всё на этапе прототипирования.

Desktop-версия

Mobile-версия