Дизайнер, привет
23.1K subscribers
1.7K photos
112 videos
5 files
1.6K links
Реклама и связь: @generalsupport
Канал с вакансиями: @jun_hi_vacancies
Канал с рефами: @refs_hi

———

Пишу о дизайне и жизни ❤️

product designer
ex: магнит, x5 retail, точка, whoosh, unabank
Download Telegram
Кто вдруг не смотрел, Яндекс выложил 18 видео со своих лекций по дизайну.

Полезная информация об особенностях дизайна продуктов, коммуникаций, прототипировании и анимации, а также о работе в команде.

Посмотреть тут

@jun_hi

#видео
👍4
Что делаю в Х5 Retail Group? 

Коротко, что это. X5 Retail Group, — российская розничноторговая компания, которая управляет продуктовыми торговыми сетями «Пятёрочка», «Перекрёсток», «Карусель», цифровыми бизнесами «Vprok.ru Перекрёсток», «5Post», «Около» и медиаплатформой «Food.ru».

---------------------------

Я пришёл в х5 на внутренние интерфейсы магазина Vprok.ru с 3000+ сотрудников, которые работают в ПО ежедневно.

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

Так как продукт только в начале пути, то вначале проектируется интерфейс для операторов, которые принимают тысячи звонков каждый день. 

Что сделал за 3 месяца:

1) Провёл анализ текущего интерфейса. Разобрал «до косточек» на сущности, которые присутствуют у той или иной роли и отобразил в миро со скриншотами и логикой, как это работает. Текущий интерфейс проектировали 6 лет назад на стандартных фреймворках и уже устарел. Функционал разрастается стремительно, но интерфейс не даёт возможности масштабироваться.

2) После анализа интерфейса пошёл изучать, а как же операторы с этим интерфейсом работают. Для этого в течение месяца созванивался с операторами: опытными, которые работают уже давно и новичками, и смотрел в течение часа, как оператор принимает звонок, куда нажимает при вопросах клиента и как решает проблему, когда использует текущий интерфейс. Во время звонка фиксировал информацию по каждому кейсу, который встречал и заносил в миро. Каждый кейс — отдельный столбец со скринами и коротким описанием, что делал оператор. Таких кейсов получилось больше 30.

3) После сбора аналитики, общения с операторами и разбора текущего интерфейса, началась работа по изменению как с точки зрения ux, так и ui.

За следующие 2 месяца спроектировал 100+ экранов и собрал кликабельный прототип, с помощью которого проверял решения короткими юзабилити тестами с операторами. В процессе звонка оператор решал задачи а я смотрел на процесс решения, задавал вопросы в конце и делал вывод, нужно ли что-то изменить или нет.

С октября задач стало сильно больше и я стал лидировать направление внутренних интерфейсов Впрок. Меньше стал работать руками, но делать больше менеджерских задач. Об этом потом 🙂

---------------------------

Давайте познакомимся, где работаете и что делаете в компании?
Какие задачи? Насколько большая команда?

#личное

@jun_hi
👍7🔥1
Чёрная пятница.

Сегодня все каналы гудят скидками про Чёрную пятницу.

Но скидки мне не так интересны, как подход к визуализации этих скидок на сайтах) Из РУ сегмента очень зашло, как это сделали ребята из Золотого Яблока (сайт им делали ONY).

Посмотрите на красоту: https://goldapple.ru

Что думаете?) Если у вас есть примеры красивых оформлений к ЧП — присылайте, поглядим вместе) Только не ОЗОН. Я теряю сознание от шлака, который там находится на главной при каждых акциях и распродажах.

@jun_hi

Иерархия кнопок.

Даёт пользователям подсказку, какое действие является наиболее важным на экране.

При создании UI кита необходимо убедиться, что в нём есть первичные, вторичные и третичные кнопки. Также, кнопки могут быть с иконками и без, иконки могут быть как слева, так и справа. Это всё нужно учитывать при создании компонентов кнопок и их вариантов.

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

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

И всегда старайтесь писать в кнопке тот текст, функцию которого она и будет выполнять. Если это отправить сообщение, то не открывайте после этого окно регистрации, ведь я хотел отправить сообщение 🙂

Подробнее про кнопочки можно почитать тут, например.

#UXUI

@jun_hi
Полезное #3

------------------

Плагины для Figma:

🔸 Fast Variants Properties — пакетно создаёт свойства для вариантов.

🔸 Thumblisher — Очень простой способ ресайзить фрейм под разрешение разных постов соц сетей.

