От идеи до кейса или как я переделал приложение КАРО

Это (не) большая история о том, как я решил сделать свой первый проект по продуктовому дизайну.

Вас ждет не такой кейс, который многие привыкли видеть. Я не профессиональный дизайнер, а только начинаю свой путь, поэтому я молод, глуп и делаю ошибки. Этот кейс про то, как я начал делать свой первый проект, оставив копирки других работ позади. Я совершал ошибки (много ошибок) и уверен, что они есть и до сих пор, просто мне, скорее всего, не хватает знаний, для того, чтобы их увидеть.

В этом кейсе моя история, мои ошибки и то, какие уроки я смог из них извлечь.

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

Я взялся за приложение одной небезызвестной киносети под названием КАРО. Рейтинги его в Google Play (3.4 звезды) и App Store (1.8 звезд) говорили о том, что оно нуждается в доработке, если уж не в переделывании с нуля.

Пользователи ругали приложение за неудобный интерфейс, хитровы... сделанную систему оплаты, сложном поиске фильмов и отсутствие выбора форматов АРТ и FAMILY. Многим также не нравилось отсутствие возможности добавить попкорн.

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

Мне удалось найти 6 человек-подопытных в возрасте от 21 до 26 лет. Кто-то из них пользовался сетью кинотеатров КАРО, кто-то просто ходил в кино, а кто-то лишь изредка заглядывал в кинотеатр.

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

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

Урок №1: лучше проводить тестирования в живую, а не в чатах раскидывать задания и ждать ответа. Это может закончиться фразой “Зайду в приложение и куплю билет” без каких-либо пояснений действий.

Начнём со сценария для каждого типа.

Я отталкивался от того, что когда человеку скучно, он хочет сходить в кино, дабы весело провести время. Ведь это и является основной задачей приложения по покупке билетов — помогать скучающим людям попасть в кино.

Перед вами сценарий для тех, кто уже знает, на что хочет сходить:

И следом сценарий для тех, это еще не знает, что хочет посмотреть

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

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

Урок №2: При такой работе надо быть максимально дотошным и стараться докопаться до всего.

Я выявил 9 основных проблем, на которые жаловались как пользователи в комментариях, так и мои добровольцы:

Я изучил 6 приложений по покупке билетов. Некоторые приложения были сделаны красиво — они радовали глаз и было понятно, что где находится. Другие же, напротив, выглядели слегка устаревшими и непонятными.

Урок №4: Я смотрел на сервисы по покупке билетов, и в этом была моя ошибка. Стоило бы еще посмотреть на другие сервисы, которые продают какие-либо услуги. При своем скудном опыте, я бы смог быстро подчеркнуть решение той или иной проблемы для своей работы, а не изобретать колесо, как говорится.

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

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

Урок №5: Если бы я сделал сперва фреймы, а только потом перешел к фигме, то не пришлось бы переделывать всё по сто раз. В продуктовом дизайне лететь быстрее паровоза — стратегия не очень, так как потом придется всё разгребать и снова переделывать.

Во время работы я делал очень много ошибок из-за своего слабого уровня, но не сдавался и свято верил, что они сделают меня лучше.

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

Урок №6: Сперва лучше продумать всё на бумаге, а уже потом уже бежать в бой.

Вторая версия была чуть лучше, но ровно до того момента, как я не запустил её на телефоне…

Запустив прототип, я понял, что кнопки опять были очень маленькими, а текст так и подавно микроскопический. Вы не поверите, но мне пришлось снова всё переделывать. Во второй раз.

Урок №7: Если речь идет о мобильном приложении, то стоит проверять его на телефоне на каждом этапе, а не делать это тогда, когда работа уже почти полностью готова.

Третья и уже финальная (!) версия наконец-то была готова и даже смогла пройти испытание запуском на телефоне и… барабанная дробь… реальными пользователями! Аве мне!

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

Урок №8: Если хочешь чему-то научиться, то ничего не стоит бояться. Было неловко подходить к людям и предлагать потыкать в своем приложении, но, на удивление, им это даже понравилось.

Я открывал им приложение на своём телефоне или кидал ссылку на макет. После этого мои подопытные получали следующие четыре задания:

Урок №9: Когда делаешь прототип, надо реализовать все возможные связи, кнопки, тыки и т. д., чтобы пользователь не играл в лотерею, какая именно из 20 кнопок проведет его дальше по лабиринту приложения к невероятному успеху.

