Разбор приложения для покупки услуг стилистов одежды

Разбор работ в DL PRO состоит из двух частей: статьи с анализом, который вы видите ниже и файла в Figma Jam, который передается автору работы с большими подробностями и точечными указаниям на то, что следует исправить.

Работа подписчика DL PRO

https://www.behance.net/gallery/125630925/FitsMe-obrazy-podobrannye-stilistami

Разработка приложения для покупки и одежды подобранных стилистами. Стилисты в приложении добавляют вещи из инет-магазинов, создают из них образы. Пользователи свайпают ленту с этими вещами/образами, и могут их купить. Так же стилисты продают свои услуги: на старте это персональные образы и совместный шоппинг. Для заказа образов юзер задаёт свои параметры, и фотографирует вещи из гардероба, чтобы их так же можно было использовать в образах. У проекта есть продакт, он задаёт общее видение. Я предлагаю решение поставленных задач, обсуждаем, реализуем.

Привет!
Очень интересный проект, есть о чем подумать. Спасибо, что поделился с нами своими идеями и сомнениями.

Что понравилось в работе

В целом, понравился твой подход. Видно, что проделана большая работа. Хорошо, что сделана попытка показать этапы работы над приложением: задача, исследования, проектирование, финальный дизайн.

Логика

Недостаточно проработаны и отражены в макете пользовательские сценарии. Есть попытка показать, что есть два разных флоу, но не продумана логика попадания в разные флоу ещё на стадии входа в приложение. Не продумано, какие данные мы собираем о пользователе и как их можно использовать в дальнейшем. Например, если покупатель услуг стилиста в своём профиле уже заполнил свои размеры, то его уже про это можно не спрашивать на стадии оформления покупки услуг, а просто добавить в информацию к заказу.
Не хватает промежуточных состояний и фидбека пользователю на какие-то его взаимодействия с интерфейсом. Чувствуется нехватка знаний про те или иные паттерны, используемые в мобильных приложениях, про то, как они работают.

Чтобы улучшить работу с логикой приложения, стоит задавать больше вопросов: кто мои пользователи, как они принимают решение о выборе или о покупке, с какой целью человек пришёл в приложение, что хочет получить на выходе/при прохождении конкретного сценария.

При проектировании старайтесь выявить как можно больше возможных сценариев взаимодействия пользователей с приложением, отдельно прорисовывать сценарии со всеми возможными состояниями и тем, что может пойти не так в ходе прохождения сценария. Например, сценарий оформления заказа: как и откуда человек в него может попасть, сколько шагов ему нужно пройти (если надо) до конца, что будет после, что может пойти не так, к примеру отвалится интернет, неправильные данные карты и т.п

Визуал

Визуально у тебя получилось довольно чистое приложение, но ему не хватает характера. Такое приложение может подойти к многим проектам и магазинам продающих одежду. Подумай, чем можно выделиться среди многих. В чем состоит твоя визуальная концепция. Ее характер, настроение. Тема моды дозволят смелость в дизайне. Попробуй проявить эту смелость, что бы твое приложение запомнилось.

Мудборд и референсы

Сперва надо понять дизайн-задачу, обязательно задавай себе вопросы - что именно я делаю, для кого и зачем. В чем состоит ценность приложения, как ее увеличить.

Составь мудборд - доску, увидев которую, можно понять визуальный характер проекта, его общее настроение.

На стайлборде, уже более подробно можно показать цветовые схемы, подходящие композиционные решения по блокам или референсы приложений на эту же тему или тех, которые стилистически походят под настроение.

Типографика

Необходимо соблюдать правила мобильной типографики, что бы тексты хорошо читались, а также соответствовали требованиям доступности (accessibility). Для работы над приложением стоит сразу разработать систему стилей для заголовков, описаний, базового текста, текста для лейблов кнопок и полей. Хорошей практикой является следование рекомендациям гайдлайнов по работе с типографикой. Минимальный размер базового текста должен быть не менее 14 px. Допускается использование меньшего размера, но как правило для caption и для названия пунктов навигации.

Композиция

В приложении про моду хочется видеть интересные решения по композиции. Нужно найти стиль, выработать общие паттерны, что бы приложение запомнилось.

Цвет

Для поиска цветовых палитр можно использовать https://www.pinterest.ru/search/pins/?q=palette&rs=filter

