Eng

Home

Figma, Adobe illustrator

Tools

UX/UI designer, volunteer

My role

February 2023 – June 2023

Dates

Redesign of the "‎Nochlezhka" website

2

Project Overview

Goal — make navigation intuitive and accessing information about interactions with government agencies easy and clear.

Task — add new sections and integrate a Telegram bot.

Nochlezhka needed an update for the "Interaction with the Government" page.

1

About the Organization

The main goal is to support and protect the dignity of every person, regardless of their circumstances.

"Nochlezhka" is a charitable organization that helps homeless people overcome life’s difficulties, find housing, and restore their documents.

About the Project

Created clickable prototypes for team presentations and UX testing to validate hypotheses and gather insights.

Developed wireframes.

2

Prototyping and UX Design

Created illustrations in the signature style of "Nochlezhka" to compensate for missing content, add visual accents, and enhance navigation clarity.

3

РIllustration Development

Developed a basic UI kit, including components, styles, and visual patterns, based on an analysis of existing website pages.

4

UI Kit Creation

Prepared layouts for various screen resolutions: desktop, tablet, and mobile devices.

5

Adaptation for Different Devices

Identified key breakpoints on the Nochlezhka website using DevTools.

Prepared final layouts and handed them over to developers with detailed annotations for implementation.

6

Handoff to Development

Work Stages

Conducted field testing with users to uncover their difficulties and barriers.

Studied the technical requirements, analyzed the current website structure, and identified key problem areas.

1

Research and Analysis

Lack of visual accents

Overloaded structure

Complex information search

Navigation difficulties

problems

To implement new sections and identify improvements, I conducted field testing with people of different ages and levels of computer proficiency.
This helped uncover several issues:

It keeps the page uncluttered while standing out with an accent color and an illustration.

For the integration with Nochlezhka’s chat bot, I used a compact banner.

3

integration with the Telegram bot

I structured them as accordions to maintain a clean design and simplify information retrieval. Images were removed to avoid overloading the page.

The page needed to accommodate extensive sections: "Our Achievements", "Our Activities" and "Related Materials".

2

Large Sections

1

Navigation and Visualization

Research shows that visual elements help users process information faster.
That's why I made them the foundation of navigation and used expandable cards to prevent text overload.

I focused on improving navigation and information perception by emphasizing visual elements.

Solutions

Responsive design. This was the most challenging part of the work, as I had to independently identify the breakpoints and grid, and then implement the updated design while maintaining the page logic and simplifying navigation.

Illustrations. Help users navigate more easily and quickly grasp the meaning of each section.

The redesign successfully organized large volumes of information while maintaining clear navigation.

Page before and after

Developing clickable prototypes for testing hypotheses and presenting design solutions.

Creating illustrations in Adobe Illustrator.

Integrating new design into the existing system.

This project allowed me to contribute to an important cause by improving the user experience of the page and adapting it to the needs of "Nochlezhka".
During the process, I enhanced my skills in:

Next project

Previous project