🔸 Contrast — позволяет проверять коэффициенты контрастности цветов

------------------

Интересные сервисы и сайты:

🔹 Animockup. позволяет создавать анимированные мокапы прямо в браузере.

🔹 Loon. Поиск графики на популярных бесплатных фотостоках.

🔹 WhatTheHex. Помогает с цветовым неймингом, достаточно ввести HEX код или выбрать цвет в палитре.

🔥🔥 Paywallscreens. Сайт с огромным количеством примеров paywall экранов (оформления подписки) в разных приложениях. Можно использовать как референсы.


------------------

Бесплатные файлы:

▪️ MingCute Icon v1.6. Набор из 500 базовых векторных иконок, нарисованных по 24-пиксельной сетке.

▪️ Simplified Wireframes. Набор Figma-компонентов для сборки флоучартов.

▪️ Moon Design System. Хорошая основа для дизайн-системы вашего проекта в формате Figma.

------------------

#полезное

@jun_hi
Увидел тут в приложении Авиасэйлс в частых вопросах.

«В отличие от вашего бывшего отвечаем не дольше 5 минут».

Как относитесь к такому юмору?) Если это можно назвать юмором, конечно. Я, если честно, не очень, потому что я парень) И у меня нет «бывшего», да и эта шутка давно себя изжила.

@jun_hi
Озон какое-то воплощение ада.

Понятно, что маркетплейс, понятно, что хочется показать прям всё всё, но это первый и главный экран, а в меня лупят ядовитым розовым, кучей скидок и не ясно, что в итоге делать то))

Озон, дай спокойно посмотреть каталог))

Вы как относитесь к такой «‎агитации»‎ скидок?))

@jun_hi
Финтех и Филиппины.

Когда пришёл в Unabank — digital банк на Филиппинах, который появится к 2025 году, в сентябре 2020, команда делала продукт UnaPay. Это выдача кредитов онлайн. Стандартная, как и везде, как показалось вначале. Нужно было с нуля придумать бренд, спроектировать сайт и анкету для получения кредита. 

Над брендом думали месяц, но в итоге остановились на ярких цветах, кислотных иллюстрациях в приложении и не прогадали. Общались с Филиппинцами удалённо и показывали наш бренд, параллельно слушали мысли на этот счёт. В обратной связи получили восторг, ведь на Филиппинах так «ядовито» ещё никто не заходил. Английский у Филиппинцев это беда и разобрать сложновато)

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

Проектируя анкету на кредит возникали некоторые не понимания. Филиппинцы ненавидят поле ФИО, которое вписывается в один инпут. Они пишут туда фигню и заявка не проходила из-за скоринга. Поэтому ФИО разделили на 3 отдельных инпута и правильность заполнения выросла в каждой третьей заявке. It's magic.

Проблемы возникли и на адресе. На Филиппинах не стандартная система административных единиц. В России это Область, город, улица. У них провинция > город > барангай > улица > дом. Барангай это «двор» в России. Проблема в том, что этих барангаев в одном городе больше десяти. Клиенты не понимали, что вводить: где фактический адрес или адрес прописки. С адресом должен совпадать и зипкод, который пишет клиент, так как потом это сверяется с паспортом.

Решение пришло неожиданно быстро, но пришлось провести много аналитики и посмотреть много цифр, чтобы убедиться, что так сделать можно. В старом варианте клиент заполнял каждое поле в адресе отдельно и в конце заполнял зипкод. Появилась возможность сразу запросить зипкод, а уже по нему притянуть информацию по адресу: область, город, барангай, провинцию. В итоге 5 полей свелись к одному, после которого мы писали «это ваш адрес?». Если да, клиенту оставалось заполнить только номер дома или название билдинга, если нет, то клиент вводил уже вручную. По результатам ввода зипкодов, попадание в адрес было на 90% точным. Но как известно, уникальные бордер кейсы встречаются, которые сложно было предусмотреть сразу.

Конверсия шага выросла на 30%, точную цифру уже не помню. 

Какие кейсы были у вас в компании? Какую проблему находили и как решали?)

#личное

@jun_hi
👍1
На yellowimages.com хедер + поиск с фильтрами закрывает почти половину экрана при скролле.

Ладно у меня iMac 4К и экран большой, но если это ноут, то боль. Хотя, так тоже больно)

Что думаете?)

@jun_hi
Тут Сбер запустил сервис по доставке еды в Беларуси "Еду!". Думаю, кайф, должно быть что-то необычное.

