Разработать сайт-блог из 3 страниц: главная, категория, страница статьи. Петр будет собирать авторов, а они будут писать статьи на тему Геткурса.
Сайт должен разделяться на статьи для предпринимателей и технических специалистов.
Стиль должен быть нейтральный, светлый, с небольшими акцентными цветами из логотипа.
Прототип
Прежде чем разрабатывать дизайн, я разрабатываю структуру сайта и мы обсуждаем это с клиентом. Это нужно для минимизации правок и ускорения работы.
Прототип разрабатывается схематично, чтобы утвердить направление.
Дизайн
Разработали дизайн исходя из пожеланий клиента, с цветами из логотипа.
Баннеры
Разработал два вида баннеров.
Одна группа баннеров для рекламы услуг, сервисов от компании GetTech.
Другая группа баннеров для рекламы продуктов от авторов статей. Когда авторы будут приглашать на свой курс или вебинар.
Различие было создано, чтобы пользователи могли отличить предложения от GetTech и от авторов статьи.
Мобильная версия
UI-кит
Разработал UI-кит для дизайнеров и верстальщиков. Чтобы дизайнеры и верстальщики имели все состояния элементов и согласовывали внешний вид элементов.
Также созданы компоненты для быстрого создания дизайна дополнительных страниц.
Поведение
Расписал поведение элементов, где и как они используются. Также добавил комментарии относительно кода. Я сам был верстальщиком и знаю нюансы верстки, которые помогут улучшить удобство.
Для типографики расписал размер шрифта, межстрочные интервалы, вид подписей и списков.
Это учебный проект курса UX в Tilda School, на котором я опробовал все знания, которые получил на курсе.
Описание задачи
Задача
Спроектировать веб-сервис с помощью которого человек может выбрать для себя репетитора для обучения(по нужной теме).
Зачем, цель
Сделав удобный веб-сервис мы помогаем легко и просто выбрать репетитора, при этом будем получать процент с оплаты за обучение.
Для кого, целевая аудитория
Люди в возрасте от 18-ти до 60-ти лет, активные пользователи мобильных телефонов и Интернета, которым периодическу нужна помощь репетитора в обучении.
Бизнес-требования к продукту
пользователи должны иметь возможность искать репетитора по теме;
пользователи должны иметь возможность получить всю необходимую информацию о репетиторе:
имя, фамилия;
опыт;
стоимость;
отзывы.
Исследования
Анализ конкурентов
Прежде чем начать разрабатывать собственное решение — нужно посмотреть что сделали конкуренты: сильные и слабые стороны. Углубиться в тему этой области и попробовать побыть клиентом.
Идём в поисковик и ищем сайты по прямому запросу.
Отобрал 12 сайтов-конкурентов. Я ставлю перед собой задачу пройти путь клиента и посмотреть:
было ли мне комфортно?
решил ли я свою задачу?
После 5 часов анализа были составлены десятки хороших и плохих решений. На их основе уже стало понятно, что делать можно, а от чего лучше отказаться. Как надо, и как не надо делать сайт по поиску репетитора.
Внутри страниц скриншоты элементов, блоков, страниц и вывод по ним. То, что мне показалось удобным или неудобным.
Собрал все минус и плюсы списком, чтобы удобнее было ориентироваться
Интервью
Вопросы для интервью
Было проведено 5 интервью. Созванивались по телефону, в зуме или переписывались в чате. Результат по каждому интервьюеру:
Опрос
Кроме анализа конкурентов и интервью, я создал опрос в гугл формах и разместил попросил своих подписчиков ответить на 4 вопроса.
Анализ ответов на опрос
Всего было 22 ответа.
Выводы:
Большая часть пользователей ищет репетитора с компьютера.
Чаще люди ищут репетиторов среди знакомых и друзей, второе по популярности — поисковик и сайты.
Важнейшие критерии отбора: отзывы, цена.
Общие проблемы:
Не хватает информации о репетиторе
Недостаточно точный фильтр, которые не позволяет узко отфильтровать репетиторов
Не нравится, когда нельзя узнать цену сразу, а только после того, как оставишь заявку
Нет мобильной версии сайта
Нет расписания
После регистрации в сервисе начинают звонить и спамить на почту
Медленная скорость сайта
Полевые исследования
Оставил заявку на сайте на пробный урок. Сотрудник в мессенджере отправил ссылку на тест знания английского языка.
Проверяли тестом на 25 вопросов из простой грамматики, не удосужившись, какие цели у меня есть. Потому что моя реальная цель — разговаривать.
Группа была разрозненной, было куча новичков, я сидел там и скучал, потому что информация уже мне была известна. Я быстро отвечал на простой для меня вопрос и сидел ждал минут 10 остальных.
Мы зачем-то изучали все народы и их традиции. По моему мнению это было излишним, грузить такой информацией, когда проверяешь уровень.
Отключился от урока минут через 15, поняв, что я больше жду, чем отвечаю.
Вывод: школе надо было выяснить мою цель изучения, мой уровень исходя из цели и только потом определять меня в группу. Группа должна быть собрана из людей с примерно одинаковым уровнем и тема должна быть релевантна цели.
Систематизация и анализ полученных данных
Профили пользователей
Customer Journey Map
Анализ проблем и генерация идей
По каждой проблеме из CJM прописал решения в виде карты Xmind.
Требования и ценность
Функциональные требования
Технические требования и ограничения
Сайт должен хорошо отображаться на мобильных, так как большая часть пользователей пользуется сайтами с мобильных.
Видео с презентацией репетитора на мобильных должны включаться только по клику, чтобы не расходовать трафик пользователя.
Видео-презентация на ПК должна включаться без звука с иконкой включения звука, чтобы не раздражать пользователя сторонним и неожиданным звуков.
Отзывы на сайте должны быть снабжены ссылками на соц. сеть или контакт ученика, чтобы их можно было подтвердить
Не должно быть всплывающих чатов и окон
Переход на карточку при клике на всю карточку репетитора
Форма отправки обратной связи по карточке репетитора. Сделать теги: «Нужно фото», «Нужно расписание», «Нужна видео-презентация». Чтобы репетитора в личку задалбывало и он видел, сколько теряет клиентов.
Возможность сделать возврат за с момента оплаты и за сутки до начала урока.
Ценность продукта
Что: Веб-сервис для поиска репетитора.
Для кого: Люди, которые заинтересованы в получении и применении знаний для себя или своих близких.
Как: Сайт, где можно найти и выбрать репетитора писать,
User Flow
Прописал пользовательский сценарий, где точка старта это поиск через поисковик, а конец — отправка отзыва. Синим пометил те элементы, где наш продукт, сайт, непосредственно влияет на решение задачи.
Структура страниц
В xmind создал структуру будущего сайта. Синим пометил ключевые элементы, которые влияют на конверсию сайта.
Прототип
На основании исследования разработал прототип страницы. Учёл ошибки и правильные решения конкурентов, пожелания реальных пользователей из ин. В конце страницы вы можете
Ко мне обратился основатель сервиса FnBook Дмитрий Масланов. Он пришёл с задачей создания сервиса для фанфиков.
Фанфики — любительское сочинение по мотивам кинофильмов, телесериалов, аниме, комиксов, компьютерных игры. Авторами как правило, становятся поклонники оригинальных произведений. Обычно фанфики создаются на некоммерческой основе и для чтения другими поклонниками.
Описание задачи
Задача
Спроектировать веб-сервис с помощью которого человек может читать и писать фанфики.
Зачем, цель
Сделав удобный веб-сервис мы помогаем легко и просто читать и делиться с другими произведениями. Заработок сервиса строится на платных функциях. Если учтём проблемы и исправим их в нашем сервисе — привчлемём больше бользователей и больше заработаем.
Для кого, целевая аудитория
Люди в возрасте от 14-ти до 50-ти лет, активные пользователи мобильных телефонов и Интернета, которым хочется прочитать сочинения по темам любимых произведений или поделиться своим произведением.
Бизнес-требования к продукту
пользователи должны иметь возможность читать фанфики; ставить лайки и голосовать за них.
пользователи должны иметь возможность писать фанфики и общаться с аудиторией
Исследования
Исследование в этом проекте проходили в 4 этапа: анализ конкурентов, опрос пользователей, интервью, сбор отзывов с сайтов-агрегаторов.
Анализ конкурентов
Прежде чем пытаться разработать какое-то решение — нужно посмотреть, что сделали конкуренты. В процессе анализа постараться объективно оценить хорошие решения и ошибки.
Клиент предоставил список конкурентов, которые заняли рынок и на которых стоит обратить внимание.
По каждому конкуренту составил заметки с хорошими решениями и ошибками.
Опрос
Для опроса я создал анкету из 6 ответов. В создании вопросов для опроса главное уместить важные вопросы в 3−6 вопросов. Часть простых, часть открытых, чтобы пользователи могли бы рассказать свое видение и подсказать нам направление в работе.
Создал форму в Google Forms.
Для привлечения аудитории к опросу использовал рекламу Вконтакте. Подобрал изображения, написал текст и начал откручивать рекламу. Использовал героев популярных вселенных. Хотя на последнем изображении я явно схалтурил — Фродо или Гендальф подошли бы лучше 🙂
Потратил 100 рублей, получил 81 переход и 29 ответов на анкету, развернутые ответы ниже.
Ответы на вопросы
Интервью
Для интервью я нашёл 5 человек. Все они проводят много времени на сайтах с фанфиками. Кто-то написал много фанфиков, кто-то прочитал и оценил. С некоторым общался созвонившись, с другими в чате.
Один из опытных авторов фикбука общался со мной примерно 40 минут и дал много детальной информации: замечания, идеи, одобрение функций. Просто нужно спросить и слушать.
Все вместе
Я собрал все ответы, со всех интревью и опросов и собрал их в заметке. Поделил на пользователей и авторов.
User flow
Составил User Flow на 2 основные задачи: прочитать фанфик и написать фанфик.
Структура сайта
Составил структуру всех страниц и элементов, которые помогут в решении задач из User Flow. На основани анализа конкурентов, опроса и интервью, снабдил структуру элементами, которые нужны пользователям.
Зарисовки дизайна
Перед созданием прототипа набросал скетчи на бумаге, чтобы уже на этом этапе понять как выстраивать структуру.
Прототип
Дизайн
Было отрисовано порядочно интерфейсных деталей
Кликабельный прототип
Разрабтал кликабельный прототип в Figme, чтобы можно было протестировать всё на этапе прототипирования.