Back

Back

Education for life

In 2023 organization asked me to create
a website to support their grant application,
providing a comprehensive and accessible
platform to showcase their project and its
potential impact.

In 2023 organization asked me to create
a website to support their grant application,
providing a comprehensive and accessible
platform to showcase their project and its
potential impact.

Overview

In October 2023, an ex-colleague from Intellect of Ukraine reached out, to ask if i could design a website for their partner to apply for a grant. Given the extensive content required, information architecture was a top priority. They specifically requested to build the website on top of their existing WordPress blog, a crucial requirement for the grant being that the site be at least two years old.

In October 2023, an ex-colleague from Intellect of Ukraine reached out, to ask if i could design a website for their partner to apply for a grant. Given the extensive content required, information architecture was a top priority. They specifically requested to build the website on top of their existing WordPress blog, a crucial requirement for the grant being that the site be at least two years old.

The website needed Ukrainian and English versions, incorporating numerous images, videos, and diagrams. Additionally, the organization lacked a cohesive brand identity, having only an outdated logo. This meant I also needed to develop a brand kit to establish a visual language
for the website.

In October 2023, an ex-colleague from Intellect of Ukraine reached out, to ask if i could design a website for their partner to apply for a grant. Given the extensive content required, information architecture was a top priority. They specifically requested to build the website on top of their existing WordPress blog, a crucial requirement for the grant being that the site be at least two years old.

The website needed Ukrainian and English versions, incorporating numerous images, videos, and diagrams. Additionally, the organization lacked a cohesive brand identity, having only an outdated logo. This meant I also needed to develop a brand kit to establish a visual language
for the website.

Original logo (top)
 and a new logo I designed (bottom)

Original logo (top) and a new logo I designed (bottom)

Original logo (top)
 and a new logo I designed (bottom)

The website needed Ukrainian and English versions, incorporating numerous images, videos, and diagrams. Additionally, the organization lacked a cohesive brand identity, having only an outdated logo. This meant I also needed to develop a brand kit to establish a visual languagefor the website.

Fortunately, some content was still in development, granting me time to research and map out a comprehensive site structure. With a tight six-week deadline, I took on the development myself to ensure timely completion.

Roles & Responsibilities

Web Designer

Web Designer

Designing a responsive & accessible website with a complex IA

Designing a responsive & accessible website with a complex IA

Front-End Development

Front-End Development

Wordpress Development, HTML, CSS, Javascript for interactive
elements and custom components

Wordpress Development, HTML, CSS, Javascript for interactive elements and custom components.

Wordpress Development, HTML, CSS, Javascript for interactive elements and custom components

Interaction Designer

Interaction Designer

User Research, UX Patterns, User Testing, A/B Testing

User Research, UX Patterns, User Testing, A/B Testing

Branding

Branding

Creating a comprehensive brand kit, brand assets, and visual language

Creating a comprehensive brand kit, brand assets, and visual language

Graphic Designer

Graphic Designer

Icons, Pictograms, Vector Graphics, Diagrams, Infographics

Icons, Pictograms, Vector Graphics, Diagrams, Infographics

Platform

Desktop Web

Desktop Web

Create a responsive website with interactive elements

Mobile Web

Mobile Web

Since the website content included lots of diagrams and infographics, it required additional focus on those elements
to maintain readability on narrow screens.

Since the website content included lots of diagrams and infographics, it required additional focus on those elements to maintain readability on narrow screens.

The Kickoff

I began my research by thoroughly understanding the website's target audience. Through client interviews and a competitive analysis of similar grant application websites, we identified two primary visitor types: teachers and government representatives/officials. To ensure a seamless experience for both groups, we prioritized placing key labels within the high-level navigation. However, strict website requirements mandated a specific list of navigation items, limiting my ability to optimize this area.

Consequently, I conducted a content audit of the existing website, identifying improvement areas and consolidation opportunities. This analysis and the target audience research guided my approach to develop a new brand kit.

