UX & UI Design for Procountor of Accountor Finago

Accountor Finago Ltd has various financial products. I have worked mainly on UX & UI Design for Procountor software.

Procountor of ACCOUNTOR FINAGO Ltd | Since Oct 2019

I am part of a Design Team of nine designers. I work with a Scrum team that is located in Poland. I have also been collaborating with a+ Lab (Innovation and Data team) and Finago Marketing.

Procountor - the software I have been working on - is a B2B software with a 20 year old history and a legacy code base. The first Designer joined the company in 2014 meaning most of the UI have been “designed” and developed by a bunch of software engineers without a proper knowledge of best UX and UI practises and conventions. You can imagine how much we as designers want to renew the whole software to provide better user experience. We are tied to the current legacy code base and UI framework (Vaadin). We constantly receive customer feedback on the lack of usability, it’s complexity and illogical UX. It’s a huge task to tackle to try to improve it.

After onboarding to the company I started in a research project. We travelled around Finland to observe our clients in their typical workday. The main focus in this research process was UI renewal that had been published in spring 2019.

*Working with my Scrum team in Kraków, Poland.*

I was assigned to work with a Scrum team that is located in Kraków, Poland. My team’s Product Owner is located in Finland as myself. I was designing in collaboration with other designer who’s Scrum team was working on the same project as my Scrum team.

We got assigned to redesign a view that was brought to the roadmap based on customer feedback. This view was a part of a bigger project that contains many different views under accounting. The view I was responsible for is Accounting Reports. On the side I have also been working with other views related to this project.

During the process I worked on research, ideation, user journeys, UX writing, designing and piloting following improvement designs. I drew wire-frames for UX flows and UI elements. I designed layouts and UX flows. During the process we made improvement on the UX flows and UI elements. We had ideation workshops to go through all the features and created new ones. I worked mainly with Xd, Sketch, Miro and Jira.

Redesigning the view for Accounting Reports

I was assigned to work on a Chart of Accounts project where my first task was to redesign Accounting Reports view.

With the PO and another Designer we started by understanding the complex view by going through every function and feature on the view and I made a mindmap of those.

We figured out that it is actually very complex view - most of the functions hidden behind buttons and icons. Simultaneously I was drafting different options for the new view. We categorised all the functions and features on the current view and started to group them for the new view. We continued iterating and showed the first mockups in the user piloting.

*The old view of Accounting Reports in Procountor*

*To add more Options to create reports user had to scroll down to find this dropdown called New search criterion.*

*This was the first feature I wanted to improve for the new view.*

Untitled - Old Accounting Reports View.jpg

*Mindmap of the functions and features on the old Accounting Reports view.*

*Categorising the features of the view.*

Wireframes & Mockups

Based on our team’s workshops, research, user stories and requirements I drew pen & paper wireframes of the view before designing on Xd.

I designed layouts for the Accounting Reports view on Adobe Xd. I was collaborating with another UX Designer and with the Product Owner. With the Scrum team we had several feedback rounds before I designed the final ones to be developed.

Accounting Reports

Phase 1

Accounting Reports

Phase 2

Accounting Reports

Phase 3

Accounting Reports

New Icon Design

Accounting Reports

Phase 4

Accounting Reports

Phase 4 - Dialog

Accounting Reports

Phase 5 - Tool Tip draft

Accounting Reports

Phase 5 - Dialog

Accounting Reports

Phase 6

Accounting Reports

Phase 7

Accounting Reports

Phase 8

Accounting Reports

Phase 8 - Dialog

UX Writing

I have been improving the UX writing on each view I have worked on. I have tried to standardise the terminology and use fluent Finnish and English to make it easier for the user to understand.

Here you can see an example the the Accounting Reports view and how the UX Writing and Terminology has been improved from the old view to the new view. It’s still waiting for couple of improvements (such as Header styles).

Untitled - Accounting Reports UX Writing.jpg

*Pilot notes cathered into Miro board cards ready to transformed into Jira tickets.*

Pilot Process

We had three pilot phases during the project to improve the Accounting Reports view.

We had tasks for our clients to work on and we also interviewed them both on the view we were working on and also on general topics relating to Procounor.

Based on the observation and feedback in piloting we iterated the view even more. We had three pilots with approx eight clients. We created improvement tickets after each phase to create even better user experience for the accountants.

UX & UI Improvements

Based on testing and piloting I improved the designs to be updated.

Here is the current layout for Accounting Reports which is still being improved sprint by sprint.

The new Accounting Reports view will be published in Spring 2021.

This is the new layout of the first landing to the Accounting Reports view.

Here the More Options panel is collapsed.

Here the user has added Favourites and Saved Options.

When scaling the window Saved Options will drop below the Main Options.

Designer Collaboration

I have just recently drafted Designers’ tasks and points when collaboration between Designers is critical to make tasks, reviews, feedback session, improvements etc. functional and efficient.