Свежий кейс
Книги, море, «Магеллан»
Книга и море — шикарное сочетание. Жаль только, встречается редко. Мы решили исправить эту несправедливость и совместили море и книги в интернет-магазине иностранной литературы «Магеллан».
История «Магеллана» началась в 1999 году с офлайн-магазинчика, который поставлял книги на иностранных языках в далекий Новосибирск. А сегодня это уже крупная рыба на российском рынке иностранной литературы. Со своим крепким сложившимся комьюнити. И хотя у «Магеллана» был сайт, пришло время обновить его, добавить функций, высечь лишние и вообще сделать круче. Как мы умеем :)
Задачи
- Обновить дизайн сайта, при этом сохранить и улучшить уже имеющиеся фишки. Заморочиться стоило для того, чтобы сделать переход на новую версию комфортным для постоянных посетителей, привыкших к старому сайту.
- Улучшить поиск и навигацию, добавить полезные фичи, которых не было на сайте.
- Навести порядок в обработке и сопровождении заказов.
Аналитика
На этом проекте информацию о болях и хотелках стейкхолдеров аналитик собирал не один — ему помогал заказчик.
«Магеллан» запомнился мне подробной обратной связью и желанием заказчика сделать лучший сайт для клиентов. Разработку проекта мы начали с разбора пожеланий покупателей магазина — для этого заказчик провел среди них опрос: выяснил, что нравится, что нет и чего им не хватает.
Дмитрий
Аналитик
Так мы из первых рук узнали, что не устраивало клиентов.
Портреты персон
На основе полученных данных мы уже разрабатывали новую структуру сайта, фишки добавляли.
Заказчик очень трепетно относится к своим клиентам. Основная ЦА — юрлица и индивидуальные предприниматели. Но за время существования «Магеллана» из них сформировалось особое комьюнити. Они собираются на совместные мероприятия, общаются. Поэтому было важно сделать лучше, чем было, и удобнее именно для них.
Заказчик очень трепетно относится к своим клиентам. Основная ЦА — юрлица и индивидуальные предприниматели. Но за время существования «Магеллана» из них сформировалось особое комьюнити. Они собираются на совместные мероприятия, общаются. Поэтому было важно сделать лучше, чем было, и удобнее именно для них.
Дмитрий
Аналитик
Прототип и результат
В разработке структуры нового сайта мы учитывали специфику интернет-магазинов учебной литературы по иностранным языкам: продумывали удобный каталог и подробный поиск. Смотрели, как это реализовано у конкурентов. И нащупали больное место, общее для них всех: учебные комплекты. Но об этом — ниже.
Дизайн
Заказчик был морально готов к переменам. Поэтому у нас сам собой получился хардкор-ребрендинг. Был сайт синий с русалками и осьминожками — стал оранжевый, плоский и с кораблями.
На старом сайте было много цветов, не было какого-то единого стиля. Нашей главной задачей было сделать четкий и аккуратный e-commerce. И предложенный вариант зашел с первого раза.
Евгений
Арт-директор
Карточки товаров, каталог, главная страница... Здесь нет ничего лишнего. Правильно расставлены акценты, цвета не раздражают и не мешают читать описание. В шапке фон-карта продолжает тему, заданную названием магазина, но не отвлекает. И как бы настраивает тебя путешествовать, исследовать сайт.
Кроме этого, по сайту разбросаны приятные маленькие фишечки: замечаешь случайно анимацию кораблика в логотипе — и сразу улыбка на лице появляется :)
Кроме этого, по сайту разбросаны приятные маленькие фишечки: замечаешь случайно анимацию кораблика в логотипе — и сразу улыбка на лице появляется :)
Тамара
Дизайнер
А ещё приятная анимация спрятана в нашем слоне — не забудьте его потрогать.
Важная часть интернет-магазина — личный кабинет. В нём тонны информации, и всё это нужно было аккуратно собрать, добавить новые фичи и оформить так, чтобы бывалые пользователи, привыкшие к старому сайту, не запутались. Поэтому там чисто и аккуратно.
Важная часть интернет-магазина — личный кабинет. В нём тонны информации, и всё это нужно было аккуратно собрать, добавить новые фичи и оформить так, чтобы бывалые пользователи, привыкшие к старому сайту, не запутались. Поэтому там чисто и аккуратно.
Разработка
Мы обещали рассказать про боль книжных интернет-магазинов — учебные комплекты. Что ж, время пришло.
Учебники иностранных языков обычно покупаются не по одному, а курсами: их берут вместе с рабочей тетрадью, книгой для учителя и т.д. В других интернет-магазинах, чтобы найти нужную серию, нужно переходить со страницы на страницу. А мы сделали удобнее.
В разделе «Учебники» пользователь видит составной товар (серию). Внутри — компоненты (учебники, рабочие тетради, кассеты). Компоненты разбиты по уровням. И с одной странички сразу можно накидать в корзину необходимые.
В разделе «Учебники» пользователь видит составной товар (серию). Внутри — компоненты (учебники, рабочие тетради, кассеты). Компоненты разбиты по уровням. И с одной странички сразу можно накидать в корзину необходимые.
Дина
Руководитель проекта
Поиск на сайте «Магеллана» понимает пользователей с полуслова. Если нет, дайте нам 5 минут в админке — поймет.
Мы сделали специальный тэговый поиск на сайте. Популярным товарам можно задавать дополнительные слова, по которым пользователи их найдут. Например, учебные комплекты «Activate!», если поковырять настройки, можно найти по запросу «Эктивэйт». И, знаете, так действительно ищут.
Мы сделали специальный тэговый поиск на сайте. Популярным товарам можно задавать дополнительные слова, по которым пользователи их найдут. Например, учебные комплекты «Activate!», если поковырять настройки, можно найти по запросу «Эктивэйт». И, знаете, так действительно ищут.
Я училась на инязе и подтверждаю: обычная ситуация, когда говорят название учебника в большой аудитории, и ты записываешь, как услышал. Если знаний языка нет вообще, то остается только надеяться, что поиск магазина и Гугл его поймут :)
Дина
Руководитель проекта
Пока мы шлифовали поиск, столкнулись со странным поведением Умного фильтра Битрикса.
В каталоге «Магеллана» есть справочники на 2 тысячи элементов и больше. Из-за этого смарт-фильтр Битрикса генерировал 12 тысяч запросов на 1 странице. Оказалось, что он на каждое значение делает запрос в базу, хотя по-хорошему хватило бы и 1 запроса. Поправив этот момент в смарт-фильтре, мы ускорили его в несколько раз.
Денис
Разработчик
И вообще во время разработки «Магеллана» мы знатно натерпелись от Битрикса, а он — от нас :) В тот момент как раз вышла его новая версия — пришлось переезжать.
Когда доделали оформление заказа, решили обновить Битрикс с версии 15.5 до 16.0 :) Пришлось переписать оформление заказа на «D7». При этом документации нет, в устаревших классах не написано, что использовать, в общем п(ಠ_ಠ)ц. К тому же все, что есть в «D7», сырое и непонятно, можно ли вообще использовать те или иные классы, т.к. некоторые новые из них уже помечены как устаревшие.
В общем, пришлось копаться в кишках Битрикса. Приятного было мало.
В общем, пришлось копаться в кишках Битрикса. Приятного было мало.
Денис
Разработчик
Но мы победили :) И даже поделились с разработчиками Битрикса своими наработками.
И теперь у «Магеллана» сочный сайт с крутой 404-ой страницей, слоном в подвале и удобной мобильной версией. Кстати, 404-ю придумали даже вперед главной — обязательно туда загляните.
И теперь у «Магеллана» сочный сайт с крутой 404-ой страницей, слоном в подвале и удобной мобильной версией. Кстати, 404-ю придумали даже вперед главной — обязательно туда загляните.
Лишь малая часть соленого моря, которое живёт на 404-ой странице.
Готовый сайт