Кейс Mojo: редизайн для себя и клиентов

История о том, как мы в Mojo запускали сайты клиентам и не могли найти времени на себя. Со счастливым финалом.

Вступление

Большинство людей познакомились с нами после «Дизайн-прожарок» — мы препарировали интерфейсы крупных интернет-магазинов. Каждая публикация вызывала шквал справедливых комментариев «Вы свой сайт вообще видели?», только без цензуры.

 Подобрали комментарии покультурнее

Пользователи vc.ru не проходили мимо и скрупулёзно отмечали минусы под каждой статьей. Один ярый фанат даже написал собственную «прожарку» на Mojo. Кроме шуток, спасибо за такое пристальное внимание.

Прежняя заглушка отталкивала не всех клиентов, но мы устали отвечать на вопросы: «А что с вашим сайтом? Родовая травма?». Настало время перемен.

Ретроспектива

Известная всем комментаторам версия сайта не самая ужасная. Ниже четыре стадии эволюции Mojo. Давайте коротко пройдёмся по каждой из них.

Дриопитек

Без лишних слов и экранов — он тут один. Кнопка «Наши работы» вела сразу на Behance. Клиенты приходили оттуда или по сарафану, так что над сайтом не работали совсем.

Австралопитек

Экранов уже побольше. Кейсы уже принесли нам несколько наград на Behance и 26-е место среди креативных дизайн-студий в «Рейтинге Рунета».

К несчастью, мы редко публикуем работы, так что уже 35-е. Не переживайте, исправим и это.

Питекантроп

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

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

Посчитали хобот удачной метафорой: гибкий, сильный, точный и чувствительный. Он как будто идеально описывал нас — эмпатичных и хватких дизайнеров.

Евгений Князев, Дизайнер, кофаундер студии

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

Главная проблема прошлой версии — фокус не на содержание, а на попытку быть «особенными», «некаквсешными». В то же время из-за коммерческих задач и череды отпусков над макетами работали «каждый по чуть-чуть». В итоге собрали одного монстра доктора Франкенштейна, который нарушал законы юзабилити и отталкивал людей.

Оцените первую гарнитуру

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

Сайт Разумный

Это только альфа, но уже похоже на сайт здорового человека. Кейсов стало куда больше, хотя это далеко не все. Лайфхак: если вы в заявке оставите настоящий номер или email, мы покажем вам портфолио с релевантными вашему проекту кейсами.

Впереди больше кейсов и статей во внутренний блог, разработка страниц о команде и карьере в Mojo, доработка страниц с услугами и многое другое. Хотя наш PR-менеджер нагнетает, что новый редизайн начнём через полгода.

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

Как мы редизайнились

Проектирование, дизайн, тесты на пользователях, сбор фидбека, разработка и правки заняли 8 месяцев. Больше половины времени мы отбивались от комментариев под каждой статьёй.

Компания развивалась параллельно, и за это время мы:

  • занялись тимбилдингом и HR-брендом, сформулировали ценности компании

  • сформировали план обучения для команды
  • ввели внутреннюю валюту — моджопики. Их можно потратить на плейстейшен, кресло-качалку, сертификат в SPA и вообще всё, что захочешь.

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

    Лучше всего, когда мы — одна команда. Для этого проводим совместные воркшопы, вовлекаем всех ЛПР, чтобы избегать сюрпризов накануне релиза, используем гибкие методологии.

  • доработали фирменный стиль и выпустили мерч
Карточка с несколькими ценностями нашей команды

Изменения в HR-политике и клиентском сервисе отражались на нашем позиционировании. Постепенно мы поняли, что Mojo — о людях и для людей. Новые процессы влияли и на дизайн.

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

Основная сложность в разработке сайта для собственной компании — согласования. К работе снова подключилась большая часть команды, поэтому правки собирали и вносили целую вечность. ЛПР-гидра из дизайнеров и маркетологов — тяжёлый заказчик.

5 неудачных фото удачных людей

Фирменный стиль

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

Результатом эксперимента с линиями лого стали смайлы. Теперь они — часть нашей фирменной графики

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

Фирменные цвета оставили прежними — синий, чёрный и светло-серый. Гарнитура прошлой версии сайта не выдерживала критики. Graphik LC Web подобрана для максимально комфортного восприятия информации.

Страница из нашего гайдлайна

Мерч

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

Футболка «Единое целое»

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

Пунктирная линия — клиент. Круг из текста — команда Mojo. Буква «о» в виде залитого круга — точка пересечения.

Логотип Mojo внедрили в мерч нативно и едва заметно, чтобы подтолкнуть носить фирменные худи, футболки и лонгсливы и людей не из команды.

Пунктирная линия — часть фирменной графики. Она была в первых версиях иллюстраций для сайта.

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

Свитшот «Стремись»

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

Глагол в повелительной форме — своего рода call to action

Худи «Балансируй»

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

Ну и куда без маски в ковидные времена третьей волны

Вместо итогов

