CCPRO

Сайту исследовательского центра CCPRO при Университете штата Вашингтон нужен был редизайн. В день на него приходят больше 30 тысяч человек, а он был перегружен, в нём трудно было ориентироваться, и он не проходил WCAG 2.1. Как ведущий UX/UI-дизайнер я делал из него доступную и удобную платформу для очень разных людей, которая помогает университету в исследованиях каннабиса.

1. Ускорить главные задачи
   Исследователям, студентам и донорам нужно быстро найти исследование, записаться на мероприятие или скачать материалы. Цель — на 30% и больше сократить число кликов и время на задачу.

2. Пройти WCAG 2.1
   Старый сайт не выдерживал даже базовых требований к контрасту и вёрстке. Нужно было выйти на уровень AA и на телефонах, и на компьютерах, не жертвуя удобством и скоростью.

3. Сделать научные материалы удобными
   Академические порталы часто заваливают человека информацией. Мы хотели, чтобы нужное находилось максимум за три клика: фасетный поиск, чистая навигация и мобильные паттерны, которые выдерживают реальную нагрузку.

Вёл UX/UI редизайна сайта CCPRO. Улучшил сценарии, мобильную версию и доступность. Исследователям теперь нужно на 62% меньше шагов, а с телефонов сайтом стали пользоваться на 40% больше.

Три UX-исследователя, два разработчика и продакт-менеджер. На мне были UX-стратегия, вайрфреймы, дизайн интерфейса и пользовательские тесты в жёстких рамках университетской CMS.

Сайтом CCPRO пользуются исследователи, студенты и специалисты по общественному здоровью, но работать с ним было неудобно и медленно.

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

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

Этот кейс об одной главной задаче: чтобы исследователи легко находили сложные научные материалы и могли с ними работать.

Чтобы понять, где люди застревают и что им нужнее всего, я провёл сфокусированное исследование.

Интервью внутри университета

Я поговорил с 12 сотрудниками, исследователями и донорами. Главное:

• Исследователям нужен быстрый доступ к рецензируемым работам

• Сотрудникам не хватало удобных инструментов для мероприятий

• Доноры хотят сразу видеть, к чему привели исследования

Отсюда выросли измеримые цели, например искать исследование на 30% быстрее.

Пользовательские исследования

Вместе с тремя UX-исследователями мы описали ключевые персоны по опросу 150 человек и юзабилити-тестам с 20 участниками.

Основные персоны

Что выяснилось:

• 65% пользователей не могли найти конкретное исследование

• 80% назвали мобильную версию «плохой» из-за вёрстки

Конкуренты

Я разобрал пять похожих исследовательских порталов. У большинства есть:

• Фасетные фильтры в поиске

• Чистая модульная вёрстка

• Минималистичная навигация

Направление стало понятно: ясность и структура важнее академической солидности.

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

Сценарии
Для каждой персоны я разложил свой путь.
Доктору Торрес нужнее всего был общий поиск с фильтрами по типу исследования и дате.
Теперь до нужного PDF она добирается за 3 клика вместо 8.

Вайрфреймы
Сделал вайрфреймы пяти основных страниц: главной, библиотеки исследований, мероприятий, страницы о центре и контактов.
Ключевые решения:

• Модульная сетка с шагом 8 px, которая легко масштабируется

• Контрастная палитра (основной цвет #1A3C34), проходящая WCAG AA

• Шрифт Open Sans, потому что он хорошо читается

После дизайн-ревью, например, увеличили кнопки на 20%, чтобы на телефоне по ним было легко попасть.

Прототипы и тесты
Собрал интерактивные прототипы в Figma с живым поиском и проверкой форм на лету.
Протестировал их на 15 людях из разных персон. Главное исправление:

• 40% участников не замечали вкладку «Мероприятия». Я перенёс её в основную навигацию, и задача стала решаться на 15 секунд быстрее.

За первый месяц после запуска: