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

Запрос клиента

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

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

Так задача выросла из редизайна сайта в комплексный проект: редизайн + обновление фирменного стиля.

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

Работу над проектом мы начинаем с интервью. Вместо стандартного брифа проводим личные встречи с представителями компании: основателем, маркетологами, менеджерами продукта.

Такие интервью помогают:

• лучше понять продукт и рынок;
• узнать особенности аудитории;
• синхронизироваться по ожиданиям от проекта.

В ходе обсуждений мы вместе с клиентом разбираем сайты конкурентов и смежных рынков. Это помогает сформировать общее видение будущего решения и избежать абстрактных формулировок вроде «сделайте как у Apple».

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

Параллельная работа над брендом и интерфейсом

После интервью проект запустился одновременно в двух направлениях:

• бренд-дизайнеры занимались обновлением фирменного стиля;
• продуктовая команда работала над структурой сайта и прототипами.

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

Визуальные примеры (рефенсы)

Создание концепции начинается с подбора референсов. Мы не собираем одну общую доску, а формируем несколько визуальных направлений — обычно от трёх до пяти.

Каждое направление объединено общим характером:

• композиционными решениями;
• стилистикой интерфейсов;
• настроением и визуальными акцентами.

Для каждого борда даём краткое описание и название, например: «технологичный», «блочный», «контрастный».

Презентацию референсов записываем в формате коротких видео. В них подробно рассказываем о каждом направлении, отмечаем ключевые детали и возможные ограничения.

Клиент изучает материалы в удобное время, а затем мы обсуждаем выбранное направление на созвоне.

Этап «протодизайна»

После выбора визуального направления мы не переходим сразу к финальной концепции. Следующий этап — «протодизайн».

Это коллаж из референсных решений, собранный на каркасе реального прототипа сайта. Мы:

• берём структуру страницы из прототипа;
• подставляем в блоки элементы из референсов;
• подбираем несколько вариантов компоновки для ключевых секций.

Так клиент видит, как выбранный стиль будет работать именно на его продукте, а не на абстрактных примерах.

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

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

Финальная дизайн-концепция

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

Команда не тратила время на поиск стиля с нуля — визуальное направление было определено заранее. Это позволило сосредоточиться на деталях, композиции и акцентах.

В результате концепцию согласовали после первой презентации. Правки были точечными и касались только отдельных блоков и декоративных элементов.

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

Некоторые секции поменяли местами, часть устаревших блоков убрали, а новые добавили с учётом текущих задач бизнеса.

Дизайн основных страниц и дизайн-система

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

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

Параллельно с дизайном страниц мы постепенно собирали дизайн-систему. Когда элементов накопилось достаточно, объединили их в единую систему. Это упростило работу разработчиков и новых дизайнеров на проекте.

Итоги

Многоступенчатый процесс позволил синхронизироваться с клиентом на ранних этапах и сделать результат предсказуемым для всех участников проекта.

Дизайн-концепция была согласована после первой презентации, без серьёзных переработок. Команда смогла спокойно перейти к дизайну всех страниц, не тратя время на радикальные изменения направления. 

У нас не было цели удивить клиента внезапным вау-концептом. Хотелось совместно прийти к результату через понятный и прозрачный процесс.Мы считаем, что сильный дизайн появляется там, где есть чёткие задачи, открытая коммуникация и совместная работа команды и клиента.

Если вам откликается такой подход и вы планируете редизайн продукта, будем рады подключиться к проекту!