Задача

Разработка брендированной айдентики, редизайн мобильного приложения и разработка сайта для швейцарского финансового сервиса.

14 наград за проект

О проекте

GS-Project — швейцарский финансовый сервис и единый центр для безопасного приобретения, хранения или обмена золота и серебра.

Задачи
  • Разработать брендированную айдентику
  • Разработать сайт
  • Сделать редизайн для приложения
Целевая аудитория

Обеспеченные люди, которые инвестируют в драгоценные металлы.

Понимание задачи

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

Из интервью узнали о потребностях клиента, о его ценностях, ожиданиях и опасениях. Также интервью провели с пользователями их сервиса.

Глубинное интервью помогло нам определить задачи бизнеса и задачи пользователей, которые должен решать продукт. А также сразу понять, с какими сложностями мы столкнёмся по ходу проекта.

Задачи бизнеса,
которые должен решать
продукт
  • Получить удобную точку входа для ЦА;
  • Презентовать компанию и её продукты;
  • Сформировать доверие у новых пользователей;
  • Увеличить лояльность действующих клиентов.
Задачи пользователей,
которые должен решать
продукт
  • Узнать подробности о компании;
  • Понять, что ей можно доверять;
  • Найти информацию об услугах;
  • Узнать стоимость драгоценных металлов;
  • Зарегистрироваться;
  • Получить персональное обслуживание.
Сложности проекта
  • Компания молодая и ещё не успела заработать репутацию на рынке
  • Серьёзные ограничения в контенте
  • За разработку частично отвечали сотрудники заказчика — зарубежные специалисты
После того как мы разобрались в задаче, совместно с клиентом мы с нуля разработали техническое задание.
Брендинг

Из-за того, что в проекте были ограничения в контенте, основным инструментом влияния должна была стать айдентика бренда.

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

В логотипе отразили специфику компании и их продукта:

Логотип
  • Продукт компании — многофункциональный центр в кармане пользователя, который предоставляет возможность безопасно приобретать, хранить или обменивать золото и серебро. Многофункциональность в логотипе передают лучи и объединяющая точка в центре, на которой сходится движение.
  • Компания работает с английским и швейцарским золотом, поэтому в логотипе мы провели прямые ассоциации с флагом Великобритании и швейцарским крестом.
  • В логотипе считывается первая буква названия компании — G.
Логознак
Визуальный стиль
Перед началом работы выделили смысловые точки, на которые можно опираться при создании айдентики. В основу дизайн-концепции заложили базовые ценности компании — надёжность, профессионализм и высокие стандарты сервиса. Чтобы передать эти ценности, в визуале использовали минимализм, строгие линии, выверенную типографику и сдержанную цветовую гамму. Эти решения проходят красной нитью через все продукты, которые мы разрабатывали для заказчика.

Анимации

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

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

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

Мобильная версия

Все макеты
структурированны и
предоставлены в Figma

Все макеты
структурированны и
предоставлены в Figma

Офлайн элементы
UX-дизайн сайта

Задачи сайта: рассказать о компании, сформировать о ней положительное мнение и привлечь к использованию их продуктов и услуг.

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

Главная страница

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

Структура

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

Главная и внутренняя страница
Редизайн приложения

У заказчика уже было приложение, которое требовало доработок. Нам нужно было обновить его дизайн.

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

Визуальный стиль

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

UX-дизайн

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

Главный экран

Все макеты
структурированны и
предоставлены в Figma

Все макеты
структурированны и
предоставлены в Figma

Аккаунт клиента

Интеграции

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

Синхронизация с командой клиента

За разработку частично отвечали сотрудники заказчика. Мы интегрировались в их команду, чтобы наладить совместную работу.

Специалисты заказчика отвечали за конфиденциальные данные в части бэкенда сервиса. Наш проджект-менеджер интегрировался в их in-house команду. Так мы смогли синхронизировать работу сотрудников клиента и работу наших специалистов: дизайнеров, фронтенд- и бэкенд-разработчиков. Это помогло не выбиваться из плана работ и сдать проект в срок.

Как могло быть
Как мы работали
Разработка сайта

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

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

Технологии

На Vue.js вели основную часть работы. Этот фреймворк отлично подходит для реализации анимаций и плавных переходов между страницами.

Nuxt использовали, чтобы оптимизировать процесс разработки.

Node.js и Laravel использовали в связке и строили на них бэкенд.

Фронтенд и бэкенд
Результат

Заказчик получил полностью упакованный проект с сайтом, приложением и единым фирменным стилем для всех носителей.

Сайт стал точкой входа для ЦА, где пользователи могут ознакомиться с компанией и получить информацию о её продуктах и услугах.

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

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