Разбор тестового задания NewYou
Как исследование аудитории и идеи бизнеса влияет на проектирование сайта и визуал? И что порадует креативного директора в решении тестового задания соискателя?
Разбор работ в DL PRO состоит из двух частей: статьи с анализом, который вы видите ниже, и файла в Figma Jam, который передается автору работы с большими подробностями и точечными указаниям на то, что следует исправить.
Автор работы Екатерина, подписчица DL PRO
Задача: Добрый день. В рамках тестового задания я делала концепт главной страницы сайта агрегатора курсов. На главной нужно рассказать о платформе, о преимуществах, показать доступный контент.
Какие ключевые вопросы по работе у тебя есть к менторам?
Хотела узнать, какие ошибки вы видите в работе? как стоило подойти к выполнению? И может быть вы знаете, что значит "акцент на промо"? а то мне не стали рассказывать=)
Большое спасибо, что поделилась работой! Мы анализировали твой проект в Фигме.
Что понравилось в работе
Видно, что ты начинаешь свой путь и пытаешься работать с трендами и делать актуальный дизайн.
Логика
Самый первый вопрос, на который хочется получить ответ: какая информация была предоставлена заказчиком, и что было частью твоего исследования? Это важно разделять. Первое — это про ожидания твоего клиента, где есть микс из его желаний, реальных данных, потребностей клиентов и идей, которые они накидали (и, возможно, уже полюбили). Бывает, что заказчик уже приходит с хорошим исследованием, которое можно разбирать и использовать в работе. В таком случае часть аналитической работы уже проделана. Однако большинство заказчиков не имеют релевантного опыта.
Представь, что я тебя собеседую и оцениваю результат твоей работы. Какое исследование ты проводила? Какие выводы были сделаны? Как они реализованы? Это всё волнует работодателя.
В итоге есть блок с отзывами, который ещё нужно декомпозировать и структурировать. На этом исследование закончилось. Не хватает выводов даже после той части, которую ты сделала. После любого ресёрча (по объёмам) необходимо тезисно писать результаты, общие выводы, с которыми будешь дальше работать.
Самый важный момент, который ты упустила — знакомство с потребителем. Кто твоя аудитория? Что они сейчас используют? Почему? Как используют? Что для них важно? Все эти вопросы помогут сделать решение более эффективным, сконцентрированным на том, чтобы помочь твоим клиентам. Кстати, это всё можно было спросить и у работодателя.
Проводить опросы и брать отзывы важно у клиентов сайта или потенциальных потребителей, кому важно закрыть проблему/боль с помощью данного продукта. В следующий раз попробуй чётко сформировать анкету, где будут вопросы не только по текущему интерфейсу, но и опишут, КАКОЙ у тебя потребитель.
Хорошо, что нашла узкие места в текущем сайте. Было бы интересно посмотреть на то, как ты решаешь каждую проблему. Это можно оформить в кейсе в следующем формате: выявила проблему в процессе регистрации (подтвердила на нескольких респондентах), так как пользователи отваливаются на данном этапе, не понимая что делать; продумала несколько решений и провела конкуренцию гипотез; реализовала прототипы, протестировала и выбрала лучший вариант. А теперь к твоему решению: ты вроде описала проблемы, но не сконцентрировалась на чём-то важном, ты попыталась стрелять из всех оружий, но по мишеням не попала. Твоё визуальное решение с первого взгляда можно назвать симпатичным, даже немного трендовым. А потом начинаешь приближаться, будто смотришь на картину в галерее издалека, и видишь уже совсем другое. Много мелочей, с которыми важно и нужно работать. Их мы разберём ниже.
Бизнес
Важно понимать, на какую аудиторию мы рассчитываем, кому продаем курсы. Понять позиционирование, преимущества нашего сервиса, чем мы сможем привлечь пользователей, в чем уникальность нашей услуги. Поэтому прежде чем приступать к дизайну, надо провести исследование — предпроектный анализ.
А уже потом мы приступаем к поиску шрифта, цветов, композиционных решений и общей идеи. В каждом проекте надо искать индивидуальность, которая сможет выделить сайт из общего потока.
Сейчас не понятно, что нам предлагают, что это за курсы, что они нам дадут. У меня даже сложилось впечатление, что на сайте создаётся такое мистическое ощущение, потому что клиент сам не совсем понимает пользу и ценность курсов, идею своего бизнеса. Поэтому текущий сайт выглядит невнятно, и люди это ощущают.
Нужна стратегия поведения с пользователем: или вы развиваете взаимовыгодные честные отношения, или играете в мистику, но тогда и дизайн, и сам тон должен быть иным. Сейчас многое сбивает с толку. Совершенно не понятно, в чем уникальность этого продукта и ценность для покупателя.
Если бы мы знали аудиторию этого сайта, мы бы могли рассмотреть визуальную культуру, окружающую ее, понять контекст, как и где нашим продуктом будут пользоваться. Мы бы лучше понимали мотивы, интересы, проблемы и какую пользу могли бы дать.
Визуал
Теперь давай рассмотрим твое решение. Если бы было проведено исследование, найдена идея, ты бы смогла защитить его, а так как исследования нет — это гипотеза, которая ни на что не опирается и в результате не попадает в ожидания клиента. Ты оказалась в шатком положении, ведь это просто твое видение. Такое решение имеет право на существование, но не решает задачу клиента.
Когда говорят, что «упор на промо», это значит, что сайт получился скорее зрелищным, чем решающим поставленную задачу.
В целом дизайн получился интересным, но более подходящим для молодежного фестиваля, чем для продажи курсов.
Мудборд и референсы
В задаче от клиента есть направление по эмоциям: вдохновение, стать лучше, системно и понятно, доверие и интерес, исполнение мечты о лучшей версии самого себя.
Посмотрим комментарии заказчика: 3 белых сайта, легкий стиль. В референсах клиента прослеживается, что дизайн каждого примера четко заточен под аудиторию.
Замечание к оформлению: не очень показательно рассматривать референс сайта на примере одного экрана. Более наглядно сохранять скриншот главной страницы целиком или его характерные экраны, так будет проще оценить и понять закономерности.
Подбор референсов и лучших практик по данной теме помог бы тебе проанализировать удачные и неудачные решения конкурентов и опираться в том числе на чужой опыт. В этом разборе есть пример, как работать с референсами.
Типографика
Этот проект больше подходит для выбора шрифтовой пары, а не одной гарнитуры шрифта. Будут текстовые страницы с описанием, конспектами и личный кабинет. Поэтому читаемости текста надо уделить особое внимание.
Шрифт для заголовков интересный, технологичный, но для основного текста лучше использовать шрифт, который больше подходит для массивов текста.
Композиция
Ты пыталась совместить динамику и дружественность, используя цвет и тему скруглений в элементах. Косая линия на первом экране больше нигде не используется и кажется лишней.
Для карточки нужно поискать более удачное решение тегов (не читаются), полезно добавить информацию о начале и длительности курса. Решение с фотографиями не очень удачное, уже сейчас понятно, что картинки из фотостоков в разделе каталога будут выглядеть ярко, но хаотично, и это будет отвлекать от восприятия.
Именно в этом дизайне можно продолжить эксперимент с формой кнопки и предпросмотр сделать скругленным.
В колонке «чему научитесь» перемешаны разделы и фильтры (бесплатно, новое, все, рекомендуем).
Урезанное меню. На текущем сайте это выглядело как фишка — о продукте и для тебя. Как сознательное сужение выбора. Сейчас структура выглядит непродуманной. Cоздается впечатление, что фотография командует расположением меню — а как это будет выглядеть на внутренних страницах? А если в слайдере фотография поменяется на светлую, белая кнопка и название курса, что произойдет с ними?
Блок «учиться на наших курсах». Мне не хватило здесь работы с контентом, шрифт хоть и крупный, воспринимать его в тексте сложновато. Выравнивание отзывов — логика не читается, кажется, что один элемент съехал относительно сетки. Серый фон в этом блоке выглядит неинтересно.
Также советую использовать в работе вертикальный ритм — систему отступов между блоков и их осознанное использование. Сейчас отступы в одном смысловом блоке разные по высоте, и это выглядит как ошибка.
Иерархия и ритмичность при подаче контента важна. Цифры в этом блоке забирают на себя много внимания, а у них второстепенная роль. В целом список сейчас длинный и неудобен для чтения, его можно разделить на две части: про платформу и про процесс. И оформить по-разному с иконками и карточками, тогда появится визуальное разнообразие в подаче информации, и пользователь обязательно обратит внимание на нее.
Чат — хорошая идея! Но можно улучшить, сделать привычным паттерном — плавающей кнопкой, закрепленной в правом углу, тогда он будет постоянно нас сопровождать. А так клиенту надо проскроллить в самый низ, чтобы узнать, что можно задать вопрос.
Блок «часто узнают». Визуально не хватает разделения, строки в одну и две строки сливаются. Почитай про правило близости, чтобы победить это. Заголовок «Часто узнают» оформлен ссылкой, потому что ведет на раздел?
Очень смелый фон подвала, но спорное решение. На каждом блоке мы должны себе задавать вопрос: какую задачу решает этот блок? Почему мы выбрали такое решение? Если смотреть на макет в целом, то подвал — самый заметный и важный блок, мы точно хотели достичь этого эффекта?
Ссылки подчеркнуты, а почта нет. Почта не является ссылкой?
На старом сайте есть очень полезный блок, несправедливо задвинутый в самый низ: «Охвати все направления развития». Его надо поднимать гораздо выше, это может быть нашей идеей, что мы хотим разносторонне развивать наших пользователей. Можно продумать, как его можно было подать на первом экране. Это может служить отправной точкой при создании концепции. Не забываем, сперва идет смысл, а потом дизайн.
Цвет
По цветам я понимаю, что ты ориентировалась на молодую аудиторию. Сейчас дизайн кажется подходящим под событие или фестиваль.
Предполагаю, что черный фон ты взяла как некую трендовость, но кажется, что это неоправданно и не соответствует задаче. Ты могла бы предложить дополнить дизайн темной темой страницы, потому что видео хорошо воспринимается на темном фоне, и уже есть устойчивой паттерн. Пользователи используют темную тему в домашних интерфейсах, и было бы удобно, если бы на сайте тоже можно было подстроить отображение под себя.
Помимо этого заказчик дал референсы светлых сайтов, а в итоге тёмный вариант. Почему? Если бы были смешанные варианты, можно было предложить несколько визуальных концепций или выбрать по своему усмотрению. Предоставляя референсы, клиент формирует свои ожидания по результату твоей работы.
Команда
Ты использовала цветовые стили, молодец. Но для консистентности проекта нужно использовать текстовые стили и сетку. Использование компонентов и автолейаутов упростит твою работу и поможет работать быстрее. Я советую уже на этом этапе постараться разобраться с ними.
Не увидела в твоей работе сетку, а это важная часть профессионального подхода к дизайну сайта. Работы, построенные по сетке, обладают визуальной структурой и аккуратностью. Еще облегчают принятие решений по размещению блоков на макете. Я советую всегда использовать сетку. Это еще один критерий, по которому артдиректор проверяет работу.
Молодец, что прислала работу на разбор, мы рассмотрели направления для улучшения твоего макета, которые ты сможешь учесть, и с каждым разом результат будет лучше и лучше! Желаю успеха!
Что посмотреть
Пошаговое руководство по сочетанию шрифтов и подбору шрифтовых пар
На примере этого разбора посмотри, как делать хорошее исследование. Мы детально описали весь процесс.
Работу разобрали менторы Ольга и Алана.
Читатель! Хочешь такой же разбор от профи? Подписывайся на сервис обучения и поддержки дизайнеров: