Разработка дизайна сайта FnBook, UX/UI
Ко мне обратился основатель сервиса FnBook Дмитрий Масланов. Он пришёл с задачей создания сервиса для фанфиков.
Фанфики — любительское сочинение по мотивам кинофильмов, телесериалов, аниме, комиксов, компьютерных игры. Авторами как правило, становятся поклонники оригинальных произведений. Обычно фанфики создаются на некоммерческой основе и для чтения другими поклонниками.
Описание задачи
Задача
Спроектировать веб-сервис с помощью которого человек может читать и писать фанфики.
Зачем, цель
Сделав удобный веб-сервис мы помогаем легко и просто читать и делиться с другими произведениями. Заработок сервиса строится на платных функциях. Если учтём проблемы и исправим их в нашем сервисе — привчлемём больше бользователей и больше заработаем.
Для кого, целевая аудитория
Люди в возрасте от 14-ти до 50-ти лет, активные пользователи мобильных телефонов и Интернета, которым хочется прочитать сочинения по темам любимых произведений или поделиться своим произведением.
Бизнес-требования к продукту
- пользователи должны иметь возможность читать фанфики; ставить лайки и голосовать за них.
- пользователи должны иметь возможность писать фанфики и общаться с аудиторией
Исследования
Исследование в этом проекте проходили в 4 этапа: анализ конкурентов, опрос пользователей, интервью, сбор отзывов с сайтов-агрегаторов.
Анализ конкурентов
Прежде чем пытаться разработать какое-то решение — нужно посмотреть, что сделали конкуренты. В процессе анализа постараться объективно оценить хорошие решения и ошибки.
Клиент предоставил список конкурентов, которые заняли рынок и на которых стоит обратить внимание.
По каждому конкуренту составил заметки с хорошими решениями и ошибками.
![Разработка дизайна сайта FnBook, UX/UI 1 Разработка дизайна сайта FnBook, UX/UI 1](https://dev-postnov.ru/wp-content/uploads/2022/03/fanfic-demo-concurent.gif)
Опрос
Для опроса я создал анкету из 6 ответов. В создании вопросов для опроса главное уместить важные вопросы в 3−6 вопросов. Часть простых, часть открытых, чтобы пользователи могли бы рассказать свое видение и подсказать нам направление в работе.
Создал форму в Google Forms.
![Разработка дизайна сайта FnBook, UX/UI 2 Разработка дизайна сайта FnBook, UX/UI 2](https://dev-postnov.ru/wp-content/uploads/2022/03/image-14.png)
Для привлечения аудитории к опросу использовал рекламу Вконтакте. Подобрал изображения, написал текст и начал откручивать рекламу. Использовал героев популярных вселенных. Хотя на последнем изображении я явно схалтурил — Фродо или Гендальф подошли бы лучше 🙂
![Разработка дизайна сайта FnBook, UX/UI 3 Разработка дизайна сайта FnBook, UX/UI 3](https://dev-postnov.ru/wp-content/uploads/2022/03/fn-book-case-survey-ads-banners-ru.jpg)
Потратил 100 рублей, получил 81 переход и 29 ответов на анкету, развернутые ответы ниже.
Ответы на вопросы
![Разработка дизайна сайта FnBook, UX/UI 4 Разработка дизайна сайта FnBook, UX/UI 4](https://dev-postnov.ru/wp-content/uploads/2022/03/fn-book-case-survey-all-ru-1.jpg)
![Разработка дизайна сайта FnBook, UX/UI 5 картинка для сервиса FnBook](https://dev-postnov.ru/wp-content/uploads/2022/03/aditya-vyas-5qujfo4nu4o-unsplash.jpg)
Интервью
Для интервью я нашёл 5 человек. Все они проводят много времени на сайтах с фанфиками. Кто-то написал много фанфиков, кто-то прочитал и оценил. С некоторым общался созвонившись, с другими в чате.
![Разработка дизайна сайта FnBook, UX/UI 6 Разработка дизайна сайта FnBook, UX/UI 5](https://dev-postnov.ru/wp-content/uploads/2022/03/image-17.png)
![Разработка дизайна сайта FnBook, UX/UI 7 Разработка дизайна сайта FnBook, UX/UI 6](https://dev-postnov.ru/wp-content/uploads/2022/03/image-16.png)
![Разработка дизайна сайта FnBook, UX/UI 8 Разработка дизайна сайта FnBook, UX/UI 7](https://dev-postnov.ru/wp-content/uploads/2022/03/image-18.png)
Один из опытных авторов фикбука общался со мной примерно 40 минут и дал много детальной информации: замечания, идеи, одобрение функций. Просто нужно спросить и слушать.
![Разработка дизайна сайта FnBook, UX/UI 9 Разработка дизайна сайта FnBook, UX/UI 8](https://dev-postnov.ru/wp-content/uploads/2022/03/image-19.png)
![Разработка дизайна сайта FnBook, UX/UI 10 Разработка дизайна сайта FnBook, UX/UI 9](https://dev-postnov.ru/wp-content/uploads/2022/03/image-20.png)
![Разработка дизайна сайта FnBook, UX/UI 11 Разработка дизайна сайта FnBook, UX/UI 10](https://dev-postnov.ru/wp-content/uploads/2022/03/image-21.png)
Все вместе
Я собрал все ответы, со всех интревью и опросов и собрал их в заметке. Поделил на пользователей и авторов.
User flow
Составил User Flow на 2 основные задачи: прочитать фанфик и написать фанфик.
![Разработка дизайна сайта FnBook, UX/UI 12 Разработка дизайна сайта FnBook, UX/UI 11](https://dev-postnov.ru/wp-content/uploads/2022/03/20220327150158.png)
Структура сайта
Составил структуру всех страниц и элементов, которые помогут в решении задач из User Flow. На основани анализа конкурентов, опроса и интервью, снабдил структуру элементами, которые нужны пользователям.
![Разработка дизайна сайта FnBook, UX/UI 13 Разработка дизайна сайта FnBook, UX/UI 12](https://dev-postnov.ru/wp-content/uploads/2022/03/20220327150402.png)
![Разработка дизайна сайта FnBook, UX/UI 14 картинка для сервиса FnBook](https://dev-postnov.ru/wp-content/uploads/2022/03/gracia-dharma-qtlbo6mkqh0-unsplash-1.jpg)
Зарисовки дизайна
Перед созданием прототипа набросал скетчи на бумаге, чтобы уже на этом этапе понять как выстраивать структуру.
![Разработка дизайна сайта FnBook, UX/UI 15 Разработка дизайна сайта FnBook, UX/UI 13](https://dev-postnov.ru/wp-content/uploads/2022/03/sketch-fnbook.jpg)
Прототип
![Разработка дизайна сайта FnBook, UX/UI 16 Разработка дизайна сайта FnBook, UX/UI 14](https://dev-postnov.ru/wp-content/uploads/2022/03/fnbook-protorype.jpg)
![Разработка дизайна сайта FnBook, UX/UI 17 Разработка дизайна сайта FnBook, UX/UI 15](https://dev-postnov.ru/wp-content/uploads/2022/03/mobile-prototype-fn-book.jpg)
Дизайн
![Разработка дизайна сайта FnBook, UX/UI 18 Разработка дизайна сайта FnBook, UX/UI 16](https://dev-postnov.ru/wp-content/uploads/2022/03/fnbook-design-case-pc.jpg)
Было отрисовано порядочно интерфейсных деталей
![Разработка дизайна сайта FnBook, UX/UI 19 Разработка дизайна сайта FnBook, UX/UI 17](https://dev-postnov.ru/wp-content/uploads/2022/03/fn-book-interface-detail.jpg)
![Разработка дизайна сайта FnBook, UX/UI 20 Разработка дизайна сайта FnBook, UX/UI 18](https://dev-postnov.ru/wp-content/uploads/2022/03/mobile-design-fn-book.jpg)
Кликабельный прототип
Разрабтал кликабельный прототип в Figme, чтобы можно было протестировать всё на этапе прототипирования.
Desktop-версия
Mobile-версия