Optimising core tasks at Dext.com
UX | Design Research | Design systems
Sector
Fin-tech, accounting, web app
Challenge
Identify opportunities for optimising core experiences that would help customers to achieve their goals faster and more efficiently while using the product.
My role
UX Designer, workshop organizer, facilitator
Context
Dext is a product for bookkepers and accountants that helps in collecting and extracting paperwork and then automatically processing it to accounting software.
Core product Journey
Approach
Considering the limited availability of specific resources like time, I have selected a number of techniques from each of the UCD phases that would be appropriate for the current project.
empathising
Identifying pain points
I have conducted a series of interviews with customers and internal stakeholders (CS team, sales, product managers) to collect feedback about existing customers journey, gathered qualitative and quantitative data from customers usage metrics and identified tasks that are taking most of time.
As a result a series of pain points have been idetified in the stage of validation for financial documents. A common pain point theme was related to the inconvenience of surfacing the errors and the mechanics around fixing them.
Setting the context
How might we
Provide a seamless and intuitive experience that simplifies the complexities of financial document editing, ensuring that our customers can accomplish their tasks swiftly and with greater accuracy.
Design Auditing
Diving deeper into one of the bottle necks of document editing, I have performed a design audit of existing functionality related to fixing validation errors.
One of the biggest opportunity identified has been around ways of surfacing validation errors, and mechanisms for fixing them so that the financial documents would become ready for publishing.
Advocating for raising the UX maturity level
This design opportunity in core user tasks could also significantly contribute to raising the UX maturity level from usable to a comfortable one and further. By improving the clarity and feedback of validation messages, users would be able to complete tasks more efficiently and with less frustration.
This enhancement would be a good example that demonstrates the value of user-centered design principles, such as usability testing and iterative improvements, in addressing real user pain points.
Presenting the positive impact of these changes, like reduced error rates and increased user satisfaction, to stakeholders would build a strong case for further investment in UX practices, thereby advancing the organization’s overall UX maturity.
Challenges and constraints
users
- Reduced visibility of errors/invalid fields
- Reduced feedback
- Inconsistent use of UI elements
- Reduced visibility of system status
- Reduced transparency on the input data requirements/constraints
- Misleading use of colours for various input states
Technology
- Changing core components in current system architecture was resource heavy
- Introducing new elements would mean building new components
- Dependencies with resource help centre
Business
- Limited quantitative data metrics
- Is it worth the investment of time and effort?
- What is going to be the impact?
Design system auditing
To factor in one of the biggest challenges related to the implementation cost from a technical standpoint, I've performed an audit of the design system components to have a better understanding about the complexity of introducing changes as well as finding affordable ways of implementing new solutions by reusing existing components.
At this point in time there were multiple components and design systems in place, which lead to higher maintenance costs and limited flexibility for new improvements.
First iterations and internal feedback
To improve the visibility of validation errors while keeping the implementation cost low, as a first attempt we tried to use the existing components and get feedback from internal stakeholders.
USING EXISTING COMPENENTS
Internal Stakeholders feedback
- The interface looks alarming with the red colours
- Makes me feel like I did something wrong
- Seems that are are too many bold coloured elements on the screen, it's hard to focus
Implemented feedback and updated styles
Internal feedback
- The infobox is taking too much vertical space, requiring more scrolling
- Input background color might be confusing
- Copy is very long and requires more time to read and process
Further iterations and feedback
Through a series of workshops we have decided to significantly refactor and improve the copy for the validation errors to make them easier to read and more actionable.
Internal feedback
- + It is much easier to read
- + The messaging is clearer
- - Requires attention shifting up and/down to take action on the required fields
Agreed version
Finally we agreed on a version that will contain the improved copy to be crisp and clear, directional, the use of an overview banner at the top of the form and inline validation messaging to highlight the fields that require attention.
Testing
Validating proposed solution
- 12 non-users, UK, US market
- Domain experts in accounting and bookkeeping
- Unmoderated task based tests to track against defined success metrics
- Assessing difficulty of task and comprehension of copy
To validate the proposed solution we have performed a series of unmoderated tests with non users (to minimise bias) who were domain experts in accounting and bookkeping in the markets were our product is available.
We aimed at assesing the perceived difficulty and ease of understanding the error messages between the existing and the new proposed solution while also measuring the task completion speed.
We have noticed quite outstanding results, showing a significant improvement with the proposed new solution. All particiants have perceived the new interation as being easy or very easy for fixing the errors as well as for the ease of understanding the messaging.
Task completion has also been reduced from an average of 156 seconds down to 71 seconds.
Validation challenges
While we were able to see a significant improvement based on the testing results, there were still ramaining a number of challenges
UX AND RESEARCH
- How long does it actually take to fix a real item by a real customer in the worst case scenario
- Anecdotal feedback and review might be not representative due to a limited sample group
Business challenges
- Running more tests would significantly increase the budget and time to finish the project
- Unclear business impact. Is it a “nice” to have or a “need to have” ?
Technological challenges
- Limited quantitative tools to test on real users
- No segment events for existing components
- New components would take time to build
Quantifying experiences
To overcome the existing challenges I've decided to use a scientific testing method called KLM-GOMS (Keystroke-Level Model). It uses empirically derived values for basic operators like keystrokes, button presses, double clicks, and pointer movement time to estimate task times in seconds.
In this way we could compute and compare how have the applied changes affected the time required for fixing validation errors and have reliable data.
Consecutively, I've broken down the task of fixing errors into subtasks and further down into button presses, pointing, homing and menthal activities.
Results
Optimizing user flows and efficiency has led to a significant reduction in error-fixing time, speeding up the process by 58%, from 50.4 seconds to 29.3 seconds. These usability improvements, including a cleaner interface, improved consistency, and better error copy, have not only enhanced the user experience but also raised the UX maturity of the product.
By addressing these core user tasks, the product now offers a more intuitive and seamless experience, demonstrating a commitment to high UX standards and continuous improvement.
Next steps
- Crafting and implementing updated and new components in the Design System
- Factoring scalability and accessibility
- Establishing guidelines for error messaging
- Applying gathered design knowledge to mobile platform
- Fine tuning interactions and micro-interactions
