Кейс Mojo: редизайн для себя и клиентов
История о том, как мы в Mojo запускали сайты клиентам и не могли найти времени на себя. Со счастливым финалом.
Вступление
Большинство людей познакомились с нами после «Дизайн-прожарок» — мы препарировали интерфейсы крупных интернет-магазинов. Каждая публикация вызывала шквал справедливых комментариев «Вы свой сайт вообще видели?», только без цензуры.
Пользователи vc.ru не проходили мимо и скрупулёзно отмечали минусы под каждой статьей. Один ярый фанат даже написал собственную «прожарку» на Mojo. Кроме шуток, спасибо за такое пристальное внимание.
Прежняя заглушка отталкивала не всех клиентов, но мы устали отвечать на вопросы: «А что с вашим сайтом? Родовая травма?». Настало время перемен.
Ретроспектива
Известная всем комментаторам версия сайта не самая ужасная. Ниже четыре стадии эволюции Mojo. Давайте коротко пройдёмся по каждой из них.
Дриопитек
Без лишних слов и экранов — он тут один. Кнопка «Наши работы» вела сразу на Behance. Клиенты приходили оттуда или по сарафану, так что над сайтом не работали совсем.
Австралопитек
Экранов уже побольше. Кейсы уже принесли нам несколько наград на Behance и 26-е место среди креативных дизайн-студий в «Рейтинге Рунета».
К несчастью, мы редко публикуем работы, так что уже 35-е. Не переживайте, исправим и это.
Питекантроп
На этом этапе мы попытались сформировать позиционирование и представить услуги. Незадолго до этого разработали маскота — синего слоника Джоджо. Имя ему придумали уже наши друзья и подписчики.
Неизменной деталью оставался логотип, в котором можно разглядеть хобот и глаза.
В линиях лого вы могли разглядеть и другие смыслы, поэтому если сложно удержаться от комментариев
Главная проблема прошлой версии — фокус не на содержание, а на попытку быть «особенными», «некаквсешными». В то же время из-за коммерческих задач и череды отпусков над макетами работали «каждый по чуть-чуть». В итоге собрали одного монстра доктора Франкенштейна, который нарушал законы юзабилити и отталкивал людей.
Осознание, что нужен другой сайт, пришло ещё до релиза. Править эту было бесмысленно. Однако, переделывать ресурсов не было — состав команды частично сменился и рук впритык хватало на внешние проекты.
Сайт Разумный
Это только альфа, но уже похоже на сайт здорового человека. Кейсов стало куда больше, хотя это далеко не все. Лайфхак: если вы в заявке оставите настоящий номер или email, мы покажем вам портфолио с релевантными вашему проекту кейсами.
Впереди больше кейсов и статей во внутренний блог, разработка страниц о команде и карьере в Mojo, доработка страниц с услугами и многое другое. Хотя наш PR-менеджер нагнетает, что новый редизайн начнём через полгода.
Из интересного — мы добавили ленту событий, чтобы больше рассказывать о нашей жизни и достижениях и чаще выходить на связь. Во время тестов люди оценили. Надеемся, что вам тоже понравится.
Как мы редизайнились
Проектирование, дизайн, тесты на пользователях, сбор фидбека, разработка и правки заняли 8 месяцев. Больше половины времени мы отбивались от комментариев под каждой статьёй.
Компания развивалась параллельно, и за это время мы:
занялись тимбилдингом и HR-брендом, сформулировали ценности компании
- сформировали план обучения для команды
ввели внутреннюю валюту — моджопики. Их можно потратить на плейстейшен, кресло-качалку, сертификат в SPA и вообще всё, что захочешь.
- открыли стажировки с полноценными программами обучения
- сфокусировались на доверительных отношениях с заказчиком.
Лучше всего, когда мы — одна команда. Для этого проводим совместные воркшопы, вовлекаем всех ЛПР, чтобы избегать сюрпризов накануне релиза, используем гибкие методологии.
- доработали фирменный стиль и выпустили мерч
Изменения в HR-политике и клиентском сервисе отражались на нашем позиционировании. Постепенно мы поняли, что Mojo — о людях и для людей. Новые процессы влияли и на дизайн.
Основная сложность в разработке сайта для собственной компании — согласования. К работе снова подключилась большая часть команды, поэтому правки собирали и вносили целую вечность. ЛПР-гидра из дизайнеров и маркетологов — тяжёлый заказчик.
Фирменный стиль
Человекоцентризм — фундамент бренда. Нужен высокий уровень эмпатии, чтобы работать с командой, выстраивать долгосрочные отношения с клиентами и делать продукты для людей. Мы искали визуальные образы, которые отразят эту ценность.
Смайлы отражают суть команды — все разные, но части единого целого. Да, мы знаем, что звучит банально.
Фирменные цвета оставили прежними — синий, чёрный и светло-серый. Гарнитура прошлой версии сайта не выдерживала критики. Graphik LC Web подобрана для максимально комфортного восприятия информации.
Мерч
Разрабатывали понятным вне контекста и привлекательным. Так, чтобы носить его хотелось не только сотрудникам.
Футболка «Единое целое»
Для людей внутри команды он призван показывать, что в рабочем процессе наша команда и клиент — партнёры, которые работают рука об руку.
Пунктирная линия — клиент. Круг из текста — команда Mojo. Буква «о» в виде залитого круга — точка пересечения.
Логотип Mojo внедрили в мерч нативно и едва заметно, чтобы подтолкнуть носить фирменные худи, футболки и лонгсливы и людей не из команды.
Пунктирная линия — часть фирменной графики. Она была в первых версиях иллюстраций для сайта.
Пользователи на тестах её невзлюбили, поэтому от таких анимаций мы отказались. Теперь пунктир можно встретить на мерче и в визуалах для соц. сетей.
Свитшот «Стремись»
Призывает идти вверх и развиваться. Саморазвитие — одна из ценностей нашей компании. Транслируем её во все сферы жизни: учёбу, работу и личные взаимоотношения.
Глагол в повелительной форме — своего рода call to action
Худи «Балансируй»
Воодушевляет человека на поиск равновесия в жизни. Наша команда постояннов поиске баланса между работой, обучением и отдыхом.
Ну и куда без маски в ковидные времена третьей волны
Вместо итогов
Проект шёл долго, но лучше поздно, чем «как тогда». В нашей жизни хватило экспресс-дизайнов, подходим к процессам осознаннее.
Пишите в комментариях или нам в личку, как вам редизайн? И не забудьте +1, если понравилась статья, редизайн или всё сразу :)
Подписывайтесь на Mojo-блог в футере сайта — там тоже будет выходить полезный контент.
Больно
Саддам Хусейн
Комментарий недоступен
воу!
Рады, что вам понравилось!
мое почтение , отличный подход !
Спасибо за такую оценку наших трудов 💙
Классификация сайтов - топ)))
Никак не могли выбрать, какую классификацию взять — эту или настоящую, которую прикрепили картинкой
стало аккуратнее и нагляднее)
Спасибо, мы старались 💙
Ох, логотип хорош! А вот слонёнка можно сделать более мультяшным, например, что-то в духе прикрепленного ниже скриншота.
Молодцы!
вау!
Отличный выбор для первого комментария на vc.ru
Стало хуже, некрасиво, не стильно, цвета неприятные, композиция разваливается
Если что, мы открыты к конструктивной критике
Некрасиво, мне не нравится, шрифты не те
Комментарий недоступен
Рисуйте так, чтобы людям нравилось безоговорочно. А все оговорочные из серии, нет конструктивна это все детский лепет дизайнеров.
А че фон такой унылый? Градиент не умеете? Ну вот Дмитрий Кирсанов, например, умеет и любит градиент и всем советует.
Ну и это, в css уже изобрели анимацию и даже блюр. Ваще огонь, если сделать хорошо. Ребята вы похоже талантливые, сделайте радостно, а не как стенгазета у Лебедева.
а давайте весь мир в градиент? стили на то и стили что они разные.
Если вы присмотритесь, то увидите, что в мире нет ни одного плоского цвета и всегда есть градиент. Поэтому, отвечая на ваш вопрос, не надо красить, все уже покрашено до вас :)
Что-то такое, сильно похожее на лебедева. Не нравится.
А сайт когда почините по скорости загрузки?
Так тоже неплохо
Это внутренняя страница. Загружается 21 секунду. Прекрасно же.
А вы быстрые сайты умеете делать или клиенты будут получать такое же как вы себе сделали?
У нас основной трафик с десктопа, поэтому в первую очередь занимались оптимизацией этой версии.
Но будет круто, если снова скопируете в комментарии рекомендации из PageSpeed, чтобы мы точно знали, с чем работать 👍
Основной трафик с ПК это мне знакомо, у нас тоже с ПК траф. Но дело в том, что вы не настроили сквозную аналитику и не знаете конверсию мобильного и ПК трафика.
А забить на него - это дело простейшее.
Вот вам рекомендации из свежайшего Лайтхаус 8.1, они еще лучше чем пейджспид. он так пока не умеет: https://lh.loading.express/reports/1626468248.report.html.
Вот вам рекомендации из loading.express:
https://loading.express/?test_id=60f1ef156ed3a456e849b987&server=spb-1-monitor
Чем-то еще могу помочь?
Давайте ваш сайт ускорим?
Два похожих релиза ребрендинга в один день :)
У них тоже симпатичный!
«ввели внутреннюю валюту — моджопики.» - прочитала поджопники😅 ну, так, жизненно)
Иногда в жизни нужен и «поджопник». Главное вовремя и правильно поданый :)