Persistent Ribbon is a search comparison widget for travellers shopping for hotels on mobile. The ribbon will pop up on a hotel detail page, guide and follow the user to compare prices across different travel websites.
Mobile Web
Interaction Rate ↑ 50%
A journey of iteration.
The original ribbon design and the not-mobile-friendly experience of opening several tabs with one tap.
The previous version of the ribbon is one of the exsiting products of Intent Media. But, as it was originally designed for desktop browsers the product had some shortcomings:
- The widget was not responsive on smaller mobile phone screens
- The widget opened new tabs in the browser, making it difficult to navigate on mobile phones
Together with our product manager, designers and engineers, we drafted an early idea what if we put a ribbon that can stay and follow users’ journey to make their navigation between different websites easier?
The initial mockups I created.
Based on our idea, I designed mock-ups of multiple solutions. We chose the solution that best met our goals. I then quickly created a prototype of this solution in InVision. We recruited users to come to our office for user testing.
Rounds of user testing sessions helped me to understand the problem and knock down the design challenge.
We setup a hypothetical online hotel booking scenario and asked them to compare prices for the hotel of their choice on at least two different websites. This allowed us to see if the ribbon would catch their interest and to also learn how they compare prices when not using our ribbon.
A simple detail learned from user testing but neglected in the beginning of the design.
In this user test, the participants did not notice the ribbon. We had originally put the ribbon on top of the page for better space management. But, we found that putting the ribbon on the bottom was more noticeable because of the way users navigated the content.
This time, all users noticed the ribbon, but were confused about its purpose. We discussed this trend and came up with the following possibilities:
There's always a "wow" moment doing design critique.
To overcome these challenges, we simplified the flow to a single step process and created buttons using icons and text, for better brand recognition.
User testing with updated design.
So far we designed within the constraints of the tech platform, but at this point, we found that users would expect a ribbon that adjusts functionality based on context. For example, on a list page with multiple hotels, the user expected comparison buttons to show them other list pages. On a hotle details page, they expected buttons on the ribbon to show them the same property on multiple travel websites. Hence, we shared the user testing highlights with the team and pushed for changes on technological front.
User testing with gamified design.
We also tested a gamified user flow, ike a journey map users follow to unlock and discover new prices. However, the gamified design didn’t enhance the user experience. Users we tested ignored the suggested path and would just visit sites out of order.
The final flow and design of persistent ribbon.