дизайн-система
Дизайн-система для внутренних приложений торговой сети «Пятерочка»
задача
Перед нашей командой стояла задача — создать единую дизайн-систему для платформ iOS и Android и заложить единые правила для элементов интерфейса, так как все существующие приложения сильно отличались друг от друга по стилистике
Максим Галлямов
Менеджер
Миша Пименова
Арт-директор
Виталий Пыркин
UX/UI дизайнер
первый этап
Мы должны были создать омниканальную дизайн-систему, которая будет затрагивать все: не только иконки, кнопки и изображения, которые есть в существующих приложениях, но и продумать новые элементы, необходимость в которых может возникнуть в будущем. Для этого мы собрали и проанализировали все встречающиеся элементы интерфейса в скриншотах внутренних приложений Пятерочки на iOS и Android. На основе полученных данных мы составили расширенный список всех элементов, которые должна включать дизайн-система
Мы хорошо знаем специфику отрасли компании и постарались учесть все детали. Особенностью сферы ритейла и внутренних приложений в целом является большая работа с базами данных. Например, в дизайне это проявилось при работе с древовидной системой продуктов магазина. Мы детально продумали работу «аккордеона» на мобильных устройствах: когда один раздел включает в себя несколько подразделов продуктов, каждый последующий подраздел делится еще на несколько составляющих и так далее
Миша Пименова
Арт-директор, Globus
При изучении внутренних приложений мы столкнулись с ненативными элементами интерфейса в виде сложных объемных таблиц и придумали способ, как удобно просматривать таблицы на мобильных устройствах: пользователь закрепляет колонку и скролит в нужную сторону. Такая навигация позволит сотрудникам компании упростить работу в приложении, сократить время принятия решений и, как следствие, увеличить продуктивность своей работы
второй этап
Следующим этапом стало изучение бренд-бука и правил ведения стиля компании. На основе этих данных мы заложили визуальную стилистику отдельно под каждую платформу и проработали все необходимые элементы интерфейса. В качестве примера мы отрисовали часть приложений «Пятерочки» с новыми элементами и презентовали макеты заказчику
третий этап
После утверждения дизайн-системы мы разработали подробный гайд-бук с правилами ее использования и sketch-файл с разработанной и полностью настроенной библиотекой элементов. Такой UI Kit сильно упростит работу будущим подрядчикам, позволит обновлять существующие приложения и создавать новые в единой стилистике, где ни один элемент не будет выбиваться из общей концепции
Нам очень понравилось работать с дизайн-командой Globus. Ребята предлагали отличные решения и имели достаточно высокую экспертизу для создания и отрисовки дизайн-элементов. Мы полностью доверяли ребятам и полагались на их опыт. Дизайн-команда ответственно подошла к решению задачи и быстро реагировала на наши пожелания
Ивачёв Александр
Консультант-дизайнер
Напишите нам
Обсудить проект, идею или просто проконсультироваться
Минимум 3 символа Минимум 7 символов
Удалить файл
Спасибо!
Мы рады вашей заинтересованности в работе с нами
и постараемся оперативно ответить
На главную