Design System Audit

О продукте

Mobile SDK Design System - это дизайн-система для интерфейса верификации, которая встраивается в мобильное приложение клиента.

Проблема

- Дизайн-система разрабатывалась довольно давно и не поддерживалась дизайн командой. Со стороны разработки вносились изменения в UI, которые не были внесены в дизайн-систему
- Отсутствовал унифицированный нейминг "design → code"
- Палитра устарела и не соответствовала системе цветов глобального продукта и её нельзя было использовать для кастомизации темы. Про это смогу рассказать подробнее при личной беседе

Задачи

1. Обновить токены

Переиспользовать базовые цвета из общей дизайн-системы webSDK

Добавить недостающие семантические токены для Цветов / Размеров / Шрифтов

2. Оптимизировать нейминг токенов

3. Проверить доступность компонентов

Контрастности цветов

Сетка размерности шрифтов

Проверка с помощью VoiceOver (программа экранного доступа)

4. Обновить набор иконок

Новые токены

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

Из сложностей — было много ручной проверки компонентов. Из-за появления новых токенов, использования прозрачности у оттенков и т.д., все компоненты потребовали перелинковки с новыми цветами.
Вместе с разработчиками делали тестовые сборки sdk с новыми токенами и тестировали на всех возможных экранах/состояниях. Это помогало найти уязвимые места на проде.

Что на выходе:
→ Мы получили устойчивую и масштабируемую систему цветов
→ Добились консистентности цветовой палитры между MobileSDK и WebSDK

Система наименования

Из-за плохой коммуникации между дизайном и разработкой возникло расхождение в нейминге компонентов и токенов. Периодически это вызывало недопонимание и, как следствие, ошибки в работе. Чтобы это быстро исправить и не усложнять процесс, мы использовали нейминг из технической документации mSDK. Он понятен разработчикам и для использования в дизайн команде он тоже отлично подходит.
‍
Что на выходе:
→ Унифицированный нейминг. За пару сообщений становится понятно, что имеется в виду, и не надо всё это объяснять через скриншоты.
→ В перспективе это поможет сделать автоматическую выгрузку JSON’а из Figma в код.

Проверка цифровой доступности

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

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

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

Что на выходе:
→ К сожалению, удалось проверить только часть экранов и компонентов. Но на основе этого в дальнейшем можно будет продолжить работу над улучшениями.

Новые иконки

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

P.S.

Также в процессе работы были добавлены недостающие компоненты, переработаны существующие и добавлена техническая документация.

Обновление Дизайн-системы