Uxuiтельный буст, или как подружиться с UX за три недели

В декабре 2020-го мы с ребятами с нуля проектировали собственные digital-продукты — от идеи до презентации упакованных решений. По итогам UX/UI-буста под руководством Богдана — Experience Designer с десятилетним опытом в дизайне — родилось 5 классных концептов.

Среди участников буста были ребята из Сбера, WildBerries, Спортмастера, МТС, Студии Олега Чулакова и других компаний. Сразу отметим, что формат буста, предложенный Богданом, оказался интересным и эффективным для дизайнеров с самым разным бэкграундом. Предлагаем почитать о нем подробнее по этой ссылке.

Мы — Оксана и Никита — в ходе буста разработали проект студенческой онлайн-библиотеки LexLib. В этой статье расскажем о стоявших перед нами задачах, проведенных исследованиях и решениях, к которым мы пришли, а также подведем итоги нашего участия в бусте.

К бусту мы подошли с разным образованием и опытом.

Я — Оксана — проектный менеджер лингвистической компании, около года координирую разработку платформы для переводчиков и проектирую ее интерфейс в паре со штатным дизайнером. Окончила филфак МГУ, но всю жизнь со страстью смотрела в сторону дизайна. На протяжении года осваиваю теорию и софт и хочу выйти на тот достойный уровень, который позволил бы работать в должности UX/UI-дизайнера.

Как я узнала об uxuiтельном бусте?

Среди множества каналов о дизайне в моем телеграме есть пара-тройка действительно полезных — и для скиллов, и для мотивации. Один из таких каналов и привел меня на uxuiтельный буст.

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

Спустя месяц моего пассивного чтения чатика Богдан объявил о наборе на первый uxuiтельный буст. Для меня это был отличный шанс познакомиться с другими дизайнерами и пройти все этапы проектирования собственного продукта — с ментором, чей образ мыслей был хотя немного, но знаком.

_____________

Я — Никита — графический дизайнер в бизнес-консалтинговой компании. На профессиональном уровне занимаюсь дизайном около полутора лет, в основном графическим оформлением сайтов и цифровой полиграфией. Окончил политех по специальности Промышленный Дизайн. Обучаясь в вузе, я нащупал и понял философию дизайна, приобрел довольно много hard-скиллов и в целом втянулся в профессию. На своей первой работе в качестве full-stack дизайнера я поверхностно соприкоснулся с продуктовым дизайном и понял, насколько это круто. Руководствуясь идеей, что деятельность должна быть в меру сложная и полезная, я решил развиваться в этом направлении.

Как я узнал об uxuiтельном бусте?

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

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

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

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

Мы проанализировали ответы респондентов — выпускников бакалавриата и выпускников/студентов магистратуры в возрасте от 19 до 24 лет. Приведем здесь самые важные выводы:

1. Респонденты были заинтересованы в удобном сервисе для поиска учебных материалов.

Большинство отметили, что не ограничиваются поверхностным поиском литературы по предметам. При этом безуспешный поиск материалов приводит к академической неуспеваемости. Рабочего решения этой проблемы у респондентов не было.

2. Целевая аудитория не была готова платить за доступ к учебным материалам. Было целесообразно предоставлять бесплатный доступ ко всем материалам каталога.

Хотя доход большинства опрошенных во время учебы превышал 10 тыс. руб., свыше 50% респондентов никогда не тратились на учебные материалы. «Пиратские методы добычи материалов» — основной способ получения доступа к учебной литературе, который отметили респонденты.

3. В ридере приложения необходимо было предусмотреть возможность поиска по тексту, копирования текста, цитирования (в том числе при работе со сканированными материалами).

У существующих на рынке учебных онлайн-библиотек мы обнаружили существенные недостатки (один или несколько из перечисленных):

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

JTBD — максимально полезный фреймворк, который помогает сконцентрироваться на ценности продукта. Нашей целью было определить возможные причины, по которым пользователи не будут «нанимать» продукт. Мы сформировали гипотетические Job Stories, которые нам нужно было подтвердить или опровергнуть в результате интервью:

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

