golden suisse
nonbank
2020
30 августа 2020

Задача

Вводные
Комплекс работ по разработке фирменного стиля и сайта для иностранного заказчика.
Golden Suisse – многофункциональное мобильное приложение от одноименной швейцарской компании. Это единый центр, предоставляющий возможность безопасного приобретения, хранения или обмена золота и серебра. Всего в несколько кликов любой желающий может открыть банковский счет и начать осуществление операций.

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

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

Брендинг

Логотип
Фактически, продукт компании – многофункциональный центр в кармане пользователя. Отсюда в логотипе компании появились лучи (многофункциональность) и объединяющая точка в центре, на которой сходится движение. Также в знаке легко читается буква G.

Компания работает с Английским и Швейцарским золотом, что также нашло свое отражение в логотипе. Есть прямые ассоциации с Швейцарским крестом и флагом Великобритании.
Айдентика
Надежность, профессионализм и высочайшие стандарты сервиса – базовые ценности компании, которые мы передали с помощью визуальных образов в айдентике компании.

Строгость линий, минимализм и сдержанная цветовая гамма подчеркивает премиальность и качество предлагаемого продукта.
Визитная карточка
Папка для бумаг
Карта
Конверт
Бумажник

Приложение

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

Новый интерфейс должен был не только улучшить пользовательский опыт с существующим функционалом приложения, но и расширить его, внедрив ряд новых компонентов.
Golden Suisse App
Коллаборация
Наша команда работала только над дизайном мобильного приложения. Разработку выполняла сторонняя команда. Именно поэтому особое внимание мы уделили проработке дополнительных экранов, всех микро-шагов и проработке подробных гайдлайнов.

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

Дизайн сайта

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

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

База знаний

Отдельная сущность проекта – база знаний, к которой обращаются пользователи прямиком из мобильного приложения.
Главным требованием к ней являлась организация удобного поиска нужного материала и понятная структура страницы вне зависимости от содержащихся на ней элементов: просто текста, графики, пошаговой инструкции, видео или PDF-документов.

При этом работы по заполнению базы знаний оставались в зоне ответственности заказчика – на этой стадии большое количество проектов начинают испытывать проблемы. Очевидно, что человек, не обладающий знаниями в области веб-дизайна и простейшей верстки, рискует сильно ухудшить внешний вид сайта при заполнении его контентом.
GS® Wiki
Мы организовали структуру посадочных страниц и административную часть сайта таким образом, чтобы загрузка контента происходила всегда с учетом выработанных правил по размерам блоков, их очередности и формату.
Это менее гибкая история, но она гарантирует корректное отображение сайта, даже при условии работы с ним не подготовленного человека.

Разработка

Frontend
Frontend-разработка велась на базе фреймворка Vue.js, который позволяет наиболее полно реализовать заложенные в проект анимации и плавные переходы между страницами. Также в рамках проекта мы использовали Nuxt.js для оптимизации процесса разработки и упрощения внутренней архитектуры проекта.
Система управления сайтом разрабатывалась нами с нуля на PHP с использованием фреймворка Laravel. Это позволило нам уменьшить время разработки, применяя стандартные решения, и создать более гибкую систему взаимодействия между административной и клиентской частями сайта, заложив возможность дальнейшего масштабирования проекта.

Мы специально не использовали коробочную CMS, а самостоятельно комбинировали стек технологий и решений, необходимых для решения задач проекта. Такой подход позволяет избежать избыточности функционала, что часто является отличительной чертой коробочных решений, а также позволяет создавать индивидуальные решения, необходимые клиенту.
Интеграции
В рамках проекта мы реализовали интеграцию со сторонними и внутренними системами заказчика, работу которых обеспечивала другая команда: система личных кабинетов, e-mail рассылка, автоматическая актуализация прайс-листов.

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

Результат

Благодаря глубокой интеграции нашей команды в проект, открытости заказчика и готовности доверять экспертизе сотрудников нашего агентства, проект удалось реализовать на высоком уровне с учетом всех бизнес-требований, пожеланий заказчика и пользовательского опыта.
Проект был отмечен вниманием коллег и профессионального сообщества, получив ряд престижных наград: лучший пользовательский интерфейс Behance, включение в галерею лучших работ профессионального сообщества AIGA. Завоевали сразу 4 награды от Awwwards: Site of the Day, Honorable Mention, Developer Site, Mobile Excellence.

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