Дизайн-система

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

Renaissance Insurance · InsurTech · 2017–2018 · Product Designer

Цель

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

Решение

Я инициировал дизайн-систему, обосновал ее бизнес-ценность и построил с нуля вместе с разработчиками, продакт-менеджерами и маркетингом. В основе — принципы Atomic Design Брэда Фроста: компоненты выстроены по иерархии, от атомов до целых экранов. Каждый компонент сопровождается документацией и примерами использования — команды применяют его, не гадая, когда и как это делать.

Компоненты

Система построена на принципах атомарного дизайна Брэда Фроста — компоненты структурированы в соответствии с иерархией, от базовых элементов до полноэкранных экранов. Библиотека включает в себя: типографику, цвета, сетку, интервалы, анимацию, иллюстрации, оповещения, кнопки, карточки, выпадающие списки, формы, входные данные, загрузчики, ярлыки и ссылки.

Attach
Calendar
Checkbox

Grid
Spacings
Typography

Colors

Animation
Illustrations

Alerts
Buttons
Cards

Dropdown
Form
Input

Loader
Label
Link

Illustrations by Ilya Mesheryakov

Использование

К каждому компоненту прилагается документация и примеры использования, показывающие, когда и как его применять. Это позволяет командам проектировать и разрабатывать быстрее, без двусмысленности или непоследовательности.

Результат

25%

сокращение времени на дизайн и разработку экранов

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

Отдельная благодарность Илье Мещерякову — за идеи, работу и иллюстрации.