Сложный сервис. Первое понятное знакомство.
Юристу нужно понять пользу сервиса еще до регистрации. Я спроектировала сайт Lawico: выстроила знакомство с продуктом, создала визуальный язык, адаптивы и правила интерактивных блоков.
Многовозможностейещене объясняютценность.
Lawico объединяет задачи, дела, документы и работу с клиентами. На сайте такой объем легко превращается в длинное перечисление функций. Моя задача была другой: помочь посетителю соотнести продукт со своей практикой и понять, что стоит изучить дальше.
Я спроектировала последовательность знакомства: назначение на первом экране, рабочие сценарии на главной, подробности в возможностях, условия в тарифах. Структуру распределила на этапе прототипов, до выбора цвета и графики. В этом проекте моя зона работы - сайт, который представляет сервис.
Я разделила содержание по вопросам, с которыми приходит посетитель. Главная дает общий ориентир. Возможности раскрывают применение продукта. Тарифы помогают сопоставить условия. Так подробности получают свое место, а главная не пытается ответить на все сразу.
Вместо набора независимых страниц получился последовательный путь к решению о знакомстве с сервисом. Ниже - три задачи, вокруг которых я выстроила архитектуру.
Объяснить назначение
Связала аудиторию, задачи и изображение продукта. Первый уровень знакомства должен давать опору для дальнейшего чтения.
Сделать обещания предметными
Отвела рабочим сценариям отдельное пространство и подкрепила их экранами сервиса. Так абстрактное преимущество получает конкретный пример.
Подготовить к выбору
Собрала условия в сопоставимую структуру. Вопросы перед регистрацией не должны затеряться среди общего рассказа о продукте.
Юридический продукт без тяжеловесной подачи.
Визуально нужно было соединить серьезность юридической сферы и характер цифрового сервиса. Я построила это сочетание на контрасте: выразительные заголовки с засечками и спокойный основной текст, светлые области для чтения и более насыщенные переходы между темами.
Сине-бирюзовый и оранжевый акценты поддерживают действия и ритм. Повторяемые кнопки и навигация удерживают целостность, даже когда композиции страниц различаются. Так выразительность не требует заново объяснять интерфейс в каждом разделе.
Для раздела возможностей я выбрала повторяемую связку: рабочая задача, короткое объяснение и соответствующий экран сервиса. Это помогает избежать двух крайностей - рекламных обещаний без примеров и скриншотов без контекста.
Композиция повторяется намеренно: один раз разобравшись в устройстве блока, посетитель может сравнивать содержание. Моя работа здесь - организовать материал и визуальные акценты вокруг задачи читателя.
Планирование
Поставила сроки и задачи в контекст рабочего сценария. Изображение поддерживает конкретную мысль, а не служит общим украшением страницы.
Учет
Для рассказа об учете использовала соответствующий вид сервиса. Сохранила знакомую структуру блока, чтобы смена темы не меняла способ чтения.
Документы
Связала объяснение подготовки документов с экраном редактора. В каждом разделе посетитель получает одинаковую пару: что можно сделать и как выглядит инструмент.
Сравнениеначинаетсяс одинаковогопорядка.
Индивидуальная практика, юридическая компания и корпоративный отдел работают в разном масштабе. На странице тарифов важно показать различия, сохранив возможность быстро сопоставить варианты.
Я выровняла порядок информации в колонках: кому подходит тариф, состав, стоимость, действие. Общая сетка становится инструментом сравнения. Вопросы о пробном периоде, оплате, смене тарифа и безопасности расположила рядом с выбором, где эти уточнения особенно уместны.
Команда, блог и статья решают разные задачи. Я сохранила общие принципы типографики, навигации и акцентов, а композицию меняла под содержание: знакомство с людьми, выбор материала, длительное чтение.
Отдельно разработала шаблон страницы юриста с двумя вариантами объема контента. Здесь нужно было вместить профиль, услуги, документы и дела, сохранив связь с Lawico. Так визуальная система получила применение за пределами основных страниц сайта.
На широком экране текст и пример интерфейса можно рассматривать одновременно. В мобильной версии они идут последовательно. Я пересобрала эту последовательность: сначала смысловой ориентир, затем пояснение и изображение, с заметным действием.
Адаптация затронула главную, возможности и внутренние страницы. Общие правила сохраняют узнаваемость сайта, но расположение элементов подчиняется содержанию и ширине экрана.
Для интерактивных блоков я описала правила управления: наведение приостанавливает смену экранов, клик фиксирует пункт и раскрывает описание. Движение привлекает внимание, а посетитель может задержаться на нужной теме.
Правила, демонстрации и адаптивы передала разработчикам. Страницы поступали в работу последовательно, чтобы реализация могла идти параллельно с дизайном следующих разделов.
Я подготовила структуру, прототипы, визуальный дизайн, мобильные версии и поведение интерактивных блоков. Сайт представляет сервис через рабочие задачи, ведет к подробностям и дает сопоставимые условия выбора.
Дизайн реализован командой разработки. Этот проект показывает мой подход к сайтам цифровых продуктов: организовать сложное содержание и довести подачу до решений, которые можно воплотить.
"Для продажи программы был необходим современный и удобный сайт. Сотрудничать с Екатериной было очень удобно и комфортно, дизайн страниц и их блоков согласовывался и разрабатывался максимально быстро. По результату был разработан современный сайт с отличным дизайном. Екатерине выражаем огромную благодарность и с радостью будем сотрудничать по приведению основного продукта к современному дизайну."
