Revamping the Ministry of Foreign Affairs website: the vision of Obriy Design Büro
November 7, 2024
Inha Tolochenko, Alex Seagull
8 min
.webp)
In a world where users are used to top digital services, government websites must meet these expectations to reinforce Ukraine’s image and facilitate seamless interactions. Our redesign approach goes beyond a simple update. We aim to transform the website into a resource that highlights Ukraine's modernity and openness.
%2520(2).webp)
Digitalization has become an integral part of our everyday lives. It’s clear how deep it runs in Ukraine. From banking transactions to ordering food at a cafe, nearly everything can be done with a few taps on a smartphone. This level of convenience has become second nature to us, and as a result, we now expect the same simplicity when interacting with the government.
Such expectations are clear. For example, the Diia platform has already become part of everyday life. Do you need to re-register your car, pay a fine, or show your ID? Just use the app and get it done fast.
But what kind of experience do we as users and citizens faced when engaging with government websites?
Despite the service's digitalization, most government websites are still outpaced. Outdated, heavy, and often uninformative portals must meet modern standards and user expectations. There have been attempts to improve this situation, but they have yet to produce much tangible impact.
In 2018, KitSoft developed a design system for government websites, which was approved by a Cabinet of Ministers resolution in 2019. The system was intended to help officials, designers, and developers work in sync to create unified, modern, and user-friendly government websites. Its impact can be seen on the websites of the Verkhovna Rada and many ministries.
Certainly, the new design system brought some positive changes. The appearance of these websites has become more modern, which is a step forward. However, no significant transformation has taken place. Many government websites still look like a patchwork of disparate design approaches that don't align well. Perhaps the design system doesn't properly address the unique challenges of government websites or perhaps the issue lies in a fragmented approach to change.
We believe, anything that fails to serve users effectively should be changed. After all, government websites shouldn't merely be information portals but part of a new standard for engaging with the state.
The Ministry of Foreign Affairs has its public face in the person of the Minister, who represents the state on the international stage. Similarly, in the digital space, this role is fulfilled by the official website, which serves as a key platform for interaction with citizens and the world. In times of war and global challenges, it becomes an essential tool for maintaining the country's image and communicating with the international community.
The current website of the Ministry appears outdated, overloaded with information, and difficult to navigate. The website should be intuitive, accessible to diverse audiences, and meet the needs of both Ukrainian citizens and the international community. A modernized, functional website can become one of the most important tools for showcasing the image of a modern, progressive country that not only follows innovations and changes but leads them and sets trends.
Why is it so crucial for the MFA's website to meet current design and usability standards?
Firstly, it’s the level of digitalization in Ukraine that we’ve all grown accustomed to.
Secondly, if the website doesn’t meet user expectations, trust in the system itself is reduced, creating a sense of alienation from the state.
Thirdly, the website serves as the country's voice on the international stage.
Our goal is to refresh the design of the Ministry of Foreign Affairs website, eliminating complicated navigation and outdated visual style. We aim to create an intuitive resource that provides easy access to relevant information for all users, builds public confidence in the Ministry’s activities, and strengthens Ukraine's international image.
The team's work on the redesign began with research. We analyzed the websites of government agencies, ministries, the Diia platform, and several business websites.
To avoid common mistakes and identify solutions that could improve usability, we explored different approaches to navigation and content organization.
The MFA website is quite large, so our team decided to place special emphasis on the homepage, as it is the first place citizens and foreigners visit to find information about consular services, diplomatic contacts, and the Ministry's activities. This page creates the first impression of the MFA and its work, making it essential that it is intuitive and visually appealing.
In addition, we updated the pages on consular services, events, and the calendar, worked on improving the website's navigation, and introduced the concept of an AI assistant.
If you visit the homepage, you’ll notice a significant imbalance in both the structure and presentation of information. It is overloaded with content, unbalanced, and suffers from issues with hierarchy and navigation.
A user lands on the homepage and immediately sees the Ministry’s latest news. As they scroll down, they encounter more news. Then, they are prompted to subscribe to a news digest. Where is the quick access to information about consular services, diplomatic missions, or contacts? The useful information that Ukrainians and foreigners may need is hidden in the constant stream of news.
Another issue is the MFA's tweet feed. It disrupts the page’s layout with its cluttered appearance, creating an endless feed that negatively affects the overall structure. This prevents users from easily reaching important information further down the page.
We should also mention the complicated navigation. It isn't intuitive, and users literally feel overwhelmed by the sheer amount of information. This makes it difficult to interact with the site easily or quickly find necessary data.
There are also problems with the visual hierarchy. Important elements are not properly highlighted. For example, announcements and key consular services are lost among other elements due to the poorly structured layout. The logic and order of the headings are inconsistent, making it hard to quickly grasp the content of the page.
As a result, in an attempt to cover everything, the website only confuses and frustrates users. Systems should work for people, not the other way around, and unfortunately, the Ministry of Foreign Affairs website does the opposite. Users have to wade through excessive information and disorganized blocks to find what they need.
During the analysis of the weaknesses of the MFA's homepage, we identified several key areas to focus on to improve the user experience.
1. Skip the unnecessary information
Users often feel overwhelmed by information, so it is important to eliminate unnecessary elements that distract attention from the main functions and information. This will help to create a more focused and pleasant user experience.
2. Create a clear hierarchy
A clear hierarchy of information makes it easy to navigate. It is important to highlight key elements with different levels of headings, fonts, and colors. This will help users navigate the page faster and find the information they need.
3. Make key functionality convenient and accessible to the user
Key functions, such as access to consular services, information about diplomatic missions and contact persons, should be as user-friendly as possible. It is important to place them in easily accessible places to ensure quick access to the most important information.
4. Put important contacts and information at the top of the page
Placing important contacts and information in a prominent place on the home page will help reduce search time. This can be a separate large block or a panel that displays the most relevant information, which will significantly improve the user experience.
5. Use the elements of the Diia design system while maintaining a certain formality in the visual style
Diia has many successful design solutions. Integrating these elements will help to create a more modern look while maintaining a certain consistency and familiarity for users.
6. Create an AI assistant concept
Even with the best design, the website of the Ministry of Foreign Affairs of Ukraine contains a huge amount of information, which can make it difficult to find the necessary data quickly. Instead of browsing through multiple pages, users can use an integrated AI assistant that will provide the information they need quickly and efficiently.
All these changes are aimed at creating a convenient, efficient and modern interface that will meet the needs of both Ukrainians and the international community. Focusing on simplicity, accessibility and functionality will not only improve the user experience, but also strengthen Ukraine's image as a modern and technologically advanced country.
We’ve revamped the news section with a modern grid layout featuring cards. This provides a more structured appearance, allowing users to immediately view the latest news without unnecessary scrolling. This approach significantly enhances the user experience by offering quick access to relevant information in an easily format.
We also designed a dedicated page for the full news content. The main challenge was that text and images had the same visual weight, making it hard to read and digest. Our solution is to divide the text into distinct blocks, incorporating quotes, images, clear headings, and varying font sizes to better structure and present the content.
This section is crucial as it provides Ukrainian citizens and foreigners with essential information and support in various situations abroad.
We’ve optimized the interface for better interaction. It now features intuitive navigation, allowing users to switch between categories of services without returning to the main menu. This design ensures that all the relevant information is within view, reducing unnecessary actions and increasing access speed. The result is a more convenient and logical user flow.
The current Events page allows users to find relevant information through filters. However, the existing filters are not tailored to the specific content on this page and apply to all types of material on the site. We replaced the general filter with an interactive calendar that enables users to select a specific date to view events. Additionally, we’ve implemented filters by event type and country, making the search more precise and convenient.
An AI assistant on the MFA website is an innovative solution that would significantly enhance the user experience. With this tool, users can not only find the information they need more quickly but also receive real-time recommendations, ask questions, and resolve common issues without having to navigate the website or contact a hotline.
What features does the AI assistant offer?
1. Quick information search. Users can quickly find answers to frequently asked questions, such as consulate and embassy contact details, visa application information, consular assistance, and updates on international visits or diplomatic events.
2. Step-by-step assistance in submitting documents. The AI assistant can guide users through complex processes, such as document verification or e-Visa applications.
3. Personalized recommendations: Depending on user inquiries, the assistant can offer tailored advice. For instance, it can suggest what to do if a passport is lost abroad.
4. Multilingual support. The assistant can operate in multiple languages, making the website more accessible to foreign citizens and assisting diplomats and international visitors.
5. 24/7 support. The assistant is available at any time, offering immediate help when the call center is closed.
6. Interactive navigation. The assistant can direct users through the website, providing step-by-step instructions, reducing search time, and guiding them to their goals more efficiently.
7. Quick access to press releases and news for journalists. The assistant can quickly supply links to the latest publications, diplomatic news, or official statements related to Ukraine's international relations.
As a result, the AI assistant is a helpful and a true partner for users. This feature enhances website interaction, simplifies the information-gathering process, and make MFA services more accessible and understandable for both Ukrainian citizens and international visitors.
In the digital age, users are setting new standards, and the state must keep up. Government websites, including those of ministries, have long needed updates and redesigns. It's crucial to move away from outdated methods, as many of these sites still fall short of modern standards and user expectations.
Updating the Ministry of Foreign Affairs website offers an opportunity to show that Ukraine isn’t just adopting innovations but actively driving them, creating a platform for open, user-friendly communication with citizens and the global community.
Our approach goes beyond a simple update. We aim to transform the website into a resource that highlights Ukraine's modernity and openness. It will not only serve as an information portal but also as a symbol of trust, where every detail is designed to enhance convenience and accessibility.
In a world where users are accustomed to top digital services, government websites must meet these expectations to reinforce Ukraine’s image and facilitate seamless interactions.
We believe that redesigning the Ministry of Foreign Affairs website will be a key step toward creating a modern, inclusive, and effective digital space.
Thanks for reading!
You can view our redesign concept by this link
.svg)
.webp)