Исполнительный директор говорит «Мы сделали это, сделали гораздо круче других игроков на рынке, сделали за несколько месяцев, сделали вопреки всем ограничениям», — сообщил Горшунов.

Видимо, за пару месяцев удалось скопировать лавку почти подчистую)

У них в инпуте правда, доставка поехала ещё. На QA не нашли денег((

Похоже? Ставлю 9 отличий из 10.

@jun_hi
Разбор.

В ноябре
начал разбирать макеты, резюме, портфолио дизайнеров любого уровня, но преимущественно новичков. Пообщался более чем с 20ю классными ребятами и дал полезную обратную связь (по их отзывам).

🔥 Запись на ноябрь расписали за 2 дня.

Все разборы бесплатные. Делаю это, потому что хочу помогать и делать добро. Бескорыстно.

Если у вас есть макеты любого проекта, резюме, портфолио работ, вы хотите обсудить UX проекта, показать какой-то флоу — записывайтесь по ссылке: https://fb.sv/U8ukad

Буду очень признателен репостам в каналы / чаты и рекомендаций знакомым дизайнерам, которым это может быть полезно ❤️

@jun_hi
Дизайнер, привет pinned «Разбор. В ноябре начал разбирать макеты, резюме, портфолио дизайнеров любого уровня, но преимущественно новичков. Пообщался более чем с 20ю классными ребятами и дал полезную обратную связь (по их отзывам). 🔥 Запись на ноябрь расписали за 2 дня. Все разборы…»
Возможно, баян))

Иногда испытываю проблему: как можно быстро и удобно вырезать объект на картинке с минимальной погрешностью без фотошопа и в вебе, да ещё и с мобилки, иногда.

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

https://cleanup.pictures/ — пользуйтесь)

Не реклама.

#полезное

@jun_hi
Контрастность.

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

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

WCAG (Web Content Accessibility Guidelines) говорит о том, что коэффициент контрастности должен быть не менее 4.5:1 для текста стандартного размера. Существуют требования и для крупного текста, иконок, инпутов и других элементов интерфейса.

Инструменты, чтобы проверить контраст цветов, например:

- Stark plugin (Figma, Sketch, Adobe XD, Chrome)
- Colorable 
- Google Lighthouse

Удачи и не забывайте о людях с ограничениями.

#UXUI
Обожаю кнопку на Linkedin в 5 строчек, локализация хромает там, конечно.

@jun_hi
Полезное #4

------------------

Плагины для Figma:

🔸 Supersearch — продвинутый поиск по всем элементам проекта

🔸 Vivid Gradient — более яркие и насыщенные градиенты, чем встроенные

🔸 Wire Box — преобразование фреймов в их lo-fi версии, нарисованные одним цветом, чтобы было проще думать об архитектуре и взаимодействиях, не отвлекаясь на визуальную составляющую

------------------

Интересные сервисы и сайты:

🔹 Anytype. Стильный лендинг нового сервиса для хранения и обработки персональной информации.

🔹 Справочник. Справочник по дизайну для Apple Watch на русском

🔹 Calltoidea. Большое количество референсов по фильтрам.

🔥🔥 Полезное для новичков. Статьи, новости, паттерны и вдохновиться тоже) Множество статей, полезные новичку и просто на почитать.


------------------

Бесплатные файлы:

▪️ Edge. Набор бесплатных иконок от Craftwork. 150 линейных иконок с острыми углами, каждая в трёх вариантах жирности. Форматы Figma и SVG.

▪️ Scenic. Набор из 60 иллюстраций для использования в качестве фонов сайтов или приложений. PNG бесплатно, исходники вместе с анимированными версиями стоят 78 $.

▪️ Smart Charts Kit. Набор из 15 симпатичных диаграмм для дашбордов, формат Figma.

------------------

#полезное

@jun_hi
Я частенько смотрю англо-язычные видео на NNG и других каналах по UX, либо какие-то записи конференций на английском. И с моим уровнем это проблематично, чтобы сходу понимать суть и не делать кучу пауз.

Решение простое: заюзать Яндекс.Браузер, который в реал-тайме переводит видосы на ютубе (где чаще всего смотрю) сходу, с приятной озвучкой. Ещё и на пол делит (мужской / женский).

Кстати, на мобилке (IOS) тоже работает в приложении Яндекса.

Использую Яндекс.Браузер только для этого, а в остальном шлак.

Это не реклама. Юзайте)

#полезное

@jun_hi
👍1