The Problem
The idea of the product tour resulted mainly from a business need. Not many clients were using additional products and functionalities available on the mortgage page. Our goal was to increase users’ engagement by making them aware of what they can find on the page and why it could be beneficial for them to use it.
Idea, prototype and testing
The initial idea was pretty simple – highlighting one by one all our products and explaining why it would be beneficial to use them. Such product tour would be tailored individually to each client depending on the offerings that they have access to (our backend developers confirmed the feasibility of such solution).
Since the product tour wasn’t the only project that we were working on and we had still some room in the upcoming usability testing, we decided to set up a working prototype, so that we could get some feedback from our clients. Because of time constraints, this had to be done quickly.
Findings
The results of the first usability testing weren’t that satisfying:
- All the users who had seen the start of the product tour said that they would most probably close the tour and check the page by their own, since they usually don’t find it useful.
- Users who went through the tour said that some of the explanations did not add any value.
- However, users appreciated some of the steps of the tour, like shortcuts and notifications, as the shortcuts were not that obvious and the notifications were rather hidden.
New approach
The usability testing gave us some valuable clues. We categorised the products and functionalities from the most interesting ones to the least interesting ones according to our users.We also decided not to use the name “product tour” anymore, because it wasn’t engaging at all, as we could see during the testing. We changed the name of the tour into “Tips and Tricks”, as it sounds more interesting.
As soon as our UX writer had some capacity, I introduced her to the project, so the text for the specific steps of “Tips and Tricks” could be finalized.
One more thing that needed some rethinking was the entry point. Initially the tour started with an overlay, which test participants could either close or use to start the tour by clicking on a button.
I decided to test a different component from our design system that could be used as an entry point: a top banner. My assumption was that users wouldn’t find the top banner so irritating. Users wouldn’t feel prevented from completing their tasks and. if they wished so, they could start the tour whenever it was convenient for them.
New prototype
The new Sketch prototype included both versions A and B. We wanted to find out which entry point would work better for our users and to test the different versions of text that we had prepared.
Second testing – findings
The results of the second test were much more satisfying! Test participants liked the idea of “Tips and tricks” and showed their motivation to start the tour. Regarding the design versions:
- The overlay was more visible; however, users still wanted to close it first, especially if they were looking for some specific information.
- The top banner was less intrusive. Users liked the fact that they could decide when to start the tour, but they wouldn’t want the banner to stay on top of the page forever. What test participants found especially helpful were the tips on Saron development, the notifications and the property valuation.
Tooltip component
With all of the information gathered from the research I could start working on the final version of the tour. I needed to design a new component because the current design system was missing a tooltip. I also added the “back” button according to the test participants’ wishes.
Final design and handoff
When the final design was ready I handed it off to the Business Analyst who prepared the specifications for the development team. We discussed the behaviour of the components, the logic behind the tour, and the edge cases. As the company was switching from Sketch to Figma, I managed to transition smoothly from one tool to the other while working on this project. The final design was provided to developers in Figma. The project is completed, but our work isn’t over yet. Data analysis for sure will bring us some interesting discoveries that can be used for further improvement of the tour for our mortgage clients.
