Olga Khvan
E-government
of Kazakhstan



Multi-platform tool that connects citizens and government in online environment and helps on topics ranging from birth registration to opening a new company.

Website is in beta.
App launched in October 2019.

E-gov mobile app and website
Responsibilities
End-to-end mobile app re-design
Information Architecture
Design system
Co-Design workshops with government stakeholders


Timeline
February 2019–July 2019 (6 months)
Team
7 designers
3 Product Managers
20+ Developers
Goal
Create a unified government platform that would consolidate 40+ core web and mobile platforms. Design one main visual language for online government resources.
Context
E-gov app brings government services to smartphone and make communication with government easier. It allows users get 90 different services from registering marriage to opening new LLP.

In 2018, users got in total more than 3.6M services via E-gov app. Total user base of Mobile and Web platform—8M.
Type of the services differ. For example, user wants to get verification from government that they don't have any criminal records. They log in to the platform using e-signature, sign the form and get verification inquiry in PDF format.
Decentralisation of government resources

Situation
Every government website had own visual design, navigation, structure and was not connected with other government resources. This experience was too complicated for user and hindered from solving their problem.
Abundance of similar websites and doing same development process from scratch is too costly for government's budget.
Citizens
Government
Population: around 18M | Total user-base before re-design: 8M
Online services mobile app
Ministry of Health website
Ministry of Information and Communication website
Presidential affairs website
Online services website
Process
I started with gathering requirements from client and audit of old app.
From our Product manager I could gather requirements for the project.
Also, by going through existing data from stakeholders, Google Analytics, reviews and inner usability testing, together with Analytics and Product team I was able to identify 4 main problems and patterns in current mobile app.
Problem 1. App structure does not map users mental model.

Usually users come to government because of certain life event. Based on old solution it is unclear where to start. Users end up searching needed information by themselves on 3rd party resources, which is time consuming and sometimes leads to not trustworthy resources.
Problem 2. Multi-level information architecture added extra steps and made users confused.

Most of the flows lead to dead end and forced user to go back through a lot of screens. It also hindered them to discover new features and made it hard for dev team to integrate new content.
Problem 3. Inconsistent UI choices

Across the app there were different icons that meant the same. For example, (1) calls the list, (2) and (3) means availability of service online.

Extensive use of green color was not accessible for colour blind people. Similarity with some of the categories colours and system success colours confused users.
Problem 4. Lack of personalization

Users communicate with government based on specific needs. Still in the app often times users saw irrelevant information, whereas information they needed was hard to find.

Step 1. New content strategy
One of the main insights from our research and analysis:
users get certain types of services always together. Usually list of those services is based on different life circumstances.

This is how Product team came up with idea of "Life events" that would thematically combine certain services together and augment it with needed resources and information. New categories also were formed around Life events.
Family
Birth, marriage, death
before
after
To make this happen we worked closely with Content management and Analyst team from government side. They helped us to define main Life situations, services and resources. After the had a content draft, I started working closely with Backend team and Product manager to integrate it in IA.
Step 2. Re-building IA
New simplified information architecture
We decided to get away from linear nature of IA and made it more circular, cross-referencing content from other government resources. For user, it would create multiple ways of accessing same type of the content, simplifying old multi-layer IA (addressing Problem 1, 2).

Together with new content strategy it would help to map user's mental model better.
Information architecture flow chart quick overview
Step 3. Design
Before
After
Once structure was confirmed with client, we switched to design stage.
I wrote general user-stories together with my Product Manager to direct both my design process and give understanding to developers what new app will look like.

For wireframes, I've started with main screen in each of the category so it would give a high-level picture for both me and my team.

New section: Home page.

I decided to add that, because it helps to give users a glimpse on what is inside the app. It also gives quick access to certain sections, shows personalized information (addressing Problem 4) and notifications from governemnt.

We did multiple iterations on home page with focus groups. Our first desire here was to show as much as we can, but after series of testings we understood what is the right amount information and what is the format for it.

Finally, we decided to show:
— Personal notification
— Frequently/Popular services
— Featured 3rd party gov apps
—FAQ
Navigation
Initially I proposed to use Burger menu since we had a lot of menu items. Client also strongly wanted to add new features of app as menu items because they would become more visible to users.
But after testing prototype with users it turned out that it was unclear for people where they are in the app and too many items overwhelmed them. So I decided to use Tab Bar as a navigation and integrate additional features into a Top Navigation Bar.
Having a refined Top Navigation Bar also would more clearly show where user is at the moment and put emphasis on multiple ways to access content: through QR and search.

