1 июня к нам обратился Сергей Прохоров с задачей по редизайну сайта Frontliner.
Задача
Сделать редизайн 4 страниц: главная, кейсы, подверждение квалификации, стать экспертом.
Сергей рассказал, что в компании приняли решение обновить дизайн страницы. Дизайн устарел, стал скучным, «шаблонным». Его делали с помощью стандартных блоков. Frontliner сделать его более современным, ярким, запоминающимся.
Главная страница
На главной страницы мы убрали несколько блоков, которые не несли большой смысловой нагрузки. Оставили самые важные блоки.
Дизайн до
Cкриншот старой главной страницы
Дизайн после
Кейсы
На странице кейсов придали блокам больше индивидуальности, чтобы по цветам, фирменным элементам можно было сразу узнать компанию.
Петр Петипак обратился с задачей обновить дизайна сайта. Предыдущий вариант был собран на коленке и уже не подходил под солидность бренда«Магия Геткурса».
В мае 2022 года ко мне обратился операционный директор Animation School. Они хотели изменить текущий сайт, так как было ощущение, что сайт уже устарел и не такой удобный, как у конкурентов.
Мы долго обсуждали задачу и пришли к нескольким этапам работы:
Исследование, чтобы понимать, что нужно менять и как улучшить пользовательский опыт
Дизайн сайта
Верстка сайта
Программирование сайта в CMS
Текущий сайт у клиента на Wordpress. Мы планировали делать редизайн сайта на Тильду, потому что это дешевле, быстрее и проще в работе. Но у клиента сильная привязка к SEO, а переезд на другую платформу требовал привелечения сторонних специалистов и примерно 100 тысяч бюджета на перенос seo и докупку ссылок для поднятия в выдаче. Поэтому решили остаться пока на Wordpress.
Исследование
Чтобы понять, в какую сторону делать редизайн, нужно разобраться, как сейчас пользователи пользуются сайтом, что сильного они видят в школе, что им нужно на страницах и что хотят от сайта владельцы.
Чтобы понять, что хотят владельцы, я составил список требований бизнеса, целей и ЦА продукта на основании информации брифинга и утвердил это с клиентом.
Помимо конверсионных целей, есть цель развивать блог и удерживать там пользователей.
Анализ конкурентов
Чтобы понять, что в нашем сайте хорошо и что плохо — надо проанализировать текущий сайт и сходить к конкурентам. Даже сторонний пользователь как я все равно понял, где и что удобнее.
Для дизайнера важно развить эмпатию и я представлял себя на месте ученика, который хочет обучиться анимации. Для меня это не сложно — я тоже прохожу курсы по дизайну, маркетингу и могу понять, где и что меня цепляет.
Страница с удачными и неудачными решениями по каждому конкуренту
После анализа каждого сайта я бережно собрал все удачные и неудачные по моему мнению решения в отдельные страницы.
Интервью с учениками и командой
Для понимания пользователей нужно с ними пообщаться. Я попросил команду предоставить мне контакты пользователей, которые готовы обсудить сайт и обучение.
Я составил список вопросов и связывался с каждым, как ему удобнее: созванивался, общался в чате, обменивался голосовыми сообщениями.
Вот такой список вопросов был для учеников
Общение с учениками
После интервью создал отдельную страницу и собрал все ответы учеников
Кроме учеников мне были интересна и команда школы. Ведь после сайта ученики оказываются в контакте с ними. Я предположил, что после попадания на курс люди могут задавать одни и те же вопросы, ответы которые они не нашли на сайте.
Ответив на них мы сможем снять нагрузку с преподавателей, а может быть и снизить количество возвратов.
Я не ошибся, я нашел эти вопросы и обязательно уделю им внимание на этапе дизайна сайта.
Ответы команды
После всех интервью важно было собрать информацию в единое пространство, откуда в дальнейших шагах исследования можно брать информацию
Итог интервью
CJM
Чтобы понять как можно улучшить сайт, мы должны проанализировать шаги пользователя от появления идео об обучении до попадания на сайт и до конверсионного действия.
У нас получилось 6 шагов:
Мотивация
Поиск в интернете
Поисковик
Соц.сети
Сравнение с другими школами
Проверка школы
Переход на сайт
Оценка курса
Оплата
Как это выглядит
На каждом шаге мы расписываем цель, ожидания, действия и проблемы пользователя. В самом низу написал идеи по исправлению проблем.
User Flow
Юзерфлоу позволяет нам понять путь пользователя. Я, директор или владелец могут понимать, как пользователь передвигается по сайту, что смотрит. Но пока эти данные не выписаны, они так и остаются догадками в головах людей.
Когда мы выписываем каждый шаг, тогда начинается аналитическая работа по проработке удобства каждого шага.
Сначала нужно понять цели пользователей, их может быть несколько. Первая — записаться на курс. Вторая — получить бесплатный контент.
По этим двум целям мы должны выстроить шаги и понять, как пользователь идет к этим целям. Потом мы сможем построить воронку исходя из целей пользователя и целей бизнеса.
Userflow по записи на курс
Описание пути пользователя нужно для того, чтобы понять как пользователь проходит свой путь от посещения сайта до записи на курс.
Путь был записан и систематизирован исходя из интервью с респондентами.
Это важно, потому что на каждом шаге нам нужно сделать сайт более удобным и функциональным, чтобы он помог пользователю в понимании страниц и достижения целей.
UserFlow в программе Xmind
Userflow по контенту
Второй путь пользователя был составлен для блога. Нужно было разобрать каждый шаг и придумать как мы будем вести пользователю по блогу и статьям.
Анализ проблем и генерация идей
На основании интервью проанализировал все проблемы и придумал решения, которые можно отразить в структуре и дизайне.
Выводы
После всех этапов ux-исследования собрал все сведения в одном месте и написал итоговый результат исследования.
Прототип и текст
Чтобы было понимание как и где должны располагаться разные элементы сайта, нужно было создать прототип и прописать весь текст
Я разработал прототип для каждой страницы и написал текст, исходя из посылов блоков и страниц.
Дизайн
По прототипу и имеющемуся фирменному стилю был разработан дизайн 14 страниц сайта
Мобильная версия
Для каждой из страниц был разработан мобильный вид страницы
UI-кит, дополнительные элементы
Чтобы разработчикам проще было работать и время не тратилось на объяснение что и как работает, мы разработали UI-кит, в котором отображены все элементы и их поведение.
Школа Animation School запускает поддержку начинающих специалистов по анимации. Не знаешь как решить проблему → можно просто спросить у специалистов в индустрии.
Задача
Разработать сайт из 6 блоков в стилистике сайта. Клиент предоставил готовые цвета, структуру сайта и изображение персонажа школы.
У клиента было мало времени, всего 7 дней. Главная задача — успеть к сроку, не проседая в качестве.
Решение
Разработали дизайн лендинга из 6 блоков и сверстали на тильде за неделю. Добавили анимации, сделали мобильную версию, подключили домен и запустили в срок
Remake — продукт для готового оформления GetCourse. Команда увидела, что школы заказывают одно и тоже и решила сделать шаблон, который можно поставить за 3 дня. Помогли 24 школам преобразить свои личные кабинеты на GetCourse.
Задача
Обновить сайт для продукта Remake — готового оформления для школ на Геткурсе. Старый сайт не показывал продукт достаточно хорошо и у пользователей оставалась куча вопросов.
Лиды не понимали продукт. Приходилось делать отдельные презентации и объяснять на созвонах. Некоторые не понимали, что можно заказать уникальный дизайн и уходили к конкурентам.
Что сделали
Написали структуру
Написали тексты
Продумали погружение и понимание продукта
Задизайнили обложки
Создали дизайн сайта
Заверстали на Тильде
Прикрутили анимацию
Настроили цели
Структура
Начали составлять структуру исходя из анализа лидов и их вопросов. Все, что волновало пользователей — теперь на сайте. Раньше пользователи спрашивали о количестве страниц оформления, узнавали как устаналивается шаблон, спрашивали про уникальное оформление. Теперь все ответы на вопросы содержатся на сайте.
Блоки сайта
Первый блок — чтобы было понятно, куда попали и что предлагают.
Как будет выглядеть школа — сразу показываем дизайн, который будет после установки.
Можно ли изменить — за показом шаблонного дизайна сразу закрываем вопрос про изменения, надо показать, что менять шаблон можно точечными правками.
Наши клиенты — показываем с кем работали, чтобы покупатель понимал уровень клиентов готового оформления и это вызвало доверие.
Почему работать нужно с нами — надо показать не просто«мы крутые», а объяснить реальные отличия от конкурентов, чтобы пользователь сам себе сказал: «емае, да они крутые!».
Детали продукта — важно показать, что продукт не просто меняет цвета, а добавляет удобство. В Геткурсе много проблем и одним визуалом его не изменить. Поэтому в этом блоке надо показать как продукт решает пролему удобства.
Кейсы с готовым оформлением — показываем как выглядят кейсы, которые купили готовое оформление и сильно его не меняли.
Установка шаблона — показываем видео одного из основателей. Где он показывает установку Ремейка. В Геткурс-тусовке важны сроки. Часто владельцы приходят за дизайном, когда через неделю запуск. Этим блоком показываем, что мы можем сделать это быстро.
Тарифы — после всего что показали, предлагаем сделку. Показываем тарифы.
Триггерный блок уникального дизайна — вдруг человеку нужен уникальный дизайн? Говорим об этом сразу под тарифами. Чтобы когда мысль«Блин, а мне за столько не надо, подешевле да поменьше бы» — блок тут как тут. Нет бюджета или не нужны все страницы — оставьте заявку, обсудим.
Об уникальном дизайне — показываем кейсы уникального дизайна и говорим, что у нас не только шаблоны, а еще уникальность.
Отзывы клиентов — отзывы клиентов делаем не 100 500 штук, важно не показать количество, а показать как мы работаем и результаты клиентов. Качество важнее количества.
Демо продукта — некоторые пользователи могут не доверять, пока не увидят продукт. Предлагаем оставить заявку в обмен на демо-доступ. Пользователь сможет сам зайти, потрогать продукт и решить.
Команда продукта — важно показать, что команда не вчера появилась, а ребята уже с опытом. Показываем имя, регалии, личные сайты. Чтобы можно было зайти и посмотреть, все ли хорошо.
Процесс установки школы — чтобы ввязываться в это дело, нужно понимать какие шаги идут друг за другом. Именно для этого этот блок и нужен. Рассказываем по шагам что будет, кто выдает доступы, когда платят, кто и где тестирует.
Ответы на вопросы — Геткурс и его оформление не простая ниша, могут быть вопросы. Сделали блок с ответами, чтобы не раздувать лендинг.
Триггер обращения к основателю — в конце делаем триггер«Не знаете, что выбрать?». Даем контакт основателя и предлагаем проконсультироваться.
Тексты
В предыдущих версиях сайта текст был прописан неверно. Он был слишком банальным, не затрагивал боли пользователей.
Блок из старой версии сайта
Например в блоке преимуществ для владельцев«Оформление геткурса как отстройка конкурентов» понятна каждому владельцу. Это довольно понятная вещь и каждый из исполнителей может написать это на своем сайте.
Мы решили основываться на том, какие преимущества есть конкретно у продукта, не в целом почему оформление это хорошо, а почему нужно покупать именно этот продукт.
Погружение и понимание продукта
Продукт готового оформления не самый простой. Его сложно описать в двух словах и быстро закрыть все вопросы. Поэтому нужно было погрузить посетителя в продукт. Для этого мы выбрали такие фишки.
Демо изменений
Цель: показать, что шаблон можно менять. Чуть поменял — добавил уникальности.
Что сделали: заскринили главные экраны школ-клиентов, вставили в фигму и записали гифку со сменой страниц.
Демо установки
Цель: показать, что сроки установки — не маркетиновая уловка, а реальность.
Что сделали: показали урок однго из основателей продукта. С объяснениями как ставить Ремейк видео занимает 16 минут. 3 дня на устанвоку становятся правдивее. В тексте использовали простоватую подачу. Словно берем сами себя«на слабо».
Краткость отзывов
Цель: сделать так, чтобы отзывы читали. Не просто«сделали в срок, спасибо!» и не поэмы из 10-абзацев.
Что сделали: вычитали отзывы, взяли самое важное, вытащили факты и оформили крупно.
Дизайн
При создании сайта мы сделали приняли решение делать легкий дизайн, который сделает акцент не на себе, а на продукте, потому что главный персонаж сайта — продукт. Все остальное должно быть незаметными декорациями на фоне продукта.
Дизайн сайта выделяет все самое важное и оставляет за скобками пространственные рассуждения и хваствоство. Сайт рассказыает о продукте просто и по делу. Если отзыв — то не 5 абзацев текста, а факты.
Каждый абзац текста на сайте был продуман и находится на сайте по какой-то причине. Каждая обложка преимущества или деталей продукта раскрывает текст, помогает узнать больше.
У потенциальных клиентов есть возможность посмотреть на процесс установки. Ничего не скрывается в недрах команды — установка показана стразу на странице.
Модульность блоков
Дизайн сайта выполнен в нейтральном стиле, без сильных визуальных различий в блоках. Это позволит пересобирать внутренние страницы не переделывая дизайн.
Ниже я показал, как может выглядеть страница услуги уникального оформления. Копируем почти все блоки, перетасовываем, лишние удалям. Вуа-ля, новая страница услуги за 15 минут, собранная менеджером.
Результат
Получился стильный, современный сайт, который рассказывает о продукте, минимизируя вопросы потенциальных покупателей.
Сайт попал в галерею лучших сайтов, созданных на Тильде. Нахождение в галерее лучших сайтов на Тильде деет проекту дополнительный трафик. Только за первый день сайт посетили 283 человека, пришедшие с сайта madeontilda.
Разработать сайт-блог из 3 страниц: главная, категория, страница статьи. Петр будет собирать авторов, а они будут писать статьи на тему Геткурса.
Сайт должен разделяться на статьи для предпринимателей и технических специалистов.
Стиль должен быть нейтральный, светлый, с небольшими акцентными цветами из логотипа.
Прототип
Прежде чем разрабатывать дизайн, я разрабатываю структуру сайта и мы обсуждаем это с клиентом. Это нужно для минимизации правок и ускорения работы.
Прототип разрабатывается схематично, чтобы утвердить направление.
Дизайн
Разработали дизайн исходя из пожеланий клиента, с цветами из логотипа.
Баннеры
Разработал два вида баннеров.
Одна группа баннеров для рекламы услуг, сервисов от компании GetTech.
Другая группа баннеров для рекламы продуктов от авторов статей. Когда авторы будут приглашать на свой курс или вебинар.
Различие было создано, чтобы пользователи могли отличить предложения от GetTech и от авторов статьи.
Мобильная версия
UI-кит
Разработал UI-кит для дизайнеров и верстальщиков. Чтобы дизайнеры и верстальщики имели все состояния элементов и согласовывали внешний вид элементов.
Также созданы компоненты для быстрого создания дизайна дополнительных страниц.
Поведение
Расписал поведение элементов, где и как они используются. Также добавил комментарии относительно кода. Я сам был верстальщиком и знаю нюансы верстки, которые помогут улучшить удобство.
Для типографики расписал размер шрифта, межстрочные интервалы, вид подписей и списков.
Ко мне обратился Александр Фирсов, основатель школы BlaBlaInvest. Он продает свой гайд, где рассказывает об инвестициях. Гайд называться«Метавселенским». Целевая аудитория 35+.
Проблема
Текущий сайт не отражает безумности метавселенных, не дает нужного настроя. Хочется чтобы было бодро.
Задача
Нужно подобрать несколько концептов, которые подходят под метавселенную тему, тему Алисы и какой-то спойкойный вариант.
П метвселенные, специально намешаны разные стили, галактика и портал.
Про Алису, но персонажи из других вселенных все равно просачиваются
Спокойный дизайн с зведным фоном. Подходит для спокойного и привычного посприятия
Реакция клиента
ПК-версия
После дизайна мобильной версии мы не стали делать отдельно дизайн ПК версии, а решили сделать верстку на Тильде. ПК-версия получилась такой.
Я не одобрил такой варинант. Слева миньон болтался без дела совсем. Он не выглядывал как в мобилке. Справа объезьяна с фиолетовым облаком оттягивала все внимание. Верстка ушла на доработку.
Второй вариант был лушче, но тоже не подходил. В центре слишком все сбито в кучу, а по боком много свободного места. В итоге я придумал фишку — просто повернуть расположение изображений изображений по почасовой, чтобы уйти с центральной линии текста, кнопки и цены.
На выходе получился вот такой дизайн и я понял, что это то, что нужно.
Верстка
Версталось все на Тильде с сложной и базовой анимацией.
К нам обратилась школа BlaBla за оформлением личного кабинета Геткурс. Была необычная задача — сделать дизайн сказочным и в стиле мультфильма«Алиса в стране чудес». У клиента было изображений, шрифты, дизайн лендинга. Это хороший набор материалов для старта оформления.
Задача
Сделать новый дизайн для школы на Getcourse в волшебном стиле.
Зачем, цель
Клиент мечтал о новом дизайне геткурса. Это всегда была его боль. Сделав новый дизайн мы решаем юзабилити-проблемы текущего дизайна Getcourse. Кроме этого мы связязываем все площадки клиента. .
Бизнес-требования к продукту
создать уникальный стиль, которого не будет ни у одной школы
пользователи должны иметь тот же функционал, но в новом дизайне
найти моменты, который можно улучшить в стандартном дизайне Getcourse
создать вау-эффект через волшебный стиль
сделать механики геткурса интереснее
Отзыв клиента
Результат клиента — x2 в заявках
До оформления заявок в лист предзаписи было 500−600, после анонса оформления — 1200
Дизайн до упаковки
Страница курса
Страница модуля
Страница урока
Процесс
Это необычная задача, потому что обычно надо в фирменном стиле оформить удобно в привычном стиле.
А здесь нужно было создать волшебство какое-то. ячфвафывфы
Обновленный дизайн
В новом дизайне нам надо было показать волшебство. Мы добились этого через необычные формы в боковой панели, шрифта, иллюстраций.
Страница курса, когда пользователь не оплатил курс
Когда пользователь еще не купил курс, ему доступен только первый модуль. Чтобы получить доступ к другим модулям — он должен купить их.
Мы показываем недоступность через создание ч/б эффекта на фото и отделением кнопокой«Провалится глубже в страну знаний»
Страница курса, когда пользователь оплатил курс
Когда пользователь оплатил курс, другие модули курса становятся доступыными. Мы показываем это через удаление ч/б эффекта с фото.
Страница модуля с уроками
Картинки и фон каждого модуля мы из списка модулей передаем в шапку. Чтобы у пользователя оставался фокус и он понимал, куда он попал.
В списке уроков мы используем тематические изображения, которые отражают название урока.
Дизайн элементов страницы урока
Я разрабатываю для страницы уроков набор элементов, из которых можно собирать все остальные страницы.
Страница урока
После разработки всех элементов страницы урока я взял одну страницу из уроков клиента и стилизовал ее с новыми элементами.
Блог тестирование, дизайн разных состояний
Цель дизайна — повышать вовлечение. В блоке с заданием я повышал вовлечение с помощью изображения портала.
Я зазываю пользователя в красивый портал срелками. Кликая на него, пользователь начинает отвечать на вопросы.
Если он ответил неправильно, портал становится красноватым, показывая, что входа нет.
Когда пользователь ответил правильно, портал загорается ярке, показывая, что можно пройти.
К нам обратилась школа ResultSchool за оформлением личного кабинета Геткурс. Из фирменного стиля был логотип, шрифты и цвета. Кроме того клиент отправил лендинг, который они сделали для курса. Он и лег в основу оформления геткурса.
Задача
Оформить школу на Getcourse под ключ.
Зачем, цель
Сделав новый дизайн мы решаем юзабилити-проблемы текущего дизайна Getcourse. Кроме этого мы создаем брендированный дизайн. Среди 10 школ с стандартным дизайном, пользователь сразу узнает ResultSchool.
Как выглядит стандартный дизайн Getcourse
Главная страницаСтраница стренингаСтраница урокаСтраница оплаты
Как стал выглядеть геткурс у школы Result School
Главная страница
Внутри тренинга
Страница урока
Профиль
Настройки уведомлений
Вход и регистрация
Ожидание вебинара и вход в вебинар
Вебинарная комната
Спасибо за оплату и обратная связь
Покупки
Оплата заказа
Прогресс-бар и дополнительная информация
У каждого курса в шапке расположен прогресс-бар и дополнительная информация о курсе: количество выполненных заданий, доступ и старт курса.
Каждый курс имеет свой цвет и под каждую цветовую схему мы подобрали цвета прогресс-баров.
Не забыли и о мобильной версии
Подготовили цвета и компоненты для разработчиков и дизайнеров
Разработать промостаниц для сбора заявок на покупку или аренду приложений. Сайт помогает потенциальным покупателям ознакомиться с условиями и преимуществами компании.
Пожелания клиента
Клиенту не понравилось, что предыдущий дизайнер разрабатывал дизайн с эмоджи. Надо было этого избежать. Сайт должен быть быть легким и стильным.
В верстке должна быть минимальная анимация, плавный скролл при клике в меню, кнопка наверх.
Дизайн-процесс
Клиент предоставил весь текст, нам оставалось только преобразовать его в дизайн. Посмотрели сайты конкурентов, подметили хорошие и не очень решения. Спросили у клиента, какие сайты им нравятся, а какие нет и начали работу.
Поиск референсов
Посмотрели референсы и начали строить стиль.
Утверждение
Когда я только начинал работать дизайнером, я отдавал готовый дизайн макета за пару дней до дедлайна. Это опасно, потому что времени на правки мало. А шанс того, что клиенту не понравится какой-то блок или весь макет — велик.
Сейчас утверждение идет так:
первый блок в течение 1−2 дней,
несколько блоков еще в течение 1−2 дней,
за 3−4 дня до дедлайна весь макет.
Показали несколько варинтов первого блока, а потом несколько блоков, включая подвал. Клиент утвердил все с первого раза.
Результат
Процесс верстки
Я предлагал сверстать сайт на Тильде, но клиент попросил сделать статичную верстку на html, css, js, без использования конструкторов. В этом есть свои преимущества, дальнейшее масштабирование до wordpress или другой cms.
Анимация в первом экране
Клиент попросил сделать интересную анимацию на первом экране. параллакс-эффект. Чтобы при скролле. Максим — верстальщик, придумал сделать перемещение изначальных«пятен» градинета. Получилось легко и залипательно 🙂
Ко мне обратился основатель сервиса FnBook Дмитрий Масланов. Он пришёл с задачей создания сервиса для фанфиков.
Фанфики — любительское сочинение по мотивам кинофильмов, телесериалов, аниме, комиксов, компьютерных игры. Авторами как правило, становятся поклонники оригинальных произведений. Обычно фанфики создаются на некоммерческой основе и для чтения другими поклонниками.
Описание задачи
Задача
Спроектировать веб-сервис с помощью которого человек может читать и писать фанфики.
Зачем, цель
Сделав удобный веб-сервис мы помогаем легко и просто читать и делиться с другими произведениями. Заработок сервиса строится на платных функциях. Если учтём проблемы и исправим их в нашем сервисе — привчлемём больше бользователей и больше заработаем.
Для кого, целевая аудитория
Люди в возрасте от 14-ти до 50-ти лет, активные пользователи мобильных телефонов и Интернета, которым хочется прочитать сочинения по темам любимых произведений или поделиться своим произведением.
Бизнес-требования к продукту
пользователи должны иметь возможность читать фанфики; ставить лайки и голосовать за них.
пользователи должны иметь возможность писать фанфики и общаться с аудиторией
Исследования
Исследование в этом проекте проходили в 4 этапа: анализ конкурентов, опрос пользователей, интервью, сбор отзывов с сайтов-агрегаторов.
Анализ конкурентов
Прежде чем пытаться разработать какое-то решение — нужно посмотреть, что сделали конкуренты. В процессе анализа постараться объективно оценить хорошие решения и ошибки.
Клиент предоставил список конкурентов, которые заняли рынок и на которых стоит обратить внимание.
По каждому конкуренту составил заметки с хорошими решениями и ошибками.
Опрос
Для опроса я создал анкету из 6 ответов. В создании вопросов для опроса главное уместить важные вопросы в 3−6 вопросов. Часть простых, часть открытых, чтобы пользователи могли бы рассказать свое видение и подсказать нам направление в работе.
Создал форму в Google Forms.
Для привлечения аудитории к опросу использовал рекламу Вконтакте. Подобрал изображения, написал текст и начал откручивать рекламу. Использовал героев популярных вселенных. Хотя на последнем изображении я явно схалтурил — Фродо или Гендальф подошли бы лучше 🙂
Потратил 100 рублей, получил 81 переход и 29 ответов на анкету, развернутые ответы ниже.
Ответы на вопросы
Интервью
Для интервью я нашёл 5 человек. Все они проводят много времени на сайтах с фанфиками. Кто-то написал много фанфиков, кто-то прочитал и оценил. С некоторым общался созвонившись, с другими в чате.
Один из опытных авторов фикбука общался со мной примерно 40 минут и дал много детальной информации: замечания, идеи, одобрение функций. Просто нужно спросить и слушать.
Все вместе
Я собрал все ответы, со всех интревью и опросов и собрал их в заметке. Поделил на пользователей и авторов.
User flow
Составил User Flow на 2 основные задачи: прочитать фанфик и написать фанфик.
Структура сайта
Составил структуру всех страниц и элементов, которые помогут в решении задач из User Flow. На основани анализа конкурентов, опроса и интервью, снабдил структуру элементами, которые нужны пользователям.
Зарисовки дизайна
Перед созданием прототипа набросал скетчи на бумаге, чтобы уже на этом этапе понять как выстраивать структуру.
Прототип
Дизайн
Было отрисовано порядочно интерфейсных деталей
Кликабельный прототип
Разрабтал кликабельный прототип в Figme, чтобы можно было протестировать всё на этапе прототипирования.
В июне 2021 заканчивая очередной проект по оформлению Getcourse, я понял, что по факту мы делаем одно и тоже. Клиенты тратят от 200 000 рублей и от 2 месяцев работы, чтобы оформить геткурс. Надо было упростить жизнь всем. Клиентам меньше платить и быстрее получать результат, нам меньше кодить и дизайнить.
Тогда мы придумали Remake — готовое решение из 22 шаблонов страниц для геткурса. Оформление занимает 3 дня. Стоимость такого решения 12 900₽ в месяц
Мы заранее разработали весь дизайн, всё запрограммировали и настроили. Мой партнёр писал десятки файлов javascript и css-кода, чтобы всё работало корректно и решение можно было подключать на другие аккаунты.
К нам обратилась школа YesToday за оформлением личного кабинета Геткурс. Из фирменного стиля был логотип. Кроме логотипа клиент прислал несколько референсов, которые ему нравились визуально.
Задача
Оформить Геткурс школы, чтобыотличиться от конкурентов и приблизиться к к планке лидеров рынка. Если все удобно и понятно — лучше отзывы, меньше нагрузки на поддержку, лучше результаты.
Зачем, цель
Разработали уникальный дизайн Геткурса. Учли все пожелания клиента, разработали несколько дополнительных виджетов и страниц для удобства администрирования и пользователей.
Бизнес-требования к продукту
пользователи должны иметь тот же функционал, но в новом дизайне
найти моменты, который можно улучшить в стандартном дизайне Getcourse.
Предыдущий дизайн
Новый дизайн
Главная страница
На главной странице добавили блок с анкетой участника. Это анкета, которую должны заполнить все ученики перед началом обучения. Часто ученики не заполняют её, поэтому мы решили вынести это на главную страницу большим блоком и написать тест в мире читателя. В чем его интерес заполнять эту анкету.
Ближайшие события автоматически показываются в зависимости от текущей даты. Ученики всегда будут видеть, когда у них следующий вебинар.
Страница курса
Разработали страницу модулей или подтренингов. У каждого модуля есть визуальное отображение его статуса.
Страница модуля
Подкасты
Прямые эфиры
Библиотека
Библиотека это набор полезных материалов для учеников в разных форматах: ссылки, документы, книги.
Страница урока
На странице урока задизайнили и запрограммировали все элементы, которые могут пригодится для стилизации конкретного урока. Администраторы будут копировать элементы с страницы-шаблона и использовать их на странице уроков.
Вход, регистрация и обратная связь
Мой профиль
Полностью переработали страницу«Мой профиль». Разделили данные на на обязательные и системные. В правой колонке находятся те поля, которые отвечают за доступ. Поля слева необязательны для заполнения.
Настройка уведомлений
Оплата
Благодарность за оплату
Покупки
Ожидание вебинара
Вход в вебинар
Вебинарная комната
В вебинарной комнате оставили то же размещение элементов, но поменяли их дизайн.
Обратился разработчик с задачей разработки лендинга портфолио. У него был старый сайт, но не подходил по дизайну и функциональности.
В планах сделать полноценный сайт с кейсами и блогом. Пообщавшись, мы пришли к выводу, что нам нужно сначала сделать лендинг, чтобы клиенты уже могли его найти.
После этого уже можно вторым этапом делать кейса, а третьим этапом блог.
Начали с лендинга. Его целевая аудитория по разработке — государственные организации. Нам не надо делать студийного проекта уровень, просто и со вкусом.
Также у клиента был ограниченный бюджет — 20 000₽. Я предложил только ПК версию и с ограничением в 6 блоков.
Решение
Разработал дизайн лендинга с основными секциями, которые дают понимание, что это за разработчик и что он может предложить.
Так как я сам часто нанимаю разработчников для своих проектов, я понимаю что нужно отразить, чтобы клиент мог принять решение о навыках разработчика.
