У нас новая корзина. Рассказываем, почему это хорошо

Однажды мы решили присмотреться к нашей корзине и прикинуть, чего в ней не хватает, — оказалось, нужно так много всего, что лучше нарисовать заново. Рассказываем, что нового в новой корзине

10 июня 2021 г.

У нас появились опции оплаты. Раньше купить шрифт через корзину можно было только с помощью карты — для покупки по договору и банковскому переводу приходилось писать нашему менеджеру. Теперь собрать заказ и указать данные юрлица (или ИП) можно прямо через корзину. А если вам не нужны особые условия договора, можно принять нашу стандартную оферту — в таком случае не потребуется платить за дополнительную работу нашего менеджера, юриста и бухгалтера.

Интерфейс усложнился, но мы проследили за тем, чтобы всё было максимально понятно и комфортно — все цены, опции использования и данные покупателя видны на основном экране. Нажмите на кнопку редактирования, укажите данные покупателя во всплывающем окне, закройте, проверьте — и можно оплачивать.

Мы сделали заметнее скидку, которую всегда даём при покупке нескольких начертаний. Чем больше вы покупаете, тем больше экономите — иногда целое семейство со скидкой стоит столько же, сколько несколько начертаний без учёта скидки. Теперь корзина напоминает об этой приятной опции. Ещё мы добавили опцию видеолицензии — раньше договариваться об использовании наших шрифтов в видео приходилось в переписке.

Не отходя от кассы теперь можно получить пояснения по скидкам, типам лицензий today и tomorrow, опциям оплаты и специфике заполнения некоторых полей — просто нажмите на подчеркнутый текст.

Если вы взяли бесплатную пробную лицензию tomorrow, мы напомним, что шрифты нельзя использовать абсолютно нигде и нужно удалить по прошествии двух дней, — а если вы покупаете только веб- или апп-лицензию, мы напомним, что для работы в Фигме вам необходима десктопная.

Мы пересмотрели и упростили многие пользовательские сценарии — например, для регистрации теперь требуется намного меньше данных, подробную информацию можно будет заполнить при покупке.

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

Все тексты в корзине переписаны понятным человеческим языком — юридические термины остались только в самых необходимых случаях.

Очень скоро корзина станет ещё приятнее — при покупке нескольких начертаний одного семейства все опции и данные лицензирования можно будет указать один раз. Кроме того, можно будет скопировать ссылку на конкретную собранную корзину, чтобы передать её коллегам. А ещё мы переделываем личный кабинет — смотреть уже совершённые покупки, скачивать документы и шрифтовые файлы станет намного удобнее. Но это уже немного другая история.

katya

Я занимаюсь взаимодействием не только между человеком и машиной, но и между несколькими людьми или целыми отделами. Работала в топовых диджитальных-агентствах (Студия Олега Чулакова, CreativePeople, ONY), а сейчас у меня собственная практика — NDA.design. Проект корзины type.today мы делали вместе с Данилом Алтыновым — я занималась UX, а он UI. С Даней мы вместе работали в Студии Чулакова, он был моим арт-директором и помогал постигать мир интерфейсов. И вот, спустя много лет, мы продолжаем совместно работать над проектами.

Работа над редизайном type.today началась в 2019 году, когда Илья попросил сделать аналитику сайта и выявить проблемы мобильной версии. Самой большой сложностью было то, что в мобильной версии всё было очень мелко (тексты, кликабельные компоненты), не было достаточного количества пространства между разными сущностями. Помимо этого, много чего приходилось делать вручную, отправляя запрос по почте. При этом сайт прекрасно функционировал уже четыре года.

В начале 2020 года мы приступили к переделке корзины. Всё началось с длинных разговоров с Ильёй Рудерманом — он рассказывал про бизнес-процессы, мы придумывали решения. Всё шло классно, но сложность вызывал большой рабочий загруз: у каждого днём было много работы, вечера хотелось проводить с семьёй, а когда все засыпали, мы могли спокойно созвониться и обсудить проект, обычно это было около полуночи по Москве. Когда мы приходили к решению, которое устраивало обоих, то шли к Юре и обсуждали наработки все вместе. Это была очень удобная схема — Юра был менее погружён в процесс и задавал правильные вопросы со стороны. В итоге мы создали большую карту сценариев, которая затрагивало все главные потребности пользователей в корзине.

sc-cart

sc-auth

Карта показывает верхнеуровневые сценарии действий пользователя — то есть действия в идеальном раскладе. Она нужна, чтобы донести последовательность действий всем участникам команды (в том числе тем, кто ни разу не работал с картами). Здесь мы упрощаем количество действий и не отображаем микросценарии ошибок, не визуализируем сущности (страницы, попапы и прочее)

Описали, кто может совершать покупку на сайте; продумали, что будет, если пользователь зарегистрирован как физик, но хочет купить как юрик; варианты оплаты и опции лицензирования; покупку большого количества начертаний для одного проекта; спроектировали максимально простой путь ухода в смежные микросценарии и лёгкий возврат в предыдущие точки интерфейса; продумали каждое слово в новом интерфейсе.

Изначально казалось, что все потребности бизнеса лежат на поверхности. Но некоторые функции появлялись неожиданно — например, парни почти случайно проговорились о проблеме с тестовыми лицензиями, которые пользователи всё время хотят использовать в проектах (некоммерческих, своих портфолио и учебных работах). Решение было на поверхности: нужно напоминать пользователю на каждом шаге, что эти файлы нельзя использовать в работе — вообще никак. И если говорить о визуализации данных — это один из немногих случаев, когда мы используем в нашей корзине акцентный цвет, мы выделяем фирменным ярко-розовым название шрифта, цену и предупреждение о том, что лицензия не даёт никаких прав.

10

А через два дня присылаем уведомление, что файл шрифта нужно удалить с компьютера или купить лицензию. Это была забавная мысль — «Время истекло. Осторожнее, ты можешь стать пиратом! Купи лицензию или удали файл».

11

Когда мы взялись за саму графику, у нас получился классический современный интерфейс — с иконками, разделителями, уведомлениями на плашках.

12

Первым же комментарием Ильи и Юры было: «Всё очень сложно, нужно упрощать». Мы подумали: «Ну куда ещё упрощать», но ребята задавали вопросы о том, какие дополнительные смыслы могут нести иконки, дополнительные и совсем неуместные. Эти вопросы лучше раскрывали ту идеологию визуальной коммуникации, которую мы должны были отобразить. И второй подход был про типографическую проработку корзины — мы заменили все иконки на текстовые кнопки, убрали плашки с заливками и смягчили акценты. Вначале казалось, что без всего этого останется голый текст. Но в итоге получилось чище и легче для восприятия.

Любой подобный проект требует колоссальной вовлечённости не только исполнителя, но и заказчика. Нельзя сказать, что всё было сделано лично мной и Данилом — мы сами не смогли бы сделать проект, не имея понимания продукта, которым обладают владельцы. Илья, Юра, редакция — все потратили очень много труда, чтобы найти решения, которые помогли сделать работу над проектом приятной,
а новую корзину — понятной, удобной и способной принести прибыль для бизнеса и заинтересовать пользователя.

14


Команда type.today благодарит NDA.design за вдумчивость, терпение, погружение в нюансы и особенности нашей работы, а также команду Perushev & Khmelev за оперативную реализацию всех идей.