Проект шёл долго, но лучше поздно, чем «как тогда». В нашей жизни хватило экспресс-дизайнов, подходим к процессам осознаннее.

Пишите в комментариях или нам в личку, как вам редизайн? И не забудьте +1, если понравилась статья, редизайн или всё сразу :)

Подписывайтесь на Mojo-блог в футере сайта — там тоже будет выходить полезный контент.

0
33 комментария
Написать комментарий...
Nick

Больно

Ответить
Развернуть ветку
Antro
Автор
Ответить
Развернуть ветку
Nick
Ответить
Развернуть ветку
Aleks B

Саддам Хусейн

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Антон Будников

воу!

Ответить
Развернуть ветку
Antro
Автор

Рады, что вам понравилось!

Ответить
Развернуть ветку
Vovan Avach

мое почтение , отличный подход !

Ответить
Развернуть ветку
Antro
Автор

Спасибо за такую оценку наших трудов 💙

Ответить
Развернуть ветку
Женя Жуланова

Классификация сайтов - топ)))

Ответить
Развернуть ветку
Antro
Автор

Никак не могли выбрать, какую классификацию взять — эту или настоящую, которую прикрепили картинкой

Ответить
Развернуть ветку
Daria Trs

стало аккуратнее и нагляднее)

Ответить
Развернуть ветку
Antro
Автор

Спасибо, мы старались 💙

Ответить
Развернуть ветку
Катя Тимофеева

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

Молодцы! 

Ответить
Развернуть ветку
Алексей Патрикеев

вау!

Ответить
Развернуть ветку
Antro
Автор

Отличный выбор для первого комментария на vc.ru

Ответить
Развернуть ветку
Кирилл

Стало хуже, некрасиво, не стильно, цвета неприятные, композиция разваливается

Ответить
Развернуть ветку
Antro
Автор

Если что, мы открыты к конструктивной критике

Ответить
Развернуть ветку
Кирилл

Некрасиво, мне не нравится, шрифты не те

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Кирилл

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

Ответить
Развернуть ветку
Wittgenstein

А че фон такой унылый? Градиент не умеете? Ну вот Дмитрий Кирсанов, например, умеет и любит градиент и всем советует.

Ну и это, в css уже изобрели анимацию и даже блюр. Ваще огонь, если сделать хорошо. Ребята вы похоже талантливые, сделайте радостно, а не как стенгазета у Лебедева.

Ответить
Развернуть ветку
Ilya Miller

а давайте весь мир в градиент? стили на то и стили что они разные.

Ответить
Развернуть ветку
Wittgenstein

Если вы присмотритесь, то увидите, что в мире нет ни одного плоского цвета и всегда есть градиент. Поэтому, отвечая на ваш вопрос, не надо красить, все уже покрашено до вас :)

Ответить
Развернуть ветку
Алексей из LOADING.express

Что-то такое, сильно похожее на лебедева. Не нравится.
А сайт когда почините по скорости загрузки? 

Ответить
Развернуть ветку
Antro
Автор

Так тоже неплохо 

Ответить
Развернуть ветку
Алексей из LOADING.express

Это внутренняя страница. Загружается 21 секунду. Прекрасно же.
А вы быстрые сайты умеете делать или клиенты будут получать такое же как вы себе сделали?

Ответить
Развернуть ветку
Antro
Автор

У нас основной трафик с десктопа, поэтому в первую очередь занимались оптимизацией этой версии.

Но будет круто, если снова скопируете в комментарии рекомендации из PageSpeed, чтобы мы точно знали, с чем работать 👍

Ответить
Развернуть ветку
Алексей из LOADING.express

Основной трафик с ПК это мне знакомо, у нас тоже с ПК траф. Но дело в том, что вы не настроили сквозную аналитику и не знаете конверсию мобильного и ПК трафика.
А забить на него - это дело простейшее.

Вот вам рекомендации из свежайшего Лайтхаус 8.1, они еще лучше чем пейджспид. он так пока не умеет: https://lh.loading.express/reports/1626468248.report.html.

Вот вам рекомендации из loading.express:
https://loading.express/?test_id=60f1ef156ed3a456e849b987&server=spb-1-monitor

Чем-то еще могу помочь?

Давайте ваш сайт ускорим?

Ответить
Развернуть ветку
Ilya Miller

Два похожих релиза ребрендинга в один день :)

Это запись из Instagram*. По требованиям Роскомнадзора, мы не можем её показать
*Meta, владеющая Instagram, признана экстремистской организацией на территории Российской Федерации
Ответить
Развернуть ветку
Antro
Автор

У них тоже симпатичный!

Ответить
Развернуть ветку
Anna Kost

«ввели внутреннюю валюту — моджопики.» - прочитала поджопники😅 ну, так, жизненно)

Ответить
Развернуть ветку
Женя Князев из antro.cx

Иногда в жизни нужен и «поджопник». Главное вовремя и правильно поданый :)

Ответить
Развернуть ветку
30 комментариев
Раскрывать всегда