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
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
Old design
New design
Design steps
Pinning possible pain points in using Datovka by research of user experience with Datovka users
Defining the main pain point in the most commonly used user flows: reading and working with a received message and sending a message
Building a set of components, colors and styles used for new Datovka design (design system)
Creating a new Datovka design