Figma, Adobe illustrator
Инструменты
UX/UI дизайнер, волонтёр
Моя роль
Февраль 2023 – Июнь 2023
Даты

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

2

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

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

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

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

О проекте

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

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

  • Подготовила макеты для различных разрешений экранов: десктоп, планшет и мобильные устройства.
  • Выделила ключевые брейкпоинты на сайте Ночлежки с помощью DevTools.
5

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

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

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

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

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

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

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

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

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

Этапы работы

Нет визуальных акцентов
Перегруженная структура
Сложный поиск информации
Проблемы с навигацией

Проблемы

Для внедрения новых блоков и поиска улучшений я провела полевое тестирование среди людей разного возраста и уровня компьютерных навыков.
Это позволило выявить несколько проблем:
Он не перегружает страницу и выделяется за счёт акцентного цвета и иллюстрации.
Для интеграции с чат-ботом «Ночлежки» я использовала компактный баннер.
3

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

Я оформила их в аккордеоны, чтобы сохранить чистоту дизайна и облегчить поиск информации. Картинки убрала, чтобы не перегружать страницу.
На странице нужно было разместить большие разделы: «Наши достижения», «Наши активности» и «Материалы по теме».
2

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

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

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

Решения

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

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

  • Создании иллюстраций в Adobe Illustrator.
  • Создании кликабельных прототипов для проверки гипотез и презентации дизайн-решений.
  • Интеграции нового дизайна в существующую систему.
Этот проект позволил мне внести вклад в важное дело, улучшив пользовательский опыт страницы и адаптировав её под нужды «Ночлежки».
В процессе работы я усовершенствовала навыки в:
предыдущий проект

Выводы

vasilchenko.daria@yandex.ru
+972 50-755-9062
Хайфа, Израиль

Контакты