Marian Middle School
Информационная архитектура и редизайн сайта религиозной средней школы для девочек
Моя роль
Дизайнер-фрилансер
- Клиент
- Marian Middle School
- Роль
- Фриланс
- Команда
- Вместе с Jessica McCarthy, менеджером школы по благотворительным пожертвованиям
- Годы
- С 2016 по 2017
- Запуск
- 2017
- Провёл аудит каждой страницы старого сайта и перестроил его информационную архитектуру вокруг тех, кто его посещает.
- Спроектировал главную страницу, страницы о ценностях школы, раздел мероприятий и подписку на рассылку.
- Сверстал фронтенд, то есть страницы, которые люди видят в браузере. Также подключил страницу пожертвований к базе доноров школы вместе с Jessica McCarthy, менеджером школы по благотворительным пожертвованиям.
- 9 лет держится информационная архитектура 2017 года, пережившая полный редизайн
- 7 пунктов раздела About Us стоят в том же порядке, что и в 2017 году
- 6→5 разделов главного меню, перестроенных из отделов школы вокруг посетителей
- ≤ 2 клика до любой ключевой задачи с любой страницы, проверено по карте сайта до запуска
Кратко
Marian Middle School, религиозная школа для девочек, находится в Сент-Луисе, штат Миссури. Её старый сайт был устроен так же, как управлялась школа, по отделам, поэтому семьям, волонтёрам и учителям приходилось долго искать то единственное, ради чего каждый из них пришёл.
Website 2.0 запустили в 2017 году. Он был построен вокруг этих трёх типов посетителей, и всё, ради чего человек приходил, оказалось в одном-двух кликах. Я отвечал за информационную архитектуру и дизайн и сверстал фронтенд. После запуска никто не настроил аналитику, поэтому эта страница показывает, что я сделал и как это проверил, а не что изменилось.
Кто участвовал
- Семьи Решают, отдавать ли дочь в школу. Семьи, думающие о колледже, сначала хотят увидеть результаты школы.
- Волонтёры и доноры Жители района. На старом сайте единственным способом участвовать было пожертвовать деньги.
- Учителя Собственные сотрудники школы, третий тип посетителей.
- Представители школы Сотрудники, от которых зависели формулировки; они сверили страницы о ценностях с брендбуком школы.
Контекст
Меню старого сайта повторяли внутренние отделы школы, а не то, как каждый тип посетителей думает о Marian. Самые важные пути были спрятаны: запись в школу, регистрация волонтёром, посещение мероприятия. Ничто на странице не выделялось на фоне остального.
Отличных результатов школы на сайте не было вовсе, хотя семьи, думающие о колледже, хотят видеть их в первую очередь. А единственным способом поучаствовать была кнопка Donate, и ничего не было для тех, кто хотел помочь своим временем или прийти на мероприятие.
Исследование
Я начал с аудита информационной архитектуры, то есть того, как устроены страницы и меню сайта, вроде поэтажного плана здания. Я прошёл по каждой странице старого сайта и для каждого типа посетителей спросил себя: зачем на самом деле человек сюда пришёл? Этот ответ определил структуру и всё, что было дальше.
С посетителями никто не проводил ни интервью, ни опросов. Большая часть того, на чём держался дизайн, была убеждениями, и в записи ниже указано, какие из них проверили, а какие нет. Единственное твёрдое правило, что любая ключевая задача должна быть не дальше двух кликов с любой страницы, согласовали до начала работы над дизайном.
Каждая точка обозначает одно предположение, расположенное по тому, насколько оно было важно и насколько хорошо мы его знали. В правом верхнем углу ошибка обошлась бы дороже всего, а знали мы меньше всего, поэтому исследование началось именно там.
- Подтвердилось
- Подтвердилось частично
- Не подтвердилось
- Не проверялось
| ID | Допущение | Уверенность | Важность | Статус |
|---|---|---|---|---|
| A1 | Families thinking about enrolling and volunteers from the community are the two most important visitors to the homepage. | Medium | Critical | Not testedThis was the designer's judgment, with no audience research and no analytics after launch. |
| A2 | Visitors will find what they came for if every key task is no more than two clicks from any page. | High | High | Partially validatedAn audit of every menu item confirmed the two-click limit before launch, but no visitors were tested; the 2017 structure is still in place nine years on. |
| A3 | Fundraising matters too much to bury in a submenu, so Donate needs its own place in the top menu. | High | High | Not testedDonate moved to the top menu after the kickoff meeting with the development director, and nobody tracked whether giving changed. |
| A4 | Families with college in mind judge a school by its measurable results. | Medium | High | Not testedThe school's results moved from a printed packet for new parents onto the homepage, but no one measured whether families noticed. |
| A5 | The figures in the school's printed packet for new parents were accurate. | High | Medium | Not testedThe numbers were shown with credit to the school, and checking them was outside the design work. |
| A6 | Leading with faith, while respecting each student's own tradition, would not turn away families of other faiths. | Medium | High | Not testedPutting faith first was the designer's suggestion and the school agreed, but it never came from research with families. |
| A7 | Real volunteers and parents shown by name and photo earn more trust than the school's own words. | Medium | Medium | Not testedThe idea was borrowed from common practice at nonprofits, with no research of its own. |
| A8 | A live countdown would bring more people to fundraisers like Girls Night Out. | Medium | Medium | Not testedThe school asked for it because the event had fallen short of its attendance goals; the countdown worked, but attendance was never tracked. |
Дизайн
Шесть разделов, устроенных как отделы школы, превратились в пять, устроенных вокруг посетителей: About Us, Admission, News & Events, Get Involved и Donate. Get Involved занял место, которое раньше принадлежало одним пожертвованиям: он стоит рядом с Donate в правом конце главного меню, всегда на виду, чтобы волонтёрство и мероприятия доходили до той же широкой аудитории, что и пожертвования. То, что ушло из главного меню, например календарь и контакты, переехало в новый подвал страницы из четырёх колонок.
Главная страница показывает три крупные кнопки до прокрутки, а результаты школы перекочевали из печатной брошюры для новых родителей на главную. Пять ценностей школы получили по вкладке, первой стоит вера. Для местного сообщества сделали раздел мероприятий с живым обратным отсчётом до благотворительных вечеров вроде Girls Night Out и подпиской на рассылку с единственным полем под ним.
Одно поле, одна кнопка, один большой конверт
Подписка на рассылку просит только одно: адрес электронной почты. Форма остаётся маленькой, слева. Конверт справа большой и подвижный, он открывается и показывает письмо, чтобы просьба ощущалась как приглашение, а не как обязанность.
Воссоздано для этой страницы с цветами, шрифтами, полем и кнопкой из файла стилей 2017 года. Текст условный, не оригинальный, и эта форма ничего не отправляет.
Ещё экраны
Решение, которое не сработало
Бирюзовым обозначались элементы, на которые можно нажать, и основной оттенок вышел в работу с контрастом 2,45 к 1 на белом. Это слишком бледно, чтобы пройти минимальный порог доступности для текста ссылок и подписей кнопок. Более тёмный бирюзовый, который проходит с контрастом 5,08 к 1, использовался только при наведении.
Цветовая система была настоящей, но её ничто не проверяло. Ничто не измеряло контраст и не следило, чтобы отступы оставались на сетке, поэтому из фреймворка просочились и небольшие отступы мимо сетки. Обе ошибки до сих пор видны в файле стилей сайта десять лет спустя. Сегодня я сделал бы тёмный бирюзовый цветом по умолчанию и ещё больше затемнял бы его при наведении.
Результаты
Перед запуском я сверил каждый пункт меню с картой сайта, и все ключевые задачи оказались не дальше двух кликов. Это была проверка на бумаге, а не тест с посетителями. После запуска никто не настроил аналитику, поэтому я не могу сказать, стало ли больше записей в школу или пожертвований. 87%, 96% и 84% взяты из собственных опубликованных данных школы; редизайн разместил их там, где семьи могли их увидеть, но не создал их.
Структура действительно прижилась. Девять лет и один полный редизайн спустя Internet Archive показывает семь пунктов About Us в том же порядке, что и в 2017 году.
Три крупные кнопки на главной: Innovative Programs, Get Involved и Enroll Now.
Результаты школы переехали на главную: 96% оканчивают старшую школу, 84% поступают в колледж.
Фронтенд я тоже сверстал сам.
Авторы
Robert Duebelbeis
Дизайнер-фрилансер
Провёл аудит старого сайта и перестроил его информационную архитектуру, спроектировал главную страницу, страницы о ценностях, раздел мероприятий и подписку на рассылку, сверстал фронтенд и написал код, связывающий страницу пожертвований с базой доноров школы в Blackbaud.
-
Менеджер по благотворительным пожертвованиям
Вместе с Робертом подключала страницу пожертвований к базе доноров школы.