I began my research by thoroughly understanding the website's target audience. Through client interviews and a competitive analysis of similar grant application websites, we identified two primary visitor types: teachers and government representatives/officials.
To ensure a seamless experience for both groups,
we prioritized placing key labels within the high-level navigation. However, strict website requirements mandated a specific list of navigation items, limiting my ability to optimize this area.

Consequently, I conducted a content audit of the existing website, identifying improvement areas and consolidation opportunities. This analysis and the target audience research guided my approach to develop a new brand kit.

I began my research by thoroughly understanding the website's target audience. Through client interviews and a competitive analysis of similar grant application websites, we identified two primary visitor types: teachers and government representatives/officials. To ensure a seamless experience for both groups, we prioritized placing key labels within the high-level navigation. However, strict website requirements mandated a specific list of navigation items, limiting my ability to optimize this area.

Social media can be used as a source of inspiration for visuals

After a few hours of research and checking out other educational websites, a random Instagram post caught my eye. It was a video from an art gallery with this awesome color combination that I thought would be perfect to freshen up the old website's blue-yellow-black look. For typography, I chose the IBM Plex Sans and Serif font families. Their stable design and support for both Cyrillic and Latin characters made them a reliable choice. Additionally, their modern look and feel complemented the organization's desired tone of voice – open, confident, and intelligent.

Consequently, I conducted a content audit of the existing website, identifying improvement areas and consolidation opportunities. This analysis and the target audience research guided my approach to develop a new brand kit.

After a few hours of research and checking out other educational websites, a random Instagram post caught my eye. It was a video from an art gallery with this awesome color combination that I thought would be perfect to freshen up the old website's blue-yellow-black look. For typography, I chose the IBM Plex Sans and Serif font families. Their stable design and support for both Cyrillic and Latin characters made them a reliable choice. Additionally, their modern look and feel complemented the organization's desired tone of voice – open, confident, and intelligent.

Fonts & Colors

Pictograms

Imagery

Interactive Map

Fonts & Colors

Pictograms

Imagery

Interactive Map

Pictograms & Page Dividers

Imagery

Interactive Map

Fonts & Colors

The Challenge

Complex agenda

The organization primarily focuses on providing coaching courses for Ukrainian teachers. Due to the drastic changes in education caused by the ongoing war, the Osvita XXI leverages the experience gained during the COVID-19 pandemic to support and enhance remote learning in Ukraine.

The organization primarily focuses on providing
coaching courses for Ukrainian teachers. Due to
the drastic changes in education caused by the
ongoing war, the Osvita XXI leverages the experience
gained during the COVID-19 pandemic to support
and enhance remote learning in Ukraine.

Loads of data

Data from reports and research, often presented as dense blocks of text, needed to be formated to be easily digested and analyzed. It was very important to design a solution that could break down complex information into visually engaging and accessible components.

Data from reports and research, often presented as dense blocks of text, needed to be formated to be easily digested and analyzed. It was very important to design a solution that could break down complex information into visually engaging and accessible components.

Data from reports and research, often presented
as dense blocks of text, needed to be formated
to be easily digested and analyzed. It was very
important to design a solution that could break
down complex information into visually engaging
and accessible components.

Awareness

By the end of 2023, the world was becoming desensitized to negative news from Ukraine. The website needed to leave a lasting impression, inspiring visitors them to support the organization's initiatives. The imagery was warily curated to evoke hope and resilience rather than shock or despair.

By the end of 2023, the world was becoming desensitized to negative news from Ukraine. The website needed to leave a lasting impression, inspiring visitors them to support the organization'sinitiatives. The imagery was warily curated to evoke hope and resilience rather than shock or despair.

By the end of 2023, the world was becoming
desensitized to negative news from Ukraine.
The website needed to leave a lasting impression,
inspiring visitors them to support the organization's
initiatives. The imagery was warily curated to evoke
hope and resilience rather than shock or despair.

Opportunity

How can we evoke resilience
in people outside Ukraine?

How can we evoke resilience in people
outside Ukraine?