Конечно, у моих тестирумых были некоторые проблемы с приложением, в основном из-за того, что я проводил связи не всегда в правильном порядке. Мой самый первый прототип слегка вводил в заблуждение, зато каково же было мое удивление, когда он-таки впервые заработал! Я чувствовал себя ученым, создавшим своего Франкенштейна (злобный смех) ! Первые “шажочки” моего детища были еще слабые, неокрепшие, но тем не менее, оно работало: пользовали шли по нужным мне сценариям и давали свой фидбек, который я использовал для доработки некоторых окон. Где-то по-прежнему был плохо виден текст, где-то кнопка была непонятной или незаметной. В конечном итоге, пользователи выполняли задания и им нравились мои задорные испытания (тамада хороший, и конкурсы интересные) .

Закончив работу над макетом и проведя тестирование новой версии, я убедился в том, что мои решения работают, а пользователям было удобно использовать мою версию.

Вот такие решения проблем я нашел:

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

Решение: Главный экран показывает пользователю последние новинки и актуальные новости, также добавлен небольшой анбординг

3. Неинформативная карточка фильма
Проблема: Карточка фильма не даёт достаточно информации о фильме

Решение: Изменен визуальный стиль карточки для большой информативности, в дополнение добавлена возможность ознакомиться с трейлером фильма

4. Отсутствие гибкого фильтра фильмов
Проблема: Скромный функционал и неудобство использования

Решение: Увеличен функционал и изменен визуал для удобства использования

5. Отсутствие личного кабинета
Проблема: Личный кабинет отсутствует, что не дает возможности пользователю использовать полный функционал сети КАРО
Решение: Был добавлен личный кабинет, аналогичный десктопной версии сайта

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

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

8. Отсутствие возможности добавить опции к заказу, такие как попкорн и напитки
Проблема: В старой версии приложения отсутствовала опция добавить в заказ попкорн, напитки и другие продукты, которые предлагает сеть КАРО
Решение: Я добавил опцию добавления попкорна, напитков и прочих продуктов в заказ, который можно оплатить сразу при покупке билетов

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

Решение:
- Добавлена возможность войти в личный кабинет или создать новый для оплаты покупки баллами или получения возможности их накопления
- Добавлены альтернативные способы оплаты, такие как Google Pay, Apple Pay и оплата баллами
- Были добавлены опции выбора отправки билета по номеру телефона или на электронную почту, так же было добавлено уведомление о том, что билет появился в личном кабинете, и о возможности скачать билет на своё устройство.

10. Отсутствие форматов КАРО.АРТ и КАРО.family
Проблема: в приложении отсутствуют два данных раздела
Решение: эти разделы добавлены в отдельное меню

Это был интересный опыт, из которого я усвоил множество уроков, которые не вошли в этой кейс. Я вообще сперва хотел сделать его другим, более серьезным, но отошел от этой идеи, когда начал гуглить каждое третье слово из заумных статей по дизайну. До этого уровня мне еще расти и расти, но однажды я обязательно напишу такой кейс.

На всю работу у меня ушло около 3-4х месяцев. За это время я много гуглил, читал статьи и книги по дизайну, ничего не понимал, потом начал работать над своим проектом и наконец осознал, о чем были эти книги. Я далеко не гений мысли, но с каждой своей ошибкой в макете, когда нажатием одной кнопки можно было удалить половину работы, я становился умнее и уже знал, какую кнопку нажимать не стоит. Так было со всей моей работой. Я делал, лажал, переделывал, потом снова делал, лажал и переделывал и так по кругу, снова и снова. И этот круг не закончится никогда, потому что именно он помогает стать мне лучше. Я даже смотрю на свой третий вариант работы и понимаю, что у меня не получилось бы его сделать, если бы не залажал до этого два раза.

Моя работа не претендует на звание «лучшей”, она была моей первой, моим»ДА **** ***** ЧТО ЗА ***** ТАКАЯ??!! А-а, аааа, я понял. *****, ну погнали по-новой, *****.”

P. S.: как вы, возможно, заметили, урок №3 отсутствует. Это не ошибка, не опечатка, как можно было бы подумать сперва. Это всего лишь урок, который не был усвоен.

Хочется выразить отдельную благодарность человеку, который помогал мне с этой работой, указывал на ошибки и подсказывал как лучше их исправить. Человеку, который обучил меня всему и которому я благодарен за ценные знания — Илье Сидоренко (https://iskros. com)

А также спасибо всем людям, которые помогали мне в моих исследованиях и тыкали мои кое-как работающие прототипы. Без вас я бы не пришел к тому, о чем вы только что прочитали.

Особенная благодарность моему редактору — Марии Гуриной (https://t. me/justsayingtg), которая согласилась всё это редактировать и править (даже эту самую благодарность) , с болью для своих глаз и нервной системы, ибо иначе вы бы больше обращали ваше драгоценное внимание не на сам кейс, а на мои ошибки. Не знаю, как бы я вообще без неё существовал и что-то писал.