История разработки одностраничного сайта MindСruncher | блог Evergreen 8 История разработки одностраничного сайта MindСruncher | блог Evergreen 9 История разработки одностраничного сайта MindСruncher | блог Evergreen 10

История разработки одностраничного сайта MindСruncher

#Кейсы

Как всё начиналось

У нашего клиента Юрия Бакая есть бизнес в Америке – консалтинговая компания MindCruncher – которая на тот момент уже много лет помогала стартап-проектам и небольшим компаниям с ограниченными бюджетами выйти на рынок США. С текущим сайтом было плохо:

  • дизайн сильно устарел;
  • сайт сложный для восприятия;
  • нет места для полезной информации.

Результат работы

История разработки одностраничного сайта MindСruncher | блог Evergreen 11

Постановка задачи клиентом

MindCruncher ставил перед новым сайтом такие цели:

  1. Получить новых клиентов;
  2. Показать, что компания живая и современная;
  3. Показать рост клиентов и конкурентные преимущества;
  4. Представить весь объем услуг;
  5. Ответить на часто задаваемые вопросы.

И был ряд пожеланий по визуальной компоновке: на стартовой основные моменты вынести в виде инфографики (какие задачи клиент решит обратившись в МindСruncher, география клиентов, может какой-то график, для отображения опыта, рост клиентов по годам, перечень самых часто задаваемых вопросов с ответами)

Разработка проекта

Процесс разработки корпоративных сайтов в Evergreen:

История разработки одностраничного сайта MindСruncher | блог Evergreen 12

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

Первое, что мы увидели, все нишевые сайты сделаны в старом дизайне и не вызывают доверия, особенно сильно мы сомневались, что увиденный формат подачи информации будет вызывать доверие у директоров и собственников бизнеса. Самыми распространенными ошибками были горы плохо структурированного текста на внутренних страницах, нечитабельные шрифты, было непонятно чем компании отличаются от сотен подобных (нет УТП - уникального торгового предложения), информации что компании “живы” и работают, статистики по количеству клиентов.

Итого в результате анализа мы поняли, что необходимо работать над доверием клиентов, показать УТП компании, показать с какими клиентами она работает, рост клиентов по годам, длительность работы с ними, познакомить будущих клиентов с владельцем, дать FAQ с ответами на часто задаваемыми вопросы.

Обсудив с клиентом наше видение будущего сайта и получив от него согласие того, что мы мыслим в одинаковом направлении - мы приступили к разработке прототипа.

Разработка прототипа

Нашей главной задачей было сделать удобный конверсионный сайт, который даст лиды и обращения клиенту.

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

История разработки одностраничного сайта MindСruncher | блог Evergreen 13

После обсуждения структуры сайта и проработки персон, мы приступили к разработке прототипа – хотел бы я так написать, но нет.

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

Первый вариант прототипа

История разработки одностраничного сайта MindСruncher | блог Evergreen 14

Из правок Юрий попросил внести небольшие правки и рассказать, почему выход на американский рынок “без поддержки” достаточно рискованный шаг и в чем ценность MindCruncher. Перед этапом дизайна собрали весь материал и добавили его в прототип.

Финальный вариант прототипа

История разработки одностраничного сайта MindСruncher | блог Evergreen 15

Дизайн

Процесс дизайна начали с создания и обсуждения доски настроения (moodboard), в этом документе мы собираем успешные на наш взгляд примеры стилистики для будущего проекта. Дальше просим клиента откомментировать то, что понравилось/не понравилось и почему.

История разработки одностраничного сайта MindСruncher | блог Evergreen 16

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

Утвержденный концепт

История разработки одностраничного сайта MindСruncher | блог Evergreen 17

Дальше мы нарисовали адаптивную версию для планшета и телефона.

История разработки одностраничного сайта MindСruncher | блог Evergreen 18

Верстка проекта

Сложность была в разработке паутины на первом экране

История разработки одностраничного сайта MindСruncher | блог Evergreen 19

и в разделе FAQ

История разработки одностраничного сайта MindСruncher | блог Evergreen 20

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

Разработка на MODx

Этот проект помог нам подготовить каркас для последующих разработок лендинговых сайтов. В каркас вошел MODx, набор необходимых компонентов (геотаргетинг, мультиязычность, компонент блочной сборки, ajax обработка форм) и набор кастомных обработчиков для ускорения сборки.
Из особенностей разработки был переход на безопасный протокол https. Сложности были в том, что сайт одновременно работал как на http так и на https. Из-за этого были проблемы с работой компонентов(в некоторых случаях не работал ajax) и постоянным разлогиниванием пользователя из админки. Решили вопрос принудительным редиректом на https версию сайта на стороне cms.

Вместо заключения

Сегодня сайт выглядит так: https://mindcruncher.com/
Он получил награду на behance https://www.behance.net/gallery/36843503/Mindcruncher, номинации на лучший сайт дня на https://www.csswinner.com/, https://www.designnominees.com/ и https://www.cssawds.com/nominee/mindcruncher/.

Проект был запущен за 4 месяца с учетом прототипирования, дизайна, верстки, разработки, тестирования и согласований с клиентом.

Отзыв клиента после запуска:

История разработки одностраничного сайта MindСruncher | блог Evergreen 21

Юрий Бакай

mindcruncher.com
I have my company for 12 years now, and all that time I needed a good website. During those years I met and worked with number of teams and did a few versions of my site. Was never completely satisfied for different reasons, maybe my own 20 years of development experience made me too demanding. Only when I started to work with Evergreens I realized that I finally found a team I’m happy with. It is hard to find developers who can demonstrate all the necessary qualities together: high product quality; professional approach in design and development when everybody knows their part and shows outstanding performance; good timing – they’ve met all deadlines; decent prices; nice customer support – efficient, persistent yet not annoying... I was very pleased when I saw such an effort from Evergreens to make a good product as if they care about my project even more then I did. It was very important to me. I‘m happy to say that my search for a team of designers/developers is over, I already took a second project to Evergreens and will bring more when I have them.
Thank you!

О результатах которых удалось достичь с помощью нового сайта за первый год работы:

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


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

И наконец наличие сайта дает больше возможностей для распространения информации о том, что я делаю.

26.02.2017
Используемые в статье картинки взяты из открытых источников и используются как иллюстрации.
Хотите обсудить ваш проект или заказать разработку?
Отправить
Цей сайт є українською мовою. Ви можете переключити мову у меню, або зробити це зараз.