Сейчас понятно, что для нужд приложения нужны еще дополнительные цвета. А если раздел стилиста и раздел покупателя сделать в одной стилистике, но в разных цветах? Или два раздела объединить одиним основным цветом, + разные дополнительные для стилиста и покупателя. Вариантов одной задачи может быть много - никогда не останавливайся на одном решении.

Дизайн-система
Работа с дизайн системой тебе поможет быстро вносить изменения в проект.
Используй принципы атомарного дизайна - разработки элементов от простого к сложному. Изучить атомарный дизайн. Если у тебя элемент появляется больше 1 раза - значит пора использовать компонент.
Надо более тщательно изучить работу компонентов и вариантов в фигме.

Сетка и отступы
В мобильных приложениях тоже стоит использовать сетки. Можно использовать или обычные сетки в несколько колонок, либо применять четырёх или восьмпиксельную сетку, например, можно использовать и комбинацию сеток. Для создания горизонтального ритма стоит разработать систему отступов для проекта.
По сеткам в мобильных приложениях рекомендуем почитать вот эту статью: https://medium.com/@FigmaTips/сетки-в-figma-часть-1-3da939d5afd8

Бизнес

Стоит тщательнее продумать идею приложения, ее уникальность, тогда и логика выстроится.
Возможно провести более тщательно конкурентный анализ рынка, чтобы например выявить скрытых конкурентов; дополнительные качественные исследования именно по пользовательскому поведению при подборе одежды, образов, как женщины выбирают себе стилиста.

Команда

Тщательно проверять положение элементов по сетке, прорабатывать и показывать все состояния элементов интерфейса. Не дробить длинный экран на много маленьких , разработчику полезно видеть сколько контента ему нужно подгружать на конкретном шаге и какие ещё взаимодействия могут быть. Подготовить стили текстов, цветов, предусмотреть, если нужно варианты для тёмной темы.

Привлекайте к обсуждению макетов разработчиков как можно раньше, часть вещей, отрисованных в дизайне, может быть сложной и долгой в реализации именно в разработке, возможно придётся искать новое, более простое решение.

Стоит уделить внимание и прокачать навыки в написании текстов в интерфейсе, так как это часть пользовательского опыта в вашем приложении. Например в макете есть проблемы с заголовками, названиями кнопок.

Поскольку я только начинаю портфолио, интересно удалось ли мне рассказать и показать работу. По проекту в Фигме я понимаю, что структура хромает: нет чёткой иерархии и преемственности в названиях компонентов. Хочется услышать любую критику и ремендации, будь то оформление, структура, или подход к макетам в целом.

Оформление кейса

Твоя работа больше будет интересна, если ее разместить на таком ресурсе как medium или vc, где можно раскрыть всю историю по проекту и получить комментарии. В самом кейсе хочется меньше общих фраз, а больше деталей проекта, твоего процесса и выводов.


Сейчас логика работы твоего приложения не читается из-за оформления разноцветными линиями. Лучше однозначно проставлять стрелочки ведущие от конкретного элемента к нужному артборду, что покажет правильный сценарий.

Что посмотреть

Обязательно Гайдлайны
iOS Design Guidelines https://developer.apple.com/design/human-interface-guidelines/
Material Design https://material.io/design

Типографика в мобильных интерфейсах:
https://ux.pub/naibolee-polnoe-rukovodstvo-po-razmeram-shrifta-v-dizajne-interfejsa/
https://medium.muz.li/typography-in-mobile-design-15-best-practices-to-excellent-ui-5eaf18280ad

Посмотри отличное оформление кейса, подход к дизайну и ux https://uxplanet.org/case-study-redesigning-the-user-experience-of-the-thrillophilia-app-3b58982822b9

https://uxdesign.cc/fitbit-a-usability-case-study-b23e4c539c3c

https://medium.com/spemer/univcam-ux-case-study-design-process-62742826c9a7

Компоненты
https://ux.pub/figma-design-system/
https://ux.pub/10-luchshih-praktik-figma-kotorye-uluchshat-vash-rabochiy-protsess-v-10-raz/

Увеличивай насмотренность
Скриншоты реальных приложений:
Mobbin https://mobbin.design/browse/ios/apps
Rowlab https://rowlab.xyz/mobile-patterns?tfc_sort[229473531]=price:desc
https://pttrns.com/

Удачи!

Работу разобрали Наталья и Ольга

Наш бот Прошка оценил работу так

Эй, читатель! Хочешь такой разбор? Подписывайся на сервис обучения и поддержки дизайнеров

https://pro.dsgnline.ru/