The Problem
The product-tour concept was driven mainly by a business need: few clients were using the additional products and features available on the mortgage page. Our goal was to increase user engagement by showing clients what the page offered and how those features could benefit them.
Idea, prototype and testing
The initial idea was simple: highlight each product in turn and explain its benefits. The tour would be tailored to each client based on the products available to them, and our back-end developers confirmed that this approach was technically feasible.
Because the product tour was not our only active project and we still had room in an upcoming usability test, we quickly built a working prototype to gather feedback from clients.
Findings
The results of the first usability test did not meet our expectations:
- All participants who saw the beginning of the product tour said they would probably close it and explore the page on their own, as they did not expect the tour to be 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 test gave us valuable direction. Based on user feedback, we ranked the products and features from most to least useful. We also retired the name “Product Tour,” which participants found unengaging, and renamed the experience “Tips and Tricks” to communicate its value more clearly.
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 design-system component as the entry point: a top banner. My assumption was that users would find it less intrusive because it would not block their tasks, while still allowing them to start the tour whenever it suited 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 encouraging. Participants liked the “Tips and Tricks” concept and were more willing to start the tour. The two design options produced the following findings:
- 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 the research insights in place, I began working on the final version of the tour. Because the existing design system did not include a tooltip component, I designed one and added a Back button in response to participant feedback.
Final design and handoff
Once the final design was ready, I handed it off to the business analyst, who prepared the specifications for the development team. Together, we reviewed component behavior, tour logic, and edge cases. As the company was moving from Sketch to Figma, I transitioned smoothly between the two tools and delivered the final design in Figma. The project was completed, with post-launch data analysis expected to inform future improvements to the mortgage experience.
