Редизайн сайта «‎Ночлежка»

Обзор проекта

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

Задача — добавить новые разделы и интеграцию с Telegram-ботом.

«Ночлежке» потребовалось обновление страницы «Взаимодействие с государством».

Об организации

Основная цель — поддерживать и защищать достоинство каждого человека, независимо от его обстоятельств.

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

О проекте

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

Передача макетов в разработку

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

Выделила ключевые брейкпоинты на сайте Ночлежки с помощью DevTools.

Адаптивный дизайн

Разработала базовый UI-кит, включающий компоненты, стили и визуальные паттерны, основываясь на анализе существующих страниц сайта.

Создание UI-кита

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

Разработка иллюстраций

Создала кликабельные прототипы для презентации команде и проведения UX-тестирования, чтобы проверить гипотезы и собрать инсайты.

Разработала вайрфреймы.

создание прототипов и UX-дизайн

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

Изучила техническое задание, проанализировала текущую структуру сайта и определила основные проблемные зоны.

Исследование и анализ

Этапы работы

Нет визуальных акцентов

Перегруженная структура

Сложный поиск информации

Проблемы с навигацией

Проблемы

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

Он не перегружает страницу и выделяется за счёт акцентного цвета и иллюстрации.

Для интеграции с чат-ботом «Ночлежки» я использовала компактный баннер.

Интеграция с телеграм-ботом

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

На странице нужно было разместить большие разделы: «Наши достижения», «Наши активности» и «Материалы по теме».

Объёмные разделы

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

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

Навигация и визуализация

Решения

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

Иллюстрации. Помогают пользователям легче ориентироваться и быстро считывать смысл каждого раздела.

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

Страница до и после

Создании иллюстраций в Adobe Illustrator.

Создании кликабельных прототипов для проверки гипотез и презентации дизайн-решений.

Интеграции нового дизайна в существующую систему.

Этот проект позволил мне внести вклад в важное дело, улучшив пользовательский опыт страницы и адаптировав её под нужды «Ночлежки».
В процессе работы я усовершенствовала навыки в:

предыдущий проект

Следующий проект