UX research: Integrations
Soldo
Soldo is an expense management platform designed to help businesses simplify their spending. Companies create Soldo cards with prepaid balances and spending limits, then assign them to their employees, projects and teams. This lets them manage budgets, spending and reconciliation with ease.
Background
To make reporting and reconciliation easier and more efficient, users can integrate their Soldo account with their accounting software. Once the setup has been completed, users don’t need to go through the flow again.
Upon completion of the setup flow, users are shown a modal with some copy. The copy is fairly short, and focuses on one feature of the integration - lists. No other features are mentioned, and no guidance is given on how to use the integration, or what to do next. The button takes the user to the settings section, where they can complete various actions like making changes to the configuration or deleting the integration. This is information the user needs to discover on their own, as there are no further modals when they reach this section.
Hypothesis
The PM, UX/UI designer and I recognised that this lack of guidance about what to do next could be a potential issue. We hypothesised that users might feel lost after completing the setup, and be unsure of how to use the integration or where to begin. We believed key features of the integration were being missed by users, who hadn’t been made aware of them by Soldo, and were not discovering them on their own. We felt these issues could be creating a lack of clarity, engagement and efficiency for the user.
To solve this problem, we designed a ‘tour’ to take the user through the integration after the setup, letting them know which actions they could perform, where to find things and what to do next.
I designed the content in several ways, to test the level of detail, the placement of the information and the structure of the tour. I then worked with the UX/UI designer to build two prototypes for testing.
Current design
The current design is just one modal containing very limited information.
Prototypes A and B
We started with two initial prototypes. Prototype A involved more movement, with each modal appearing close to the area (or button) it was describing. Prototype B involved less movement, with each modal appearing in the middle of the screen.
During the testing, I wanted to assess how well the copy and design elements were working together. Was the copy clear, intuitive and supporting the design, and vice versa? Or was there a mismatch? Were participants looking for more visual elements to support the copy, or more written instructions like ‘You’ll find this section under X’ to support the limited visuals?
I also wanted to test the entry point for the tour. Would more copy giving a summary of what to expect generate better engagement, and encourage participants to want to start the tour and read on, or would it leave them feeling like they already had the information they needed?
Prototype A
The key features of prototype A were:
The first modal was larger, and used more colour and illustrations to catch the eye.
The first modal contained more copy, and included a summary of what to expect during the tour.
The overall prototype was more interactive than prototype B. Each modal appeared in a different place with a flashing orange dot used to indicate which button or area the copy was referring to.
Prototype A.
A closer look at part of prototype A.
Prototype B
The key features of prototype B were:
The first modal was smaller, and used no colour and one slightly larger illustration.
The first modal contained less copy, with no information on what the tour might cover.
The overall prototype was less interactive than prototype A. Each modal appeared in the middle of the screen, away from the area the copy was referring to.
Basic graphics were used to suggest where each action might be performed.
Prototype B.
A closer look at part of prototype B.
Testing round 1
The research was done using A/B usability testing with 6 finance professionals, all who use an accounting software. The company sizes ranged from 50 to over 1000 employees. Each participant saw both prototypes in a random order, and was asked to express their thoughts out load.
Key insights
For the first modal, most participants preferred the longer and more detailed copy of version A. They felt it set expectations for what was to come on the tour, and engaged them more, making them more likely to continue.
Some participants considered both versions to be a bit text-heavy. However, they did describe the content as useful. They would have preferred for it to be broken up into smaller chunks, with some requesting more visual explanations of the concepts,
Participants struggled most with trying to understand where the actions the copy was referring to might take place. Version A performed better on this front, as participants felt the placement of the modals gave more of an indication. However, most participants still felt this could be improved further.
4/6 participants preferred prototype A over prototype B.
Prototype A scored 15% more than prototype B for usefulness and engagement.
Prototype C
After reviewing the findings from the first round of testing, we set out to refine what we had and design prototype C.
I revisited the content, breaking it up into smaller chunks and tweaking any wording participants had found unclear. Technical restrictions meant we couldn’t take users in and out of sections automatically, so I added instructions to guide the user to click on the buttons and tabs that would navigate them around the feature itself. This meant we could take our modals inside each section, and show the user exactly which part of the page we were referring to, then back out and into another section to continue the tour.
The main features of prototype C were:
It utilised the more popular version of the first modal from prototype A.
The copy was shorter, and broken up into much smaller chunks.
The copy asked the user to click on buttons and tabs to guide them in and out of different pages, rather than the tour taking place on just one.
Prototype C.
A closer look at part of prototype C.
Testing round 2
The research was done using a similar group of finance professionals as the first. For this test, each participant saw only prototype C, and was asked to navigate through the tour, expressing their thoughts out loud.
Key insights
All participants were able to follow the instructions for navigating through the tour with ease. Clicking manually to enter and exit each section didn’t seem to slow them down or add any friction.
More than half of the participants used the words ‘intuitive’ and ‘seamless’ to describe the experience. They liked the placement of the text directly next to or inside the relevant area or section, as it provided the context they needed to understand the information they were being given.
A few participants still felt the tour was a bit text-heavy. However, others praised the level of detail, stating it drew their attention to certain functionalities they might otherwise have missed if using the integration on their own.
When rated on a scale of 1-5, prototype C scored 100% for usefulness and engagement versus 75% for prototype A.
Summary and conclusion
Once we had finished testing, we shared our results with the rest of the squad. As the results for prototype C were so positive, we all felt confident moving ahead with this design. We made any final copy and UI tweaks, then handed it over to the developers.
When the tour goes live, we plan to start monitoring feedback from Customer Care, to see how many queries (if any) we’re getting from users about how to use integrations. If the volume is high, or we don’t see much of a drop from the number of queries before we made the improvement, we plan to revisit and reiterate.