My take on making Datovka more user-friendly + an improved UI 

A proposition of design adjustments of the Datovka application with the creation of new components. The goal of this project was to improve the UX (especially the user flow for sending a message) and building a more friendly and clear design. 

Motivation

The idea for a redesign came from my own experience with this web application, and also the feedback I received from a family member, who is helping people establish and set up datova schranka and reported that their user experience is usually a problem, especially for older people who are not very confident with using complex web applications. 

The government legally requires all businesses and contractors to use datova schranka from 2023, which was a reason more for me to try and look into it and come up with some improvements that would make datova schranka a little more pleasant tool to work with. 

The main reported issues are: 

• unclear UI

• environment crammed with information that is not always relevant

• hurdles in unexpected places

• missing guidance 

Old design - home

New design - home

Click here to view the Figma prototype

Design notes

The current Datovka design is based on Google's Material Design. I took a turn to a slightly different look and feel of the tool, adding more interactive elements and making the design feel more "alive" (e.g. tooltips, color changing on hover, etc.). 

I did keep the base of material design in the layout, as it needs to have a professional and universal look with not much space for experiments and styling. 

I decided for a clean design with lots of white space, with emphasis on removing repeating, unnecessary or needlessly overwhelming information. 

Old design - message detail

New design - message detail

Design steps

1. Pinning possible pain points in using Datovka by research of user experience with Datovka users 

2. Defining the main pain point in the most commonly used user flows: reading and working with a received message and sending a message

3. Building a set of components, colors and styles used for new Datovka design (design system)

4. Creating a new Datovka design