Avalara SaaS platform
Researching and designing a SaaS solution for the existing on-premises Avalara VAT Reporting software
When I joined Avalara EMEA in January 2020, my role as a Senior UX Designer was to research and design a SaaS solution for the existing on-premises VAT Reporting software. There was also already a live cloud version of it, but no design thinking had been applied to the product. It was simply the code from the old Delphi on-premises app pasted on a server. This software is used by Medium to Enterprise level businesses to prepare and file tax returns to the authorities across the world.
As soon as I started I was interested in understanding what our users were going through, what they were experiencing on a daily basis while using the product and what pain points could have been turned into an opportunity. At the same time, I was keen to check if the existing UI and Design System (at that time a hybrid with lots of limitations), were serving the purpose the needs of the users. So the first step for me was to understand our users by conducting QUAL and QUANT research. In this phase I worked with then PM and with some support from our US-based UX Researcher.
At the discovery phase of my project, I conducted user interviews in order to get a better understanding of the problem.
Our UX Researcher had been visiting some of the users based in Europe the previous year, so I decided to build on that a second wave of interviews with external users as well as internal users who set up and initiate external users to the system. Based on my colleague's research I had done some initial draft wireframes to test with some existing and potential users, why trying to spot their pain points.
I ended up talking to 5 of our current users + 8 potential prospects that fit the user profile on usertesting.com. I was really curious to understand the WHY. Why do our users need our product? And why were some users finding it hard to engage with the product? How did they work on a daily basis, what was the first thing they did in the morning when they logged in? How was their daily workload distributed and was it stressful? What was the part in the journey of preparing and filing complex VAT returns that represented blocks, stress or frustration?
Each of the live sessions with our users was conducted via zoom because of Covid restrictions and lasted around 60 minutes. Results were pretty aligned between all of them, so it was easy to see patterns emerge:
👉 They're overworked because there is no order in their workload and no way of keeping track of what needs to be done
👉 Most companies have different roles (preparers, reviewers, admins) with different daily tasks and the existing system didn't allow for segregation
👉 The lack of a filing calendar, stated deadlines and clear prioritisation was creating bottlenecks in the execution of said tasks
👉 Having to use too many different softwares to execute tasks was taking a toll on many of them
👉 Their daily activity would start from checking what errors were blocking from filing returns on time, but current system hides errors behind a dropdown menu
This session also gave us the opportunity to test the early wireframes and the UI, so I created an affinity map with the comments from all the participants to adjust and create new iterations
While speaking directly to our customers, I also conducted on the sidelines a survey to define what features would be the top choice of our users and which ones wouldn't need focus for the time being.
We used Survey Monkey to send a 10 question questionnaire to 200 users (a mix of cloud and on-premises customers).
The results helped us prioritising the features and planning release roadmaps.
Based on the interviews we set up three personas. We referred to them throughout the entire product development process.
The personas were based on the research findings, the users we talked to and also knowledge from the stakeholders.
These personas helped shape the whole experience, especially how the different roles could work within the system.
Based on the research done with the users, I mapped out the users’ steps to see how I could simplify their journey to help them reach their most important goals with the product.
The steps were determined by observing and listening to the users during their working day. The more I focussed on the User Journeys and the Personas the easier it became to come up with a solution.
At the beginning of my design process I created wireframes for testing purposes.
I designed a workflow and task-based system that presents the users with a list of priorities according to their role within the company. In other words, the system does the heavy lifting so that the user can focus on more nuanced tasks.
These wireframes helped me sense-checking the UI with both the stakeholders and the users. It was a mix of high and low fidelity, produced in Sketch, Miro and Figma.
Below some of the components I designed to solve the issue of the lack of a workflow-based approach.
When I joined, the company already had a Design System, Skylab, which is a hybrid of styles and other design systems that was developed in time mainly following what had been previously designed or engineered, so it obviously had (and still has) many faults.
So the first thing I did was:
👉 Testing with users and colleagues for accessibility and usability (according to W3C standards)
👉 Collecting info from all the designers in the company to understand the design needs for their personas and from their own tests
👉 Researched the most recent standards and visual trends of Fin-tech apps
👉 There were several accessibility issues and many components were lacking or weren't designed in a way that could support how we're trying to solve the users problems.
👉 It lacked harmony as the grids weren’t balanced and there was no concept of golden ratio applied to Typography and other elements
👉 The visual language was received as too cold and technical by most of our users. Some of their comments were: "too much noise, can't find the focus, too much grey, too static"
👉 No alignment to the most recent visual trends of financial apps and softwares. Lack of colour and not aligned with the company's identity which is to be 'orange, colourful and bold'. Skylab was grey and dull.
For instance, when starting designing the new version of SaaS VAT Reporting, I identified some features that required a different approach to how tables are laid out and their UI. This meant steering away from the current grey rows on white background and instead using white rows on grey background. On clicking on the row, a panel opens below like an accordion with prioritised information and call-to-actions that emerged having high value for the users.
White rows facilitate readability, contrast, accessibility by also allowing a more varied selection of font colour.
To validate and test the usability of the new tables, 25 colleagues from different departments were involved in a quick usability research. The audience was a mix of experts who know the current product and colleagues who have little or no in-depth knowledge of it. They weren't aware of this research when asked, so to avoid any prejudice.
I presented them with two versions of the same screen and asked them:
"Looking at these 2 screens, especially the rows area, which one of these do you feel is easier to the eye, less overwhelming and facilitates focus? Version 1 or 2? Please don’t take too long to reflect on it, just first impression (please for those of you who have been here for a while, I ask you to be honest regardless of what the current software looks like)."
Version 1 applied the then current Skylab style (grey rows) applied to the new UX. Version 2 applied components that I had designed based on user research rather than Skylab.
80% voted for version 2 with no hesitation. The areas that require action and focus were perceived to be easier when white was used instead of grey. The eye is easily more attracted and focussed on white areas on grey background rather the contrary. It was also perceived as "less intimidating than seeing a long list of 'Prepare' instruction".
One of the changes I advocated for was the use of The Golden Ratio Typography Calculator, which takes into account font size, x-height, line height, and line width to determine the optimal combination of each attribute per typeface in terms of readability, accessibility, and aesthetics.
The idea was accepted hunanimously and the changes were introduced in the Skylab Typography Section
Introduction of colour
More colours were added to the whole design system to reinforce information being communicated by other component attributes. I also introduced colourful tags to facilitate status focus in a busy table.
I introduced round-cornered white widgets on grey background to highlight active areas and grouped activities.
The use of emoji was part of my contribution to change Skylab's 'cold' language, using it to represent countries flags, support gamification and create a friendlier environment for the user.
The new rounded designs, addition of colour shades and the inclusion of emojis introduced a whole new approach to how the visual language impacts our users on a daily basis. For example portraying a list of clients in an ID-style fashion rather than in a table humanises the client and gives space to have a quick overview before drilling into the content.
I advocated with other colleagues to switch from Sketch and InVision to Figma to reduce costs and optimise collaboration between Designers, PMs and Engineers. To build the case, we timed ourselves in the production of exactly the same prototype to show how much quicker it was for us to use Figma. We also involved some of our engineers to hear their feedback on how Figma facilitates collaboration.
The components and patterns that I designed for SaaS VAT Reporting and the improvements I brought to the Skylab Design System, inspired our UX Managers, Stakeholders and other UX Designers.
My visual design was solving problems that were common to all the users of our different products. These designs are scalable and flexible enough to incorporate any of our product under one roof to create a unified experience.
I was involved in the conceptualisation of the design patterns for the creation of this unified experience, which in early stage of design is also taking into consideration a mobile optimised version.
New pattern: rather than presenting users with a list of items in a table, the new pattern proposes to present a dashboard with widgets that prioritise actions.
