New Design for List of Promotions Page
More Than Just Looks Upgrade
Hey you, some of you might have noticed that tiket.com’s list of promotions page has a new cool design. It’s been revamped into the new design. Before we go into the new design explanation, let’s take a step back and have a look at the problems users face using the old design.
Problems from Old Design
1. Users Can Only See Few Promotions
On the old design, there are 2 sections, left and right. On the left, there is a sticky filter that will stay no matter how far the users have scrolled the list of promotions on the right. Because it is sticky, users can only see up to 4 promotions at a time, unless they have a very big screen.
Sure, it’s not that big a deal until we had a usability testing. According to our research, users like to scroll and see a lot of promotions. There aren’t many users that use the filter.
2. Out-of-date Promotions
Another problem, fortunately not on what they discovered on tiket, is that users often find out of date promotion. Although this might come from bad data management on promotion, back-end problem or human error, we feel that we could help addressing this issue.
3. No Promotion Code Upfront
Also, users also told us that they like seeing promotion code upfront. This is because we discovered that users like to open promotion detail on a new page.
They search for and read the TnC, and then close the tab when they’ve finished reading it. This behavior takes them back in the list of promotion page. That’s why we realized the importance of displaying the promotion code upfront.
The New Design
1. A Lot of Promotions to See
We followed the result of the UT and designed accordingly. We gave what the majority of users want, to see a lot of promotions. Now, by moving the sticky filter to the top, users can see up to 6 promotions at once.
2. Sort, Filter, and Search
Sort is also a new feature we introduce in this new design. This is the solution that we give to address the out of date promotion. In sort, there are 3 options users can choose: Recommended (by our own algorithm, and is the default), Ending Soon, and Latest.
Feeling overwhelmed? Users can click the filter dropdown button and select what kind of promotions they want to see. The filter field itself is automatic. When users click any options, the system will detect how many options are currently selected by the users and the system will update the filter field. A simple yet informative touch for the users.
Applying the filter will result in each option displayed as a pill button. This way, users can delete each of the filters easily. Too many filters to delete? We also give the users a pill button to reset all filters.
Moving the filter to the top of the page gave us an empty space that we could use. We want to utilize this space, so we also give users the ability to search for promotions using keywords.
Currently, the search system only matches typed keywords with the title of promotions. Maybe, in the future, we will upgrade the search system to also match typed keywords with the content of the promotion :)
The search system works in real-time. As users type their keywords, the search system will find matching promo without additional action needed. When the search system finds no matching promotions with typed keywords, users will see an empty illustration along with the CTA to reset all the filters.
3. Upfront Promotion Code
In the old design, we only gave the users info about promo period and the applicable platforms.
However, there’s the catch when there is more than 1 promotion code. We cannot take the risk confusing the users, so we only say that we have x promotion codes. Users are expected to read the TnC in the promotion detail page and decide for themselves which promotion code they are going to use.
We also give users the ability to copy promotion code easily. Currently, users can click on the copy icon, while in the future we would like to make it so that the code is automatically copied when users click the promotion code area.
Copying the code will trigger the system to give feedback to the users. There will be a snack bar informing the users that the promotion code has been successfully copied. The promotion code area itself will change from blue background to white background with a checkmark. The copy icon itself will transform into a more inviting copy, “Book Now”
As of now, clicking the “Book Now” will take users to the promotion detail page where users can read the TnC. It’s still debatable whether to make the “Book Now” takes users directly to each specified product (Flight, Hotel, etc.).
We don’t want to encourage users to directly try whether the promotion code can be applied or not without reading the TnC first. More likely, users who find the promotion code not applicable will be disappointed. Furthermore, they have to derail from the booking process just to read what is the condition for the promotion code.
Well, that’s our new design for the list of promotion page. We added a lot of improvements to the design. Not only looks and feels, but also set of new features.
What do you think about our new design for list of promotion page? Cool isn’t it? It came from the hard work from our beloved UX Designer Adit Septian and UI Designer Eveline.
Also, wait for the next post about the promotion detail page :)
