Мой последний проект в Lambda School заключался в продолжении разработки информационной панели, которая отслеживает краудсорсинговые доказательства случаев применения силы полицией для организации Human Rights First. В то время как выявление инцидентов было работой нашей команды по науке о данных, задача команды переднего плана заключалась в том, чтобы отображать эти данные таким образом, чтобы они были точными и полезными для предполагаемых пользователей сайта. Половина нашей команды FE сосредоточила свои усилия на создании новой функции панели администратора, которая позволила бы членам команды Blue Witness одобрять, отклонять и создавать новые инциденты. Другая половина, включая меня, работала над согласованием технических целей сайта с тем, что пользователь ожидает и должен увидеть при его посещении.

Решение 3 самых больших проблем

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

1 — Доступность дополнительной и вспомогательной информации на сайте

2 — Профессиональный, визуально отполированный сайт без ошибок.

3 — Четкое сообщение о надежности и происхождении представленных данных

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

Второй приоритет был довольно открытым, поэтому я начал работать над ним, создав список возможностей для улучшения пользовательского интерфейса и существующих ошибок. Затем я разделил эти задачи на 3 категории: исправления с высоким, средним и низким приоритетом. Оттуда я работал со своей командой, чтобы решать их в порядке убывания важности. Самая большая ошибка, которую я исправил лично, заключалась в том, что показанный ниже компонент рекомендуемого инцидента был нарушен более чем одним способом. Прокрутка вообще не работала над этим, и когда отображалось что-либо, кроме основного показанного инцидента, появлялся необъяснимый белый ящик, блокирующий половину контента от просмотра. Я переместил компонент с карты, что устранило проблему с прокруткой, и поработал с некоторыми хитрыми селекторами CSS/Ant Design, чтобы исправить его внешний вид.

Наконец, наша команда действительно хотела убедить посетителей сайта в происхождении и достоверности данных, которые мы им представляем. В той версии проекта, с которой мы начинали Labs, на главной странице не было контекстной информации, кроме заголовков, указывающих на темы применения силы полицией. Мы были обеспокоены тем, что журналисты могут счесть наш сайт надежным и исчерпывающим источником правды о тенденциях в полицейской деятельности в Соединенных Штатах. На самом деле данные, которые мы представляем, представляют собой развивающееся направление науки о данных, подверженное как неправильной категоризации обработки естественного языка, так и общей ненадежности краудсорсинговой информации. Я реализовал новый компонент, который передал краткую сводку нашего проекта с удобной для понимания статистикой в ​​карусели Ant Design в нижней части окна загрузки домашней страницы.

Команды Front End и Data Science работали вместе, чтобы создать краткий, точный и осмысленный текст, который объяснял бы, какие функции сайта в значительной степени связаны с алгоритмом DS и менее показательны для пользователей сайта. Мы добавили эти заявления об отказе от ответственности, более или менее подробно, в зависимости от функции, по всему сайту. Это было особенно важно для графиков и, в частности, графиков, связанных с нашей системой категоризации. Теперь, когда мы отказались от нашей информации и объяснили наши графики, пользователи будут лучше понимать, сколько дополнительных исследований они должны провести при использовании сайта Blue Witness для поиска информации.

Подведение итогов

В итоге наша команда выполнила все задачи с высоким и средним приоритетом, а также все задачи с низким приоритетом, кроме двух, в общей сложности 26+ улучшений пользовательского интерфейса и исправлений ошибок по всему сайту. В дополнение к тому, что я описал выше, мы также:

  • Рефакторинг карты, чтобы сделать меньше звонков и включить функцию поиска
  • Исправлена ​​постоянная проблема с горизонтальной прокруткой
  • Навигация по графу стала более понятной для пользователя.
  • Улучшен общий внешний вид, что увеличило ожидания пользователей на главной странице и страницах «Графики».
  • Исправлена ​​функциональность панели навигации, чтобы она успешно указывала пользователю, на какой странице он находится в данный момент.
  • Исправлена ​​ошибка, приводившая к сбою сайта в мобильных браузерах.
  • Переработаны данные, отображаемые для пользователей, чтобы опустить причуды Back End, такие как «-» между словами категории.
  • Завершенный MVP рабочей и простой в использовании панели администратора для просмотра и создания инцидентов

Забегая вперед, у меня есть предложения для команд, которые будут работать над Blue Witness в будущем. Основные вещи, которые я не смог реализовать или выходили за рамки проекта:

  • Фильтрация происшествий на странице происшествий по категории или рангу силы
  • Продолжаем совершенствовать наши пояснения и заявления об отказе от ответственности
  • Организация CSS для облегчения восприятия (например, добавление пояснительных комментариев, когда нацелены компоненты Ant Design, а информация className иначе не может быть найдена в коде).
  • Работа с наукой о данных, чтобы определить более правдивые и полезные диаграммы для создания для пользователей.
  • Улучшение времени загрузки и эффективности сайта
  • Выявление и удаление неиспользуемого кода и CSS

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

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