Logo
accounting · Concept

User experience study of automatic accounting software Wint

August 20th, 2018
User experience study of automatic accounting software Wint

Wint is a service that automates the accounting for small to medium enterprises, where owners rather would focus on more interesting tasks than their paperwork. The service takes care of everything, from handling of receipt to automated payments.

I was recently introduced to Wint's services as I wished to spend less time on paperwork and build a more automated bookkeeping process. In an attempt to learn more about the service itself, and how its approach differs from traditional accounting solutions, I started to look at the user experience and interface design of the service.

This case study is a work in progress and will update accordingly as I dig deeper into the service myself.

Wint dashboard

The problem

A rather messy dashboard

I really, really like the service and system that Wint provides. However, the result of trying to fit all functions into one overview causes the interface to appear cluttered and messy. It is not uncommon for startups to focus primarily on developing function before experience, in order to ship an MVP as soon as possible. Combined with an adaptive life cycle, this results in an interface designed ad hoc by a team of front- and back-end developers.

The dashboard, which is the first thing the customer sees when logging in, should provide a good overview of the most important and essential features you need as a business owner or administrator.

org-wint-dashboard

Matters that demands your attention

These is the most obvious function because in an automated solution, whatever you need to do manually should be listed here. This section also works as a primary way of communication between you and Wint.

One issue here is that the user has to do one click to access the actual list where your individual "to-dos" are written out. Everything else here was built with expanded widgets, so naturally it makes sense that this follows the same pattern.

Statistics

Graphs and statistics that show how well your company is performing need to be readily available when you log in. It also makes little sense for this to take up so much space when your company does not have a lot of information to show yet. Otherwise, the large white empty spaces take attention and focus away from the more important (albeit smaller and more colorful) icons to the left.

Non-intuitive menu

Wint apparently tries save space here by having a drawer menu appearing from the left. This isn’t necessary to start with, but additionally, the menu button (which seems to be a "hamburger") is awkwardly positioned.

When interacting with the menu button, the content to the right is faded out, which must be due to user experience: you open something, thus you're supposed to focus on that. But the function and animation is unnecessary from the beginning, which makes this equally unnecessary.

Easy access support

Wint is a new and innovative service and on-boarding users might not be as straightforward as one might hope. Questions will arise with time and people will require help, even if they have gone through a comprehensive on-boarding of the system. Customers should not be forced into a sub-page to create a support ticket.

There is a support button in the top right section of the screen, but it is hardly visible and competes with a blue (more visible) question mark that does not do the same thing.

org-wint-support-modal

The bottom bar

On sub-pages, such as "Kundfakturor” (where you administer and create customer invoices), most actions are done through the bottom bar consisting of (what appears to be) a migration from a mobile interface.

org-wint-kundfakturor

New invoice

The positioning of this makes sense as you want the user to be able to create an invoice at all times, but it is not a good enough reason to add a floating bottom bar.

Filter-functionality

These types of functions should be presented before or above the content which is manipulated by the filters. It still works by having it at the bottom section, but it is not optimal. Users would expect things below the filter to change, but since this is a floating bottom bar, there is no content below it.

Settings

These are actually general settings for your invoicing, and consist of a lot of different options. They should probably not be handled here and instead be managed on a separate settings page integrated with the service as a whole.

org-wint-kundfakturor-settings

My role

As stated before, I am in no way involved in Wint, other than being a customer using their services. The thoughts and suggestions in this case study are purely my own and do not represent Wint or connecting services in any way.

I am doing this to expand my own knowledge in my field and to dig deeper in a service I will be using for the foreseeable future.

Solution

I cleaned up the user experience and created a fresh and modern interface. It is important to note that I did not know the overarching business goals when doing this case study, since I am not affiliated with the company. There are most likely several reasons as to why different approaches were taken during the shipping of their software, and design revisions may already be in progress.

I am also not limited by any graphical profile or design guidelines, but I have tried to stay within company margins and have borrowed graphical elements from their (newly?) updated mobile app experience.

A better dashboard overview

Improving the design language, creating a design system and aligning elements better makes huge improvements in the perceived usability of a service. Things have to feel connected, and all exit points (e.g. support) need to be easy for the customer to find and reach.

Wint dashboard

Side-menu

The menu is no longer a drawer (as it does not need to be), which also solves the awkwardly positioned menu button. This also improves the overall feel of the service, because you always have the logo visible in a non-intrusive manner. We could make this menu expandable, but then we would need to find a better position for the menu button, which is not necessary for this viewport.

I improved the ease of navigation between different sections and added "to-do" to the menu, due to its importance. The button calls for your attention through a red notification bubble. I also made it clearer which section you are currently viewing by marking it in blue.

At the bottom, we see the user profile. When looking more closely at the settings, this might be moved to a more suitable place.

Support

The button to contact support is now more visible. It still opens a modal window, but is more in tune with the design language of Wint.

wint-desktop-support-modal

Better listing of invoices and customers

Taking inspiration from similar invoicing services, I ended up with the following interface for handling invoices and customers.

wint-desktop-customer-invoices

As with the invoice listing, the customer list follows the same design patterns.

wint-desktop-customer-list

Logo
Patrik Arvidsson
UI/UX designer
+46 734 15 60 10
Patrik Arvidsson AB
Kvillegatan 37
41708 Gothenburg
Sweden