Интерфейс интернет-магазина

Владелец бизнеса до этого никогда не занимался онлайн-продажами. Он заказал прототипы в «Собаке», нанял аутсорс-разработчиков и попробовал управлять проектом из Владивостока, в девяти часовых поясах от Петербурга.
~ 650 000 ₽

Спроектировали интернет-магазин, который очень быстро стал лидером ниши на Дальнем Востоке.

Контекст

Результат

Бюджет

2013
За 9 часовых поясов от Санкт-Петербурга — но все еще в России — тоже есть интернет-магазины. И весьма крупные. Даже сети. Даже сетевые кибермаркеты: сегодня заказал в Интернете — завтра получил в ближайшей точке выдачи. И все это без оперативного склада и торгового зала.
«Кибермолл» («Домотехника») — самый большой дальневосточный кибермаркет. Сейчас. Когда мы начинали с ними работу, был только домен и эскиз логотипа. Предстояло же сделать — всё. То есть совсем всё, от найма персонала до строительства помещений. Заказчик, надо сказать, сложа руки не сидел и к нам пришел уже со своими набросками.
Прототип заказчика в Axure | Sobakapav.ru
Заказчик сам нарисовал прототип магазина в Axure
Это здорово, когда заказчик смело расчехляет Axure и пробует проектировать интерфейс самостоятельно. Ему становится понятно, что ценность работы проектировщика не в том, чтобы квадратики по экрану раскидать, а в том, чтобы сделать это осмысленно. Чем мы и занялись.
Очевидно, интерфейсы сайта и торгового киоска для кибермаркетов — задача важная. Ведь других способов сделать заказ, кроме как потыкать кнопочки и попереходить по ссылкам, у покупателей нет. На ловкость продавцов торгового зала или телефонных операторов рассчитывать не приходится: всё взаимодействие от выбора товара до платежа и отслеживания доставки должно происходить через компьютер.
Вводные от заказчика | Sobakapav.ru
Понятные вводные от заказчика
Казалось бы, ничего сложного: бери «Юлмарт» и клонируй себе потихоньку. Но так уж вышло, что опыт создания интерфейсов для «Юлмарта» у нас тоже был — и о том, что нельзя просто так взять и спионе… творчески переосмыслить чужой интерфейс, мы знали преотлично. Слишком много «но», совершенно другие технические и организационные вводные, иной бизнес-опыт, даже привычки пользователей на Дальнем Востоке отличаются от среднероссийских.
Так в чем же специфика Кибермолла? Поговорили и выяснили вот что.
Плюсы и минусы
Внятный генеральный заказчик
Очень конструктивный и ответственный управленец, быстро принимающий решения и на лету схватывающий новые для себя концепции интернет-торговли.
Работу кибермаркета можно сразу строить от потребностей пользователя.
Нет «исторически сложившихся» бизнес-процессов
Ее нет. Точнее, она как бы есть на аутсорсе, но недостаточно сильная. И всем это ясно, но коней на переправе тоже менять страшно.
Команда разработки
Его тоже нет. Но это полбеды: нет и понимания, что без руководителя проекта, на одном генеральном заказчике, такой объем работ не провернуть.
Руководитель проекта
Мы уже много раз делали и кибермаркеты, и платежные сервисы, и прочий e-commerce. Знаем, что надо, а что — лишнее. Знаем подводные грабли. Обычно опыт исполнителя особо не пригождается, но здесь бросалось в глаза: наш опыт — гораздо, гораздо больше и глубже, чем опыт заказчика, и наверняка здорово ускорит дело.
Наш зашкаливающий опыт
Для интернет-магазинов фотографии, описания и прочие отзывы — это больная тема. К счастью, у Кибермолла с наполнением каталога все было неплохо, и тут можно было хотя бы не волноваться.
Наполнение каталога
Досталось в наследство от офлайн-компании, на базе которой создается «Кибермолл». Надо использовать.
Старое техническое решение
Когда общаться, как обсуждать оперативные вопросы? Когда разница невелика (3–4 часа), можно найти общее время для созвонов и чатов. А если вы совсем не пересекаетесь с клиентом по рабочим часам?
9 часовых поясов разницы
+
+
+
+
Экстремальные сроки запуска бизнеса
Нам-то что, мы можем быстро и даже очень быстро решать свои задачи. Но с нуля за 2 месяца запрограммировать и внедрить в коммерческую эксплуатацию систему с развесистым backend'ом и сложной внутренней интеграцией? Задача на грани реальности.
Планов громадье, но что реально можно и нужно сделать в такой ситуации? И зачем?
Пожалуй, «зачем» бросалось в глаза: ясно, что у заказчика большие проблемы с командой проекта, уровнем ее профессионализма и осмысленностью действий. Значит, нам нужно сделать то, что команда прямо сейчас без внешней помощи сделать не может. И сделать это так, чтобы результаты нашей работы коллеги из «Кибермолла» могли взять в оборот — и развивать дальше уже самостоятельно.
Итак, мы делаем минимальный набор каких-то штук про цифровое обслуживание, с которыми заказчик уже дальше управляется самостоятельно. Что же это за штуки?
Мы попредлагали, заказчик посоглашался и поотказывался, и в результате получился вот такой минимальный набор задач на проект.
1. Интерфейс процедуры заказа
Ничто не должно отвлекать покупателя от оформления покупки, если уж он решил эту покупку сделать! Ни мучения со способом доставки, ни неопределенности с оплатой, ни проблемы с наличием товара — ничто.
2. Каталог товаров
Он должен быть в достаточной степени стандартным и привычным опытному пользователю. Но с учетом того, что далеко не все покупатели так уж хорошо знакомы с форматом гипермаркета и онлайн-покупками в принципе.
3. UX-сопровождение разработки
Технической команде оказалось недостаточно просто прототипов, нужно было очень плотно общаться по нюансам реализации. Иначе велик был риск сделать не то, не так и не туда.
В целом история вписывалась в нашу услугу «Интерфейсы массового обслуживания».
Процесс
Как обычно, у проекта был менеджер с нашей стороны. И проектировщик. И чуть-чуть аналитика. Плюс как внутреннего эксперта привлекли Ольгу Павлову (это было особо оговорено в контракте).
Действующий вариант личного кабинета с 2013 года | Sobakapav.ru
В 2013 году этот личный кабинет казался
вершиной удобства
Жанр кейса требует исторической правды, и вот она: работа шла не слишком гладко. Дело в том, что разница в 9 часовых поясов очень, очень мешала общению и принятию оперативных решений. Не слишком помогали ни Skype, ни телефон, ни тем более электронная почта: клиент просто работал в другом ритме, и нам никак не удавалось удержать фокус внимания генерального заказчика на проблемах и задачах проекта. Как мы не устаем повторять, коммуникация — залог (и даже заложник) успеха. В этот раз, к сожалению, именно заложник.
Типовая страница продукта | Sobakapav.ru
Типовая страница продукта. Все прототипы мы наполняет релевантным текстом, так как это создает более законченный вид, влияет на восприятие, заставляет продумывать все возможные состояния
Однако где наша не пропадала: заказчик потерялся в дальневосточном тумане — будем работать без заказчика. Благо экспертизы хватает.
Корзина товаров | Sobakapav.ru
В этом проекте мы делали только прототипы. Дизайн не трогали
Всё делали как обычно: фаза анализа, моделирование и поиск концептуального решения, а там уж и проработка деталей. Быстро-быстро и срочно-срочно.
Результат
Оглянуться не успели — а уже и вот он, достаточно хороший прототип интерфейса с достаточно четкими инструкциями. И достаточно осознавшая ситуацию команда. Ура, вроде бы все три цели достигнуты.
Axure
Финальный макет. Страница каталога
Но что за «достаточно» и почему «вроде бы»?
Дело в том, что в этом проекте у нас не было задачи найти идеальное решение. Нужно было только сделать быстро и не слишком ошибиться. Соответственно, показателем успеха была не эффективность интерфейса, а — внедряемость.
Как же оценить эту «внедряемость», по каким критериям? У нас получилось вот что.
    • Команда разработки приняла прототипы в работу.
    • Прототипы не потребовали эстетических доработок (визуального дизайна).
    • В предлагаемом интерфейсе были проработаны ключевые пользовательские сценарии.
    • С помощью справочной системы пользователи могли начать делать покупки.
    • Интерфейс универсально внедрялся и в веб-среде, и на терминалах.
    • Заказчик чувствовал уверенность в том, что дальше справится сам.
    Интерфейс реализовали почти без изменений. Этого оказалось вполне достаточно, чтобы запустить бизнес и дальше двигаться самостоятельно. Сейчас потихоньку эволюционировал и теперь выглядит вот так.
      Текущий вариант карточки товаров | Sobakapav.ru
      Со временем cybermall.ru оброс дополнительными функциями, но наши наработки заметны даже сейчас
      Слайдер и баннер на главной странице | Sobakapav.ru
      На главной странице появились слайдер и баннеры
      Смысл
      Проект был не совсем обычный. Заказчик был не совсем обычный. Результат, впрочем, получился вполне обычный: мы взяли свои знания предметной области и использовали их в полуслепом — без тестирования на людях — и очень быстром проектировании.
      Кажется, основная польза от нашей работы была в том, что мы довели ее до конца. Потому что знали, как это сделать даже без плотного участия заказчика.
      Проекты, которые кто-то начал, но не закончил, — действительно бич российского IT. На старте ведь всегда кажется, что работы немного, особой квалификации не нужно, серьезный бюджет не требуется, а исполнители выстроятся в очередь. Когда оказывается, что это немножко не так, заказчик часто сначала теряется, а потом и бросает затею на полпути.
      Бизнес «Кибермолла» все-таки стартовал. В основном, конечно, благодаря упорству и настойчивости генерального заказчика. Но и наши целеустремленность и знание, что надо — а что не надо — делать, надеемся, здорово тому поспособствовали».
      ~ 650 000 ₽
      Бюджет

      «Реальность всерьез превзошла ожидания.

      Обладая серьезной экспертизой в области розничной торговли и логистики, мы на тот момент являлись совершенными (почти) профанами в области электронной коммерции, и знания и опыт Ольги Павловой и ее коллег при обсуждении задач, проектировании нашего сайта и построении его интерфейса сослужили нам добрую службу. В процессе проработки с командой «Собаки» функциональной и иных составляющих сайта мы получили необходимый нам опыт, и дальнейшее развитие проекта происходило весьма динамично во многом благодаря правильному выбору провайдера этого опыта.

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

      Олег Александрович Косенко
      Генеральный директор, ООО «Кибермолл»

      «Кибермолл» стал крупнейшим кибермаркетом на Дальнем Востоке.

      Результат
      Другие кейсы