Education for Life
In 2023 Osvita XXI 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 Osvita XXI 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 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.
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.
| Web Designer | Designing a responsive & accessible website with a complex IA |
| Front-End Development | Wordpress Development, HTML, CSS, Javascript for interactive elements and custom components |
| Interaction Designer | User Research, UX Patterns, User Testing, A/B Testing |
| Branding | Creating a comprehensive brand kit, brand assets, and visual language |
| Graphic Designer | Icons, Pictograms, Vector Graphics, Diagrams, Infographics. |
| Desktop Web | Create a responsive website with interactive elements. |
| Mobile (Responsive) Web | Since the website content included lots of diagrams and infographics, it required additional focus on those elements to maintain readability on narrow screens. |
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.
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.
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.
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.
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.
How can we evoke resilience in people outside Ukraine?
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.
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 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.
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.
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.
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.
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.
Old website
120
New website
1 315
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