How can we evoke resilience in people
outside Ukraine?

Goals

Convey message

The homepage should immediately engage visitors with a compelling presentation of the problem, gradually revealing key information to spark curiosity and encourage further exploration of the website.

Each screen should focus on a single task, and grouping related features. A streamlined navigation model should enable efficient switching between tasks and projects.

Captivate

The UI design should prioritize intuitive components that guide users. Lengthy text sections should be strategically divided into smaller, digestible chunks, interspersed with relevant images, diagrams, and infographics.

The UI design should prioritize intuitive components that guide users. Lengthy text sections should be strategically divided into smaller, digestible chunks, interspersed with relevant images, diagrams, and infographics.

Create impact

The website should shift away from solely focusing on the negative impacts of the war. Instead, it should focus on resilience and community strength, showcasing the positive impact of the organization's work.

The website should shift away from solely focusing
on the negative impacts of the war. Instead, it should focus on resilience and community strength, showcasing the positive impact of the organization's work.

The Development

After finalizing the information architecture, we started the sitemap creation process, which underwent meticulous optimization to align with grant requirements and content priorities. Iterations involved careful consideration of page hierarchy, ensuring logical grouping of related content. The result was a well-structured, intuitive navigation system that guides users seamlessly through the website's wealth of information.

To streamline navigation and ensure a user-friendly experience, I limited the top navigation bar to two levels. Interactive graphics or page scrolling facilitate deeper exploration of content, providing a balanced approach between depth of information and ease of access. The result was a well-structured and intuitive navigation system.

To streamline navigation and ensure a user-friendly experience, I limited the top navigation bar to two levels. Interactive graphics or page scrolling facilitate deeper exploration of content, providing a balanced approach between depth of information and ease of access. The result was a well-structured and intuitive navigation system.

Finalized Sitemap for osvitaxxi.org.ua

To streamline navigation and ensure a user-friendly experience, I limited the top navigation bar to two levels. Interactive graphics or page scrolling facilitate deeper exploration of content, providing a balanced approach between depth of information and ease of access. The result was a well-structured and intuitive navigation system.

Website Builder

When faced with constructing dozens of pages within a tight timeframe, a robust integrated website builder was essential. Elementor emerged as the ideal solution due to its extensive library of pre-built components, a large user community for troubleshooting, and the flexibility to integrate custom code snippets seamlessly. This combination enabled rapid page development, minimized risk, and provided ample support resources.

The ability to embed code blocks directly into the layout allowed me to craft several interactive vector graphics that enhanced the website's visual appeal and user engagement. Furthermore, this feature enabled the smooth integration of custom-designed diagrams and charts throughout the site, ensuring a cohesive and informative presentation of complex data.

Launch Results

Daily Unique Users

Over the initial five months following the website's launch, the average daily unique user count reached 1,315. This organic growth occurred without any dedicated advertising efforts, as the grant committees continue to review the website. Due to a non-disclosure agreement, I cannot share further specific metrics at this time, but the initial traffic indicates a promising level of interest and engagement with the redesigned site.

We saw a solid 14% jump in task success rates, and users reported feeing way less lost and frustrated. They really liked being able to keep track of their progress using the dashboard, and they gave the task manager a big thumbs up for the ability to monitor automated tasks, previously impossible to estimate.

We saw a solid 14% jump in task success rates,
and users reported feeing way less lost and frustrated. They really liked being able to keep track of their progress using the dashboard, and they gave the task manager a big thumbs up for the ability to monitor automated tasks, previously impossible to estimate.

Old website

120

New website

1 315

Old website

120

New website

1 315

Old website

120

New website

1 315

Finished Product

The website, launched in late November, is actively maintained by the organization and is poised to become an indispensable resource for teachers both within Ukraine and internationally.

View Live Website

View Live Website

View Live Website

Datuum Case

Datuum Case

Datuum Case

Design Method

Design Method

Design Method

© 2024 Oleksii Zhuk. All Rights Reserved.