Мы опрашивали студентку выпускного курса бакалавриата, которая занимается преподаванием испанского. Она рассказала о том, как в последний раз искала учебные материалы: статью для написания выпускной работы и учебник по испанскому языку. Для анализа полученной информации мы использовали фреймворки «Силы прогресса» и «Таймлайн».

Мы успели провести лишь одно интервью JTBD, но оно позволило вывести несколько полезных инсайтов. Особенно ценными были выводы в отношении привычек пользователя:

В результате сформировались следующие Job Stories:

Перечислим здесь выводы из интервью JTBD. Они касаются бизнес-модели сервиса и состава его библиотеки.

На основе JTBD и результатов опроса мы сформировали две user personas. Они должны были стать комплексными портретами наших типичных пользователей с их болями, страхами и желаниями.

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

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

Первой задачей в процессе UX-проектирования было создать информационную архитектуру сервиса и показать пути пользователя.

Этот процесс занял у нас несколько итераций — от составления персональных карт до объединения наших идей в единое целое и полишинга. Особое внимание мы уделили тому, чтобы ни один из сценариев не уводил пользователя в тупик. В результате у нас получился подробный дизайн-артефакт, которым мы руководствовались при дальнейшем проектировании.

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

Параллельно мы начали собирать референсы и делать наброски экранов на бумаге. Мы поэкспериментировали с расположением элементов на экране и отметили для себя некоторые удачные дизайн-паттерны. Эти задачи помогли запустить творческое мышление и подготовиться к дальнейшей работе над продуктом.

Перед тем как отрисовать первый экран, мы продумали графический дизайн нашего продукта. Главным источником вдохновения стало приложение книжного сервиса Blinkist, сдержанность и приятный минимализм которого мы взяли за основу.

Работу над графическим дизайном мы начали с подбора шрифтовой пары и определили правила использования шрифтов в приложении. Для нас было важно, чтобы шрифты имели качественное кириллическое начертание литер, а основная гарнитура подходила для работы с большими объемами текста на маленьких форматах. Поэтому наш выбор пал на сочетание Literata (в качестве заголовочных шрифтов) и Source Sans Pro (в качестве контентного).

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

При выборе иллюстрации старались избегать похожих на те, что были использованы в Blinkist: по нашему мнению, они перегружали интерфейс. Мы искали что-то более минималистичное и в итоге решили делать иллюстрации, приближенные к стилю пака abstrakt.design.

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

Доведя первый экран до ума, мы перешли к отрисовке остальных. Для того чтобы ускорить процесс, мы разделили работу над простыми экранами, но сложные части продукта (такие, как ридер и карточку материала) проектировали сообща. Итогом нашей работы стали более 40 фреймов с экранами и их состояниями.

Конечно, мы не отрисовали абсолютно все части нашего продукта — у нас попросту не было столько времени. Но мы охватили большинство самых важных сценариев, которые покрывают основные боли, обнаруженные в процессе исследований.

Результат нашей работы мы оформили в кейс, который представили всей группе первого uxuiтельного буста. Иначе говоря, ты не просто выкладываешь проект на Behance — ты продаешь свой продукт критически настроенной аудитории, доказывая его ценность. Опыт был крайне полезен: мы учли замечания Богдана, коснувшиеся речи, структуры и логики выступления.

Итогом uxuiтельного буста стал первый для нас обоих полноценный продуктовый кейс. Примерно половину времени мы посвятили UX-исследованиям, с которыми тоже пришлось работать впервые. Мы поняли, что ключевые для продукта решения принимаются исключительно на основе исследований. При этом не менее важно честно интерпретировать их результаты, не подстраивая продукт под себя.

Важным и приятным для нас дополнением стала возможность поработать в команде. Мы считаем, что это улучшило конечный результат и сделало процесс работы над продуктом максимально приближенным к реальности. Для некоторых из нас это был первый — и довольно удачный — опыт погружения в профессиональную среду и самое начало пути UX/UI-дизайнера.

Так что, если вам интересен продуктовый дизайн и вы уверенно работаете в Figma, Adobe XD или Sketch, uxuiтельный буст — отличный вариант, чтобы развить бизнес-мышление, UX-навыки и дополнить ваше портфолио сильным кейсом. Мы надеемся, что скоро из участников буста сложится тесное дизайнерское комьюнити, где мы сможем развивать друг друга и профессионально расти с каждым днем.