Finalized UI
Integrating "Life events"
As was said above, services and life events are the heart of the e-gov mobile app.
My goal was both introduce new concept of Life events and improve experience of getting services separately. Even though I wanted to improve user experience, transition between new and old has to be smooth, otherwise users will be frustrated since they were using this app for a while and formed certain habits.

Finalized content of life events included:
Guide
Step by step instruction on what to do, where to go, what kind of documents do people need.
List of services
On every step user had list of services that has to be requested from government.
Resources
Every step was provided with references to laws, additional resources, advices and FAQs.
Navigation

Initially we planned to put life events as another type of representation of services. But testings showed us that seeing Life events and Services at the same time confused users. They did not know what the difference is and had a question "What is life event?", "What is the difference, should I click here?"

Through series of co-design workshops with Government and inner testings, we decided to put emphasis on life events, but removed the exact name. Users still had access to the list of services inside the category (as it was before), but content was focused on Life events.
Life events integration V1
Life events integration Final Version
Personalization

Originally it was planned to have a main descriptive page with all the resources and show a tailored guide for each of the step based on answers to the short survey.

Based on results of inner testing, it turned out that people hated surveys and wanted to see needed information right away. They also wanted to see all next steps even though they did not complete the current one.
Main page
Survey page
Step page with instructions and services
After multiple iterations, we came up with refined experience Life events. Now it is more like a quest or friendly guide that holds user's hand when they're going through certain situation in their life.

Right from the beginning users know how many steps there would be, what to expect on each of the step. If they did not want to read the guide, they could just access list of services needed for current step.

Information became more personalized based on answers from integrated in instruction surveys.
Life events general info (onboarding)
How it works
Anelle and Azamat are expecting their first child. E-gov mobile app will guide them throughout the process of expecting and having the baby.
Anelle goes to e-gov mobile app and from Birth, marriage and death category she finds out there is a "You're expecting a child" life event.
Anelle goes to e-gov mobile app and from Birth, marriage and death category she finds out there is a "You're expecting a child" life event.
Each of the steps has guide with detailed instructions, list of services needed for current step and additional information.
9 months passed. Hurray! The child was born in Kazakhstan, now Anelle and Azamat have to register their child as a new citizen. App allows them to sign all the needed document at once using digital signature.
Now Anelle is at home and can continue taking care of her family ❤️
Design system
We just established GOV.KZ design system that did not exist before. We used separate Figma file to connect design system to other work files and distributed it among all the needed institutions.

As further step, it was planned to make a web version with specifications (visual and code) of design system elements.
For both mobile and web platforms we used an 8 pixel grid. For icons or smaller details sometimes might be used a 4 pixel increment.
Cards—one of the key elements in our design system. As we designed, we tried to cover most of the common cases for both web and mobile.

1. Media content [optional]
2. Content type [optional]
3. Icon [optional]
4. Title
5. Body text [optional]
6. Date [optional]
7. Actions [optional]

Results & key takeaways
App was launched in October 2019 and got 100K users for the first month. Besides new experiences, user can also tie their biometric data (Touch ID/Face ID) to digital e-signature. For some of the services, users can use QR code scan as a digital sign.

Website is in Beta.
1
Real world—real constraints. Sometimes I tend to think that "if someone would give me an opportunity, I would make this experience better in this certain way". Though when we are looking at the product from users' perspective, there are a lot of invisible processes happening behind the scenes. Starting from technical backend limitations ending with enormous amount of stakeholders with whom you have to communicate all the time.
2
Be ready to be slow, but fast when you work with government. Since government is a complex system, getting needed information maybe very slow sometimes. Just because your request goes through the multiple layers of different organization from this person to that person and then back to you. At the same time, unplanned urgent meetings may also happen. So I've learnt how to balance between being responsive to feedback but also not ruining architecture of the product and keep its vision.
3
Communication is a key. It relates to philosophy of e-gov product—give users opportunity to communicate with government easily and effectively. But also on a smaller scale, be able to communicate with all the stakeholders during design process. Whether it is advocating for your design decision in front client or building IA with backend team. Good example was my Product Manager, who amazingly balanced between client, dev and design team.