Разработали сервис заказа одежды для тех, кто скучает по ушедшему люксу
Бонжур, ребятки. На связи Cedro. Пришли рассказать, как мы разработали сервис для заказа одежды, обуви и аксессуаров. Такой, чтобы покупать новинки Prada или Dior без личного байера, безопасно и с доставкой в свой город.
Парочка слов о нас
Cedro — международная дизайн-студия. Создаём цифровые продукты и сервисы для web 3.0, недвижки и e-commerce. Среди клиентов — Сбер, Самолет, Skillbox, GeekBrains, Hochland и завод, который выкупил производство IKEA в России. Ведём телеграм-канал на приколе и развиваем своё реалити-шоу для молодых студий.
Про клиента и задачку
Прошлым летом к нам пришёл Пётр — классный колоритный дядя с тонной бизнес-идей.
Рассказал, что его московские друзья чахнут без Prada, поэтому у него появилась мысль — разработать сервис, чтобы можно было заказывать одежду, обувь и аксессуары из-за рубежа.
Суть такая: пользователь добавляет в корзину товары, менеджер сервиса обрабатывает заказ и отправляет его байерам. Байер берёт заказ и отправляет товары на склад сервиса. Если всё в порядке — покупка уходит пользователю, а байер получает комиссию.
И чтоб всё было просто и удобно — будто оформляешь заказ в обычном интернет-магазине.
На старте вводных было катастрофически мало. Названия Oh!Really появилось ближе к концу проекта. Большую часть времени мы ставили в макеты рыбное, которое сами и придумали.
А видение сервиса было только примерное — у Петра в голове. Вместе мы всё это структурировали и докрутили. В итоге задачка получилась такой: разработать сайт и браузерное расширение, которое позволит добавлять товары с Farfetch или Yoox прямо в корзину сервиса.
Проектировать сервис пришлось с нуля
Поэтому мы много созванивались с Петром: он делился своими идеями — а мы направляли его и предлагали свои решения.
Например, сначала он хотел, чтобы при входе на сайт пользователь сразу попадал на регистрацию. А мы двинули этот экран сильно дальше — чтобы пользователь входил в ЛК уже на этапе оформления заказа.
Флоу оформления заказа
В итоге получился суперпростой сценарий: можно либо вставить ссылку на товар в поле на главной.
Либо перейти с сайта в любой магазин или маркетплейс из списка и продолжить покупки. После установки браузерного расширения там появится брендированная кнопка «Добавить в Oh!Really».
Личный кабинет покупателя
Функционал ЛК покупателя стандартный: можно смотреть историю прошлых заказов, следить за статусом текущих, редактировать личные данные и привязывать карты.
Личный кабинет менеджера
Менеджерам ЛК нужен, чтобы обрабатывать заказы. Например, редактировать их: менять количество товаров или совсем удалять позиции, которых нет в наличии. А если всё ок — перекидывать заказы байерам и следить за статусом.
Личный кабинет байера
У каждого байера индивидуальный доступ — только к тем заказам, которые соответствуют его уровню. Уровень зависит от истории выполненных заказов и их стоимости.
В своём ЛК байер может выбрать подходящий заказ, оформить покупку и прикрепить всю информацию по заказу: трек-номер, чеки и любые другие скрины. И вывести вознаграждение, после того как сервис проверит, что с заказом всё хорошо.
Проты тестировали на друзьях Петра
Тех самых, которые тоскуют по Prada. В итоге они почти без ошибок прошли все флоу. Поэтому большая часть выводов с тестов — это идеи для бэклога.
Дизайн рисовали без фирстиля и почти без референсов
У Петра были кое-какие наброски, мы взяли их за основу, сняли требования с клиента и пошли думать.
Сначала крутили варианты с фото. Была даже такая идея: при наведении на название маркетплейса или магазина из списка подтягивать картинку с этого сайта.
Финальная версия выглядит максимально лаконично: чёрно-белая палитра, ноль фото или иллюстраций, только поле для ссылки, иконки для перехода в магазины и ненавязчивый анимированный фон.
На разработку ушло 90% времени
Самое сложное в Oh!Really — под капотом. Там и разработка на React, и интеграции, и браузерное расширение.
Расширение для браузера
Как это работает: когда пользователь первый раз заходит на сайт, мы просим его скачать расширение для браузера.
Как только он это сделает — можно заходить на сайты магазинов и маркетплейсов и списка: в карточках товаров появится кнопка «Добавить в Oh!Really».
Когда пользователь закончит покупки — все товары будут ждать его в корзине на сайте сервиса.
Интеграция с Мосбиржей
Чтобы пользователь видел цены не только в долларах или евро. А ещё и в рублях — и с учётом актуального курса.
Интеграция с Битрикс24
Мы сделали так, чтобы информация о заказах хранилась не только внутри сервиса, а ещё в CRM. Это облегчит работу менеджерам. Если покупатель позвонит и задаст вопрос о своём заказе — менеджер по номеру определит, кто это, и сразу увидит всю актуальную информацию.
Интеграция с Безопасной сделкой от Т-банка
Чтобы сервис не хранил деньги покупателей и байеров. Когда пользователь оплачивает заказ, банк замораживает сумму. Потом байер крепит в ЛК трек-номер и чеки. Сервис проверяет, что с заказом всё в порядке. И только после этого банк размораживает деньги и переводит их на счёт байера.
Теперь делаем мобильное приложение на Flutter
С тем же функционалом и дизайном, но с учётом паттерном мобильных приложений.
Что в итоге
- Разработали сервис с кучей интеграций и браузерным расширением. И почти без вводных: фирстиля, структуры или даже названия.
- Ждём, когда заработаем свои милльоны и сами будет шопиться на Oh!Really.
Команда проекта
- Ярослав Прозоровский — дизайнер
- Рома Родионов — арт-директор
- Макс Мурашов — дизайнер мобильного приложения
- Вадим Богданович — бэкенд-разработчик
- Алексей Фесенко — фронтенд-разработчик
- Саша Валов — хэд разработки
- Алла Пронь — менеджер