Сайт-блог для компании GetTech Петра Петипака

Задача

Разработать сайт-блог из 3 страниц: главная, категория, страница статьи. Петр будет собирать авторов, а они будут писать статьи на тему Геткурса.

Сайт должен разделяться на статьи для предпринимателей и технических специалистов.

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

Прототип

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

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

Сайт-блог для компании GetTech Петра Петипака 1

Дизайн

Разработали дизайн исходя из пожеланий клиента, с цветами из логотипа.

Сайт-блог для компании GetTech Петра Петипака 2
Сайт-блог для компании GetTech Петра Петипака 3
Сайт-блог для компании GetTech Петра Петипака 4

Баннеры

Разработал два вида баннеров.

Одна группа баннеров для рекламы услуг, сервисов от компании GetTech.

Другая группа баннеров для рекламы продуктов от авторов статей. Когда авторы будут приглашать на свой курс или вебинар.

Различие было создано, чтобы пользователи могли отличить предложения от GetTech и от авторов статьи.

Сайт-блог для компании GetTech Петра Петипака 5
Сайт-блог для компании GetTech Петра Петипака 6

Мобильная версия

Сайт-блог для компании GetTech Петра Петипака 7

UI-кит

Разработал UI-кит для дизайнеров и верстальщиков. Чтобы дизайнеры и верстальщики имели все состояния элементов и согласовывали внешний вид элементов.

Также созданы компоненты для быстрого создания дизайна дополнительных страниц.

Сайт-блог для компании GetTech Петра Петипака 8

Поведение

Расписал поведение элементов, где и как они используются. Также добавил комментарии относительно кода. Я сам был верстальщиком и знаю нюансы верстки, которые помогут улучшить удобство.

Для типографики расписал размер шрифта, межстрочные интервалы, вид подписей и списков.

Сайт-блог для компании GetTech Петра Петипака 9

Дизайн админ-панели для курса Город фотографий

О проекте

Студия Солнышко123 упаковывала эксперта. Для курса им нужно было создать админ-панель, в которой можно было бы:

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

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

Задача

Разработать дизайн админ-панели.

Результат

Дизайн

Дизайн админ-панели для курса Город фотографий 10
Главная страница
Дизайн админ-панели для курса Город фотографий 11
Страница «Сообщение»
Дизайн админ-панели для курса Город фотографий 12
Страница «Мини-чат»

UI-кит

Разработал для верстальщика UI-кит, где лежат все состояния компонентов. Так верстальщик будет знать, какие состояния прописать в коде.

Дизайн админ-панели для курса Город фотографий 13

ТЗ для верстальщика

Кроме UI-кита написал ТЗ для верстальщика, где описал подход к верстк, стэк технологий и поведение элементов.

Дизайн админ-панели для курса Город фотографий 14

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

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

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

Задача

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

Зачем, цель

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Интервью

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

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

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

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

Опрос

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

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

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

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

Выводы:

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

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

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

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

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

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

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

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

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

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

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

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

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

Customer Journey Map

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

User Flow

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

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

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

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

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

Прототип

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

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

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

Разработка дизайна сайта FnBook, UX/UI

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

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

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

Задача

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

Зачем, цель

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

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

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

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

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

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

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

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

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

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

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

Разработка дизайна сайта FnBook, UX/UI 30

Опрос

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

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

Разработка дизайна сайта FnBook, UX/UI 31

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

Разработка дизайна сайта FnBook, UX/UI 32

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

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

Разработка дизайна сайта FnBook, UX/UI 33
картинка для сервиса FnBook

Интервью

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

Разработка дизайна сайта FnBook, UX/UI 34
Разработка дизайна сайта FnBook, UX/UI 35
Разработка дизайна сайта FnBook, UX/UI 36

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

Разработка дизайна сайта FnBook, UX/UI 37
Разработка дизайна сайта FnBook, UX/UI 38
Разработка дизайна сайта FnBook, UX/UI 39

Все вместе

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

User flow

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

Разработка дизайна сайта FnBook, UX/UI 40

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

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

Разработка дизайна сайта FnBook, UX/UI 41
картинка для сервиса FnBook

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

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

Разработка дизайна сайта FnBook, UX/UI 42

Прототип

Разработка дизайна сайта FnBook, UX/UI 43
Разработка дизайна сайта FnBook, UX/UI 44

Дизайн

Разработка дизайна сайта FnBook, UX/UI 45

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

Разработка дизайна сайта FnBook, UX/UI 46
Разработка дизайна сайта FnBook, UX/UI 47

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

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

Desktop-версия

Mobile-версия