Брендинг и разработка сайта для инвестиционного сервиса
ЗаказчикGolden Suisse, частная компания из Швейцарии.ЗадачаНам предстояло полностью переупаковать проект: разработать новый логотип, фирменные элементы, гайдлайны, предложить новую версию сайта и обновить дизайн приложения.
Golden Suisse — многофункциональное мобильное приложение от одноименнои? швеи? царскои? компании. Это единыи? центр, предоставляющии? возможность безопасного приобретения, хранения или обмена золота и серебра. Всего в несколько кликов любои? желающии? может открыть банковскии? счет и начать осуществление операции?.
До начала сотрудничества, у заказчика был продукт, но не было единого дизайн-кода. Сайт не выполнял задач по презентации продукта, имел большое количество багов и очень сложную навигацию.
Нам предстояло полностью переупаковать проект: разработать новый логотип, фирменные элементы, гайдлайны, предложить новую версию сайта и обновить дизайн приложения.
Брендинг
Фактически, продукт компании — многофункциональный центр в кармане пользователя. Отсюда в логотипе компании появились лучи (многофункциональность) и объединяющая точка в центре, на которой сходится движение. Также в знаке легко читается буква G.
Компания работает с Англии? ским и Швеи? царским золотом, что также нашло свое отражение в логотипе. Есть прямые ассоциации с Швеи? царским крестом и флагом Великобритании.
Надежность, профессионализм и высочайшие стандарты сервиса — базовые ценности компании, которые мы передали с помощью визуальных образов в аи? дентике компании.
Строгость линии?, минимализм и сдержанная цветовая гамма подчеркивает премиальность и качество предлагаемого продукта.
Приложение
Мобильное приложение является основной точкой взаимодействия с клиентом, именно поэтому этап его редизайна был одним из важнейших в рамках данного проекта.
Новый интерфейс должен был не только улучшить пользовательский опыт с существующим функционалом приложения, но и расширить его, внедрив ряд новых компонентов.
Наша команда работала только над дизайном мобильного приложения. Разработку выполняла сторонняя команда. Именно поэтому особое внимание мы уделили проработке дополнительных экранов, всех микро-шагов и проработке подробных гайдлайнов.
Все для того, чтобы в процессе разработки избежать двойных толкований и импровизации со стороны разработчиков, сохранив высокий уровень разработки на всех этапах реализации проекта.
Дизайн сайта
Обновленная дизайн-концепция должна не только подчеркнуть премиальность продукта, но и предоставить исчерпывающую информацию о нем в доступном формате.
Вся структура сайта, формат представления информации и логика вложенности документов разрабатывалась нами с нуля. Заказчик не имел детального технического задания, а лишь общее представление о необходимом результате.
Существует распространенное мнение о том, что хороший дизайн может получиться только с использованием большого количества качественных изображений или видео.
В данном проекте мы были серьезно ограничены в контенте, поэтому вся дизайн-концепция базируется на продуманной композиции и внимательной работе с типографикой.
Базовые анимации добавляют сайту дорогого лоска и облегчают навигацию, расставляя необходимые акценты.
Мобильные пользователи — ядро аудитории сайта, поэтому особое внимание уделялось не только удобству интерфейса мобильной версии сайта, но и скорости ее загрузки. Много часов мы потратили именно на оптимизацию работы скриптов, сжатие, кэширование и так далее.
База знаний
Отдельная сущность проекта — база знаний, к которой обращаются пользователи прямиком из мобильного приложения.
Главным требованием к ней являлась организация удобного поиска нужного материала и понятная структура страницы вне зависимости от содержащихся на ней элементов: просто текста, графики, пошаговой инструкции, видео или PDF-документов.
При этом работы по заполнению базы знаний оставались в зоне ответственности заказчика — на этой стадии большое количество проектов начинают испытывать проблемы. Очевидно, что человек, не обладающий знаниями в области веб-дизайна и простейшей верстки, рискует сильно ухудшить внешний вид сайта при заполнении его контентом.
Мы организовали структуру посадочных страниц и административную часть сайта таким образом, чтобы загрузка контента происходила всегда с учетом выработанных правил по размерам блоков, их очередности и формату.
Это менее гибкая история, но она гарантирует корректное отображение сайта, даже при условии работы с ним не подготовленного человека.
Разработка
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.
В настоящее время, заслужив глубокую лояльность клиента, мы продолжаем сотрудничество и помогаем реализовать идеи проекта в веб-плоскости.
Перейти на сайт
Полный текст статьи читайте на CMS Magazine
