PwC → Технологии Доверия

Масштабный редизайн после ухода из России крупной аудиторско-консалтинговой компании

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

Перед тем как начать

PricewaterhouseCoopers — международная компания в сфере аудита и консалтинга, работающая с 1849 года в 158 странах со штатом более 290.000 человек

Проблема

С учетом февральских событий в марте 2022 г. PwC решила уйти из России. В тот момент традиционные процессы работы нарушились, но работа над новым фирменным стилем началась сразу.

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

Решение

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

Моя роль

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

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

Задачи

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

2. Упростить процесс перехода сотрудников на новый корпоративный стиль,

3. Сделать дизайн консистентным и "освежить" элементы

4. Повысить скорость работы сотрудников

Процесс

1

Аудит

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

Интервью с продуктовыми командами и опросы сотрудников

Провели интервью с продуктовыми командами и опросы среди сотрудников. Часто видели отзывы, что дизайн выглядит устаревшим.
3

Просмотр существующих дизайн-систем

Посмотрели, как другие компании решили похожую задачу. На рынке много дизайн-систем, которые стоит учесть при проектировании нашей собственной. Особенное внимание уделили дизайн-системе IBM. Решили, что наша дизайн-система должна быть гибкой, консистентной и доступной (учли WAI).
4

Первые версии компонентов

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

Оформление в UI Kit

Удачные компоненты перенесли в UI Kit, остальные переработали и продолжили наблюдения. Компоненты разделили на атомы, этот подход гибче.
6

Оформление гайдов

Подробно описали использование элементов в Notion и передали материалы командам

Инструменты

1. Miro
Схематично отразили процесс в Miro


2. Figma
Задизайнили элементы в Figma из компонентов с автолэйаутами и вариантами


3. Notion
Описали использование компонентов в Notion

Финальный результат

Библиотека готовых компонентов ускорила построение интерфейсов, сократила время разработки продуктов и формализовала систему проектирования интерфейса.

Для пользователей интерфейс стал согласованнее и современнее.

Дизайн-система помогла пересмотреть компоненты и исправить проблемы с UX там, где они возникали.

Выводы

Я впервые участвовал в создании дизайн-системы, это интересный опыт. Многие вещи открылись с новой стороны.

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

Что дальше?

Заложили основу для системы, которая выполняет основную роль, —  постоянно развивается, дополняется и используется в работе. Перед моим уходом из компании было запланировано:

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

Без копирайта