I was in charge of redesigning the UI of the pricing card for Taiwanese and Korean users with new information design to communicate more intuitively with our global users to increase our CV as pairs, the leading Japanese dating app, expanded abroad.
UI Design Information Design UX Design
Sketch Abstract Zeplin
Jan 2018
Considering consumer-centric design, the original pricing card designed by my previous Japanese boss was not intuitive, especially for the Taiwanese and Korean audience as pairs, the leading Japanese dating app, renewed its whole UI within the app completely for its international users while expanding to Taiwan and Korea as the Japanese UI/UX design is significantly different from almost the rest of the world. ・・・・・・・・・・・・ From my cultural user research, different from the Japanese audience, I realized for both Taiwanese and Korean audiences, crossed numbers with an arrow is a rather more common and intuitive way to express a discount in both cultures. ・・・・・・・・・・・・ In addition, what was supposed to be an accent occupied too much of the space on the pricing card in the original design by my previous Japanese boss. Hence, I altered the ratio of it to the pricing card and made it a ribbon-like shape to still catch the eyes of the audience.
As pairs, the leading Japanese dating app, was expanding to Taiwan and Korea, our Global Team completely redesigned the whole UI within the app since Japan has a very distinctive UI/UX design than other countries. The original pricing card UI was designed by my previous Japanese boss who does not speak any other languages except Japanese, so it was hard for her to design with the understanding of the wording and spacing in Mandarin and Korean and the cultural tension given by each copy when it comes to the expression of discount. As a native Mandarin speaker also the only foreign in-house designer in both the team and the company, I was responsible to redesign the pricing card UI to make it more intuitive to better communicate with our Taiwanese and Korean audience more effectively, especially Taiwanese and Korean users are not as familiar with the subscription culture, and do not subscribe as easily as Japanese do, while Japan is ranked as one of the easiest market to monetize as Japanese are more willing to spend their money, and subscription is a norm in Japanese culture.
After researching various Taiwanese and Korean apps and eCommerce websites, I realized the main components in common of the discount expression in both culture are the original price being clearly stated but crossed out with two red lines and a big arrow pointing to the discounted price in a huge font.
The original pricing card design, instead of showing the original price per month, it only showed a huge total amount of money saved from the campaign, so it is hard for the Taiwanese and Korean users to compare the discounted price per month. Therefore, I incorporated the findings of my research for the discount expression in Taiwan and Korea to provide our users a more intuitive sense of how much of a sale it is and incentivize them to subscribe.
I also made all the other elements in the pricing card smaller, including the total amount the user would be paying per time, the name of each plan which is named after the frequency of each billing cycle, and other campaign incentives.
In addition, as a secondary information the section of the total amount the user would save in a single billing cycle, which is much less intuitive than comparing the discounted price per month with the original price per month written clearly side by side, occupied too much space of the pricing card - almost 1/3. Apparently, expressing in a way of how much cheaper from the original price per month users would need to pay (Subtraction) is a lot more effective and intuitive than stating merely how much users would save over time (Addition) without showing the original price. So I made it into a small ribbon placing on the top right of the pricing card as an accent of the pricing card so that the information hierarchy is clear, and the first message the users would grasp easily is how much cheaper the price gets through the campaign.
Furthermore, rather than putting any design element in a particular place only once like the original design, I centered all the elements in the pricing card and adjusted the font color to give it a much more cohesive and consistent look without to make the message clearer and more intuitive. I also made other copy in the originally over occupying section or awkwardly positioned circle on the left of the pricing card into a small triangle ribbon placing on the top left of the card to use the limited pricing card space efficiently.
How to design information to make the message we want to convey the most across while displaying all the other little but essential information within limited space could seem easy but it is probably one of the hardest thing to do it well. It involves how to use the space efficiently, and what the size ratio of all the elements is that can have our most important message jump out. Most importantly, information design needs to cater to the expression of the local culture to communicate with the local audience the most effectively and intuitively.