New Design for Promotion Details Page
Once Again, More Than Just Looks Upgrade
Previously, I’ve written about tiket.com’s list of promotions new design. It’s been a while and now we’ve finished implementing the promotion details page. But, before we go into the new design explanation, let’s take a step back and have a look at the problems users faced using the old design.
Problems from Old Design
Let’s have a look at our old design.
1. Bad readability
On the old design, you will see brief text explaining the promo after the main banner. And the text is centered. Although most people maybe won’t consider it as a problem, actually it’s kinda bad for the users. Why? Because centered text depends very much on the text itself.
You must have spotted the vertical red line that I added on the old design. Centered design will force users’ eyes to scan the page, with different starting point at every line / section. Think of it as a bad consistency.
2. Multiple promo codes with the different TnC
Different transaction amounts will have different promo or benefit. That’s a common law everywhere. And to differentiate that, sometimes we have to release multiple promo code.
On the image above, you can see 2 promo codes and only 1 TnC. How will the users tell which point in the TnC is for which promo? Well, there is no other way than to read all the TnC 🤦♂
3. Bad encouragement
On the old design as you can see above, after the eye-catching promo code in a blue box, users will see a search box first rather than the TnC. For the users themselves, it may not be a problem. In fact, they might be happy because they can search whatever tickets they want and then use the promo code right away.
But, not everything is as good as it seems. Since we encourage users not to read the TnC before they have to search, this design has its own problem later on. We received a lot of complains from users because when they tried to apply the promo code on the payment page, they found an error. The promo code couldn’t be applied.
Confusion, disappointment, anger, you name it. Just imagine when they complain to social media and accuse tiket.com as a liar. Then the app’s rating suddenly just feel like having a free fall.
4. Hard to switch between promo detail pages
Everything is not what it seems. We all know that marketing has their own way to express themselves and attract customers. There will always be misleading image and misleading promo title. With this situation, there will always be misled users, clicking the promo they think matches their current needs.
It’s not unusual for users to browse the promotion list and open a lot of tabs just to check what is the promo about, just to answer the most important question, “Will it be eligible for me?” Unfortunately, in the old design, we didn’t give users the ability to see other promotions ☹️
New Design to Solve the Problems
In this new design, we tried to solve all the problems above while also creating sleek and minimalist design. Drumroll please :)
Here comes the new design.
1. Better readability and social sharing
Now all text are aligned on the left, and users can scan the promotion page easier. In a matter of second users can easily scan and determine whether this promotion is eligible for them or not.
A second saved means more happy users, and hopefully happy users means happy company 😛
Also, we know that people like to share happiness or just to brag that they are the first one to find the promotion to their friends or family. Hence, the social sharing buttons at the top of the page 😉
2. Read only what you need
Usually users have concerns about promo regarding these factors.
a. How much is the promo?
b. How much is the minimum transaction value?
c. When is promo period?
d. What is the promo code?
And thus, we came up with a better, enhanced version of promo code. We still stick with the skeuomorphic design, giving the promo code in a coupon form.
Now in the coupon users can see what kind of promo it is, based on the little icon at the top left. We try to make the title as informative as possible, and at the bottom of the coupon, we try to list the most important things that the users want to know. In this example, we give information about the participating airlines and the minimum transaction value. While at the bottom of the page, users can see tiket.com’s general TnC.
3. Go with the flow
The most important part of the coupon, is of course the promo code. Being the most important part, it’s only logical if we put more effort into it. 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, “Ayo Pesan” or “Book Now”, depending on the language setting.
If we have specific products for the promotion at the bottom of the page, clicking the copy will scroll the page automatically so users can see the products. A search widget will be ready to take the place of product recommendations if we don’t have any showcase.
Currently, we only have search widget for flights and hotels. The other products are still on development (Please be patient 🙏). Thus, clicking the copy will take users to the product landing page.
4. More ways to see more options
At the right side of the page, users can see other ongoing promotions. Currently, our logic is simple, we display the 3 newest promotions. In the future we will surely develop a logic to personally suit the users’ needs. Please, wait for it, patiently 😉
Since this is a desktop version, the mouse pointer most of the time will move around. Different from the mobile version where the back button always sticks at the bottom of the page.
Forcing users to click the back button might be far away, since who knows where the mouse is?
So, we give the classic and familiar breadcrumbs menu at the top. Users can also click the link button located at the bottom of the side promotions. Both will take users to the list of promotion page.
Summed up, that’s it for our new design explanation. This is the fruit of our labor. Thanks to our beloved UX Designer Adit Septian and UI Designer Eveline.
Stay tuned for the next post where we will talk about more new features on our mobile version!! Or would you rather to know the process behind this design? 😜
