Как мы обновили сайт Экспобанка и повысили конверсию в два раза

Главное о кейсе

Планировалось, что обновление сайта увеличит конверсию в 1,3 раза. Мы перевыполнили план и достигли увеличения конверсии в 2 раза. Конверсия в разделах «Бизнесу» и «Вклады» выросла в два раза, в «Картах» — в три раза, в «Кредитах» — более чем в полтора.

Задачу совместно решали три команды:

- Red Collar отвечали за UX-аудит, а также предлагали дизайн-решения.

- Gizmo проектировали и создавали дизайн сайта, проводили frontend и backend-разработку. В настоящий момент отвечают за поддержку и развитие.

- Команда Экспобанка координировала работы и активно участвовала во всех этапах как вовлеченный клиент.

Одной из задач была и оптимизация затрат на дизайн-решения. Благодаря внедрению ИИ в работу над креативами для продуктов команда Экспобанка снизила затраты в среднем на 30%.

––––––
The goal of the project was to increase website conversion by 1.3 times. We surpassed these expectations, achieving a remarkable 2-fold increase in conversion rates. Specifically, conversion rates for the "Business" and "Deposits" sections doubled, while the "Credit" section witnessed an impressive growth of over 1.5 times. Notably, the "Cards" section experienced a remarkable 3-fold increase.

This project was a collaborative effort involving three teams:

- Red Collar, responsible for UX auditing and proposing design solutions.

- Gizmo, handling the website's design, creative product development, frontend, and backend development, as well as ongoing support and development.

- The Expobank team, actively participating and coordinating activities at all stages as an engaged client.

One of the challenges was cost optimization for design solutions. By implementing AI in creative product development, the Expobank team successfully reduced costs by an average of 30%.

Как проект изменил жизнь пользователей

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

––––––
We optimized the CJM, enabling users to make faster decisions, find relevant information quickly, and complete their intended actions. This resulted in increased website engagement and deeper user interactions. Notably, the new site was designed using the mobile-first approach, with approximately 70% of the site's traffic coming from smartphone users.

Бизнес-задача и ее решение

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

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

Новый интерфейс сайта и визуальный стиль разработали под реалии бизнес-ориентиров с учетом трендов дизайна пользовательского опыта. Следуя подходу Mobile First спроектировали интерфейсы сайта в первую очередь для смартфонов, а затем адаптировали для десктопов. По этому же принципу работали и frontend-разработчики.

Мы отстроили визуальный язык Экспобанка от основных игроков рынка и сформировали узнаваемый стиль. Добавили элементы, будто нарисованные от руки, — стрелки на баннерах и активных разделах. Они создают ощущение знакомого и понятного, будто пользователь открыл блокнот и выделил важное ручкой.

- Проработали UX/UI дизайн с существенным расширением функционала мобильной версии.

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

- Обновили визуальный язык, сформировали цветовое кодирование и стиль для разных направлений бизнеса: Premier и Premium.

––––––
Expobank is a private bank with a strategic focus on exploring new niches for business development. Given the evolving market conditions, the bank adopted a more proactive approach in the field of foreign economic activity.

The primary objectives included aligning the bank's image with new business realities and increasing user interest in its products. This required the creation of new pages for the Small and Medium-sized Enterprises segment, updating calculators, and ensuring uniformity across pages for savings and credit products, in accordance with Central Bank requirements.

The new website interface and visual style were designed to align with business-oriented principles while adhering to UX design trends. We followed the mobile-first approach when designing the site's interfaces, prioritizing smartphone users before adapting the design for desktop users. This principle was also applied by frontend developers.

Through collaborative efforts, we refined Expobank's visual language, differentiating it from key market players and establishing a recognizable style. We introduced hand-drawn elements such as arrows on banners and active sections, creating a sense of familiarity and clarity, as if users were highlighting important content with a pen in a notepad.

- Significant enhancements were made to the UX/UI design, with a substantial expansion of the mobile version's functionality.

- A comprehensive effort was undertaken to reposition the page for small and medium-sized businesses around key products.

- The visual language was updated, color coding was established, and a distinct style was developed for different business directions, including "Premier" and "Premium."

Крафт (мастерство), реализация, технические детали

Red Collar провели UX-аудит веб- и мобильной версии сайта по ряду сценариев: навигации, главной, карт, вкладов, расчетно-кассового обслуживания (РКО), ВЭД и валютного контроля.

Совместно с командой Экспобанка погрузились в предметную область, определили набор сценариев на аудит и изучили метрики сайта. По «модели информационных ожиданий» сформировали набор возможных вопросов к сценариям и страницам сайта, относительно сегментов ЦА.

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

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

––––––
Red Collar conducted a UX audit of the website and mobile version, focusing on various scenarios such as navigation, the homepage, maps, deposits, cash services, foreign trade operations, and foreign exchange control.

Working closely with the Expobank team, we immersed ourselves in the subject matter, identified scenarios for auditing, and examined website metrics. Using the "Information Expectations Model," we formulated a set of possible questions related to scenarios and website pages for different target audience segments.

Identified issues affecting scenario completion were documented in Airtable tables, prioritized by criticality, and recommendations for addressing each issue were provided. Additionally, the client received a comprehensive report containing key findings and observations resulting from the UX audit.

Gizmo created and implemented a new design system with interface components designed to systematize design and development, streamlining the process of building new website pages and optimizing design and layout efforts.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

На этапе разработки дизайн-концепции Gizmo предложили более 5 вариантов концепций главной страницы, в том числе, версию с видео-баннерами для продуктов в разных цветовых гаммах. Согласно их гипотезе wow-эффект позволит быстрее зацепить внимание пользователей и усилить их вовлечение.

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

––––––
During the design concept development phase, Gizmo presented over five main concepts for the homepage, including one with video banners showcasing products in various color schemes. According to their hypothesis, the wow factor would quickly capture users' attention and enhance their engagement.

Initially, we decided against using the video concept due to project timeline constraints and concerns about user reception. However, we later decided to test the hypothesis - the feature has been implemented and will be introduced at a later stage.

Скриншоты

Видео