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