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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Better listing of invoices and customers
Taking inspiration from similar invoicing services, I ended up with the following interface for handling invoices and customers.
As with the invoice listing, the customer list follows the same design patterns.
Stay tuned, more will be added soon!