Разбор концепта платформы для владельцев домашних животных
Обсуждаем, почему важно чётко ставить себе задачу, чем опасны супераппы и как наглядно показать свои навыки.
Разбор работ в DL PRO состоит из двух частей: статьи с анализом, которую вы видите ниже, и файла в Figma Jam, который передаётся автору работы с большими подробностями и точечными указаниями на то, что следует исправить.
Автор работы Софья , подписчик DL PRO
Какие ключевые вопросы по работе у тебя есть к менторам?
Какие ошибки есть в исследовании? Какие ошибки есть в визуальном дизайне. Мне хотелось сделать дизайн интересным, непохожим на типичные платформы.
Задача
Создать удобную платформу для владельцев домашних животных (Создать место, где будет всё необходимое для заботы о домашних питомцах)
Большое спасибо, что поделилась своей работой!
Что понравилось в работе
С визуальной точки зрения, ты оформила свою презентацию для беханса так, что это выгодно отличает твою концепцию на фоне других проектов, которые ранее присылали нам на разбор. Ты отдала предпочтение необычной цветовой палитре, которая при этом гармонично сочетается. А ещё уделила должное внимание иллюстрациям: в них передаётся и характер, и настроение бренда. Также ты постаралась проработать большое количество экранов для демонстрации единой системы и собрать под неё UI-kit.
Логика
А вот по этой части у нас возникло много вопросов. Начнём с первого, который стоит себе задать, прежде чем начать проектировать интерфейсы: для какого рынка ты создаёшь продукт? Если бы ты его запускала, то как и где ты бы проверила MVP? Потому как выкатить такое решение по всему миру и сразу наверняка невозможно: для начала нужно проверить ликвидность самой идеи и её потенциал на рынке. В чём уникальное торговое преимущество такого продукта?
Ты написала список примерных функций, но никак не описала, как ты это проверила, почему именно эти функции, а не другие. И есть ещё проблема на уровне постановки задачи, которую ты сформулировала как «Платформа для владельцев домашних животных». Это лишь возможное решение, но никак не задача. Стоит формулировать свою цель чётче, используя глаголы, и описать, как ты проверишь достижение целевых метрик.
С чего начинать проект
Воспользуйся методом 5W1H, о котором мы уже неоднократно говорили. А для этого тебе нужно ответить на ряд вопросов, прежде чем начинать любую работу. Если вводных данных нет, то нужно провести больше исследований как качественных, так и количественных.
Why? — Зачем мы это делаем? Какова цель? Почему важен этот продукт? Какую проблему мы пытаемся решить? Какие преимущества этот продукт даст пользователям? И какие возможности для бизнеса он создаст? На этом этапе тебе стоит тщательнее исследовать конкурентов и провести интервью с потенциальными пользователями, чтобы затем составить ценностное предложение.
Who? — Определи целевую аудиторию. Что может мотивировать воспользоваться твоим продуктом каждый из ключевых сегментов пользователей? Как могут отличаться их потребности? Если ты ранее провела глубинные интервью, то ты можешь составить карты эмпатии, чтобы структурировать процесс и посмотреть на продукт глазами клиента.
When and Where? — Каков контекст использования продукта? Где физически находятся пользователи, когда обращаются к твоему продукту? Сколько времени у них есть на это? Что предшествует возникновению потребности? Вот здесь как раз могут пригодиться JTBD и таймлайн.
What? — Перечисли все возможные идеи, как мы можем решить проблему для клиента, а не ограничивайся сразу конкретным решением. Когда у тебя появится список таких решений, приоритизируй, используя, к примеру, матрицу Lean prioritization, для сравнения по трудозатратам и получаемой ценности.
How? — Как ты проверишь, что достигла успеха? Какие метрики ты стала бы проверять, если бы речь шла о настоящем продукте?
Стоило подумать о том, чтобы развернуть этот продукт в платформу для специалистов, сети ветеринарных клиник, как я рассказывала в нашей мастерской исследований, когда пришли с аналогичным продуктом на обсуждение. Или же можно было завернуть историю в репутационную, сделав это промо продуктом условного Royal Canine, но тогда концепция интернет-магазина внутри такого решения должна быть иной, по очевидным причинам.
Структуру экранов тоже стоит пересмотреть, поскольку в каждом из них должен быть ключевой фокус. Например, на главном экране важна плашка с профилем питомца, так как фиксация приёмов пищи и добавок является ключевым действием для пользователя.
Плюс, если ты показываешь, что это кастомизируемый экран, то как он будет выглядеть для владельца кошки? Она, вероятнее всего, не захочет совершать никаких трюков) Когда проектируешь сложную систему, мысли сценариями: когда пользователь доходит от начальной точки к конечному решению. Именно это важно показывать в своём портфолио: что ты умеешь мыслить такими категориями.
Ты могла бы показать онбординг в такую систему, есть ли в ней пейволл, можно ли добавить несколько домашних животных. Чтобы не пытаться объять необъятное, стоило сосредоточиться на одном разделе или сценарии, но показать его полностью, чем всё, но очень поверхностно, из-за чего это сразу же воспринимается как концепт ради концепта.
Бизнес
Ключевая проблема в том, что по решению сложно понять, что именно ты продаёшь в рамках такой платформы. Какая бизнес-модель предполагается у такого продукта? За счёт чего именно он будет себя содержать?
Мы идём по модели условного Flo, продавая информацию по подписке? Если да, то как в нашей системе будет выглядеть вариант премиума? Или же это маркетплейс? В таком случае, в системе иначе должны быть расставлены акценты. Или же это социальная сеть? Тогда она должна зарабатывать на рекламе, как это происходит в том же Фейсбуке или Инстаграме. И всё это тогда тоже нужно показывать в рамках продукта.
Ты сделала комбайн всего, что гипотетически может быть интересно владельцу домашнего животного. Но не потеряется ли пользователь в таком количестве функций супераппа? И как его поддерживать и в плане разработки, и в плане создания контента? Плюс ты не учла высокой вероятности того, что многие будут пользоваться таким продуктом в первую очередь на мобильных устройствах, учитывая контекст, в котором такой сервис может понадобиться.
Визуал
Типографика
Здорово, что постаралась выбрать шрифтовую пару для своей презентации. Это помогает дополнительно управлять вниманием зрителя и теми смыслами, что ты закладываешь. Но вот у рукописного, выбранного в качестве третьего шрифта, низкая читабельность. И, возможно, стоит сократить количество начертаний, используемых в первом экране.
Работа с типографикой ещё требует внимания, особенно в срезе консистентности. У тебя несколько рукописных шрифтов, но внезапно несколько блоков в презентации набраны капсом. Для чего? Какого эффекта ты пытаешься достичь?
Пойми правильно: презентация в целом получилась яркая, много интересных приёмов, визуализаций. Но много где не хватает внимания к деталям, аккуратности. Например, в блоке с тегами чёрные плашки без выравнивания по центру, как в остальной схеме, а текст написан не единообразно.
Мудборд
Референсы подобраны классные и организованы неплохо! Но было бы лучше к ним добавить какие-то выводы, заметки. Это бы показало твой ход мысли и что умеешь анализировать. Ещё не понятно, какое именно решение из референсов ты подхватила. Здесь встречаются 3д иллюстрации, в решении — 2d. Было бы лучше показать, что именно отсюда было использовано.
Композиция
И в презентации, и в готовых экранах с композицией всё в порядке в плане управления вниманием пользователя, соблюдения правила внутреннего и внешнего. Понятно, что с чем группируется, что к чему относится.
Коммент не совсем по композиции, но по подаче: в презентацию было бы классно добавить анимацию. Это бы разбавило повествование и показало взаимодействие с платформой. И дополнительно продемонстрировало твои скиллы в анимации\прототипировании.
Цвет
Декоративным элементам в презентации не хватает контрастности и цвет грязноватый.
Команда
Молодец, что соблюдаешь порядок в макете. Дизайн-лид или арт-директор обязательно обратит на это внимание. С точки организации библиотеки можно было бы улучшить работу с названиями стилей цветов и шрифтов.
Сейчас странно, что группы типографических стилей называются Web и Body. Без дополнительных комментариев фронтендер не поймёт, что где использовать. То же со стилями цветов: Light в одной группе и Light в другой отвечают за разные функции. Было бы лучше хранить один цвет, отвечающий за Light, другой за Dark, и применять их и к Bg, и к Text.
UI-kit хороший. Он аккуратный, довольно подробный, оформлен хорошо. Используются варианты, «компоненты в компонентах», AL и базовые принципы атомарности. Но много что можно улучшить.
Например, можно добавить цвета и шрифты, чтобы разработчик сразу перенёс их себе в код. Отлично будет, если покажешь сетку и систему отступов.
При использовании вариантов забываешь давать названия опциям. Лучше тоже их называть. Для кнопок, например, у тебя будут опции State и Type. Кажется, придираемся, но такая неаккуратность вызовет у работодателя вопрос: а что, у меня в проекте дизайнер тоже будет забывать про такие нюансы? А что если за ним придётся всё переделывать?
Что посмотреть
Beware of Feature Overload: A Case Study
A Rant Against Pretty App Designs
Работу разобрали Антон Ягупов и Валерия Накушнова.
Читатель! Хочешь такой же разбор от профи? Подписывайся на сервис обучения и поддержки дизайнеров: