Сайт Repina branding

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

Скорость работы с сайтом увеличилась в 10 раз.
Администрирование сайта интуитивно понятно и не требует обучения
Новый способ подачи контента улучшил конверсию на 20%

The website loading speed has increased 10-fold.
Admin work is completely intuitive and does not require special training
The new content presentation format has improved conversion by 20%

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

Задачи:

1) Повысить скорость работы с контентом, одним кликом менять любое изображение и текст на сайте в режиме “What You See Is What You Get”

2) Свободно редактировать портфолио: быстро работать с изображениями и надписями внутри проектов, менять расположение кейсов в ленте.
3) Удобно и гибко верстать статьи для блога. Еще до публикации видеть, как будет выглядеть страница .

4) Встраивать видео. Общедоступные плееры, такие как vimeo и youtube навязывают свой интерфейс, формат, скорость и качество видео. Проигрывать видео со своим интерфейсом в нужном качестве — автоматически или после нажатия кнопки.

Решение:

Администрирование

Администратор может переходить на разные страницы сайта так же, как обычный пользователь и менять содержимое всех страниц. Сайт полностью работает по принципу WYSIWYG (What You See Is What You Get).
С помощью Drag-and-drop можно менять расположение пунктов в меню и разделов с услугами, порядок кейсов в портфолио и статей в блоге.

Конструктор проектов

Главный раздел сайта любого брендингового агентства — это портфолио. Наш конструктор удалось сделать похожим на Behance. Мы можем загружать картинки в галереи, добавлять текст разного цвета, менять местами блоки. 5 видов сетки покрывают все потребности в демонстрации работ.
Подача кейсов реализована в формате статей, где мы по шагам описываем процесс: проведенные исследования, выбор позиционирования, процесс работы над неймингом и дизайном.
Мы встроили собственный плеер — теперь можем спокойно проигрывать видео вместо тяжелых GIF-файлов.

Текстовый редактор

Блог — еще один приоритетный раздел на сайте. Все статьи имеют 2 колонки. Слева — основной текст статьи, а справа — место для дополнительной информации: CTA, цитат, врезок и подписей к иллюстрациям. Верстать текст мы теперь можем в визуальном редакторе и видеть его именно таким, как он будет опубликован.

Динамическая форма обратной связи

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

Objectives:

1) Better content processing speed; ability to replace any image and text on the website based on the What You See Is What You Get principle

2) Flexible portfolio editing: instant image and caption editing within the project, ability to move cases around in the feed.
3) Easy and flexible blog editing. Ability to preview the page before publishing.

4) Embedded video support. Publicly available players like Vimeo and YouTube force a specific interface, format, speed, and video quality upon the user. Play videos with your own interface and desired quality level, automatically or after clicking a button.

Solution:

Admin control

The administrator can browse different pages of the website, seeing what a regular user sees and editing the content. The website fully embraces the WYSIWYG (What You See Is What You Get) principle.
The menu items, service sections, cases in the portfolio, and blog articles can all be rearranged by dragging and dropping.

Project builder

The portfolio is the core of any branding agency's website. We have managed to make our project builder Behance-like. We can upload images to galleries, add text of different colors, and rearrange different blocks. Five types of grid cover all the needs associated with project demonstration.
The cases are presented as articles, in which we describe the process step by step: the research, the choice of positioning, and the naming and design process.
We have also integrated the website's own player, meaning that users can now easily playback videos instead of unwieldy gifs.

Text editor

Having a blog is another priority. All our blog articles are arranged in two columns. The column on the left is the main text; the column on the right is used for additional information: CTAs, quotes, sidebars, and captions for graphics. We can now set up our text layout in a visual editor, seeing it exactly as it will be published.

Dynamic feedback form

The dynamic feedback form allows users to pick the services they would like to request and receive a personalized quotation by email. The form supports 105 modifications of the quotations, covering 90% of all possible customer requests.

Прочая информация о кейсе

Сайт брендингового агентства Repina branding c визуальным редактором, конструктором кейсов и динамической формой обратной связи.

Repina Branding: website design with a visual editor, case builder, and dynamic feedback form.

Скриншоты

Видео