The Secret Screen Structure That Tripled Click-Through Rates Without Disrupting Users

Making necessary suggestions stand out naturally without interfering with users’ core tasks has long been a persistent challenge for all product developers. On the Toss Bank interface, the asset management report feature was originally positioned as a banner at the bottom of the transaction area, but its click-through rate (CTR) remained a mere 2%. This project began with the question: why don’t people click on such a useful recommendation that perfectly fits their situation? We hypothesized that in a complex environment overflowing with information, the feature was being overlooked simply because it failed to distinguish itself from surrounding elements. Consequently, we set a goal to make the report highly visible while ensuring it was immediately recognized as a personalized suggestion. In this article, we will examine in detail how we went beyond changing the expression to fundamentally alter the structure, thereby tripling the CTR. Through this story, you will gain insights into how to increase attention without compromising the user experience.

=

The Secret Screen Structure That Tripled Click-Through Rates Without Disrupting Users

1. Why Don’t Users Click on Useful Recommendations?

The asset management report, located below the transaction area on the initial Toss Bank screen, was a highly useful feature that meticulously analyzed customers’ asset status to suggest tailored products. However, contrary to the planners’ expectations, the actual CTR remained frustratingly low at just 2%. Despite being a customized recommendation based on each customer’s specific financial situation, we wondered why no one was clicking on it. After analyzing various possibilities, we realized that the home screen was cluttered with too much mixed information. Amidst a sea of account details and transaction histories, the report banner was buried and failed to distinguish itself sufficiently from the surrounding data. Consequently, customers would often scroll past it mindlessly, failing to even notice its existence. To solve this, we decided not to simply use flashy colors but to ensure that the aspect of it being a personalized suggestion for their specific situation stood out clearly. We initially started with light attempts to improve visual attention by changing the wording and expression. We introduced a speech bubble format to create a sense of intimacy, as if speaking directly to the user in a friendly tone. We also conceptualized a flow where the user’s current asset status is briefly displayed first, followed by a natural suggestion of a suitable product. We naively believed that this direct, conversational approach would make the recommendation resonate more deeply. However, despite these efforts, we hit a limit where the overall complexity of the screen remained unchanged. This was because the fundamental structure of adding one more piece of reading material to a complex screen, where users arrive with distinct purposes, had not changed. The core problem was that account information and new recommendations were competing for limited attention in the exact same space.

2. The Structural Limit of Conflicting Account Info and Suggestions

There is a fundamental difference between account information, which customers voluntarily check, and the report, which is a one-sided suggestion from the operators. Because two types of information with entirely different roles were mixed in one place, the report was easily overlooked as users quickly scanned their account details. However, we were in a dilemma where we could not simply enlarge or overly emphasize the report area. If the report stood out too much to someone trying to check their balance immediately, it risked obscuring the essential information they actually needed. Ultimately, we had to find a clever way to ensure the report was discovered naturally without ever interfering with the user’s primary task. We needed to move away from a structure where account information and the report engaged in a wasteful competition for attention in the same spot. We were inspired by the idea that if we displayed these two pieces of information in completely different spaces and dimensions, we could resolve this complex issue cleanly. Instead of forcing them to compete for space within the existing narrow screen, we began to explore a completely new visual position. After much deliberation, we recalled the structure of a small tooltip that naturally appears when a mouse cursor hovers over an element on a website. Tooltips have the great advantage of displaying additional necessary information lightly on top of the base screen without obscuring it at all. The idea struck us: what if we applied this ingenious structure directly to the mobile screen environment? We kept the base screen containing account information calm and unchanged, while separating the asset status suggestions into a card that floats slightly above it. This way, even within the same screen, the account information and personalized recommendations occupy completely different layers, preventing their visual attention from clashing.

3. Creating a First Impression That Doesn’t Feel Like an Obstacle

A card floating on the screen carried the risk of looking very similar to an annoying pop-up ad that interrupts the user’s flow. We worried that users might mistake it for an advertisement before reading the content, causing them to frown or look for a close button before even checking the details. Therefore, we carefully established specific criteria to ensure the floating card was accepted naturally without resistance. First, we meticulously examined various banners within the app to compare how ads and standard features appear differently to customers. Most ads used large graphics and overly bright primary colors to forcibly attract attention. In contrast, useful features focused on calm text and intuitive buttons, establishing an information hierarchy to convey content smoothly. We concluded that for the report to feel like a genuine feature rather than an ad, the content and information must reach the eye before any flashy graphics. We boldly stripped away unnecessary graphics and stimulating colors, creating a clean layout that allowed the eye to rest on the content itself. Instead, we filled in small details meticulously to build up the product’s completeness and depth. We applied soft corner smoothing to the card’s edges and added a subtle translucent texture to help it blend naturally with the background screen. We carefully adjusted a very fine gradient on the buttons to increase visual density and evoke a premium feel. These small design elements combined to form the foundation for customers to perceive it not as a foreign obstacle, but as a refined and useful feature. No matter how good a suggestion is, if the first impression feels like an ad, users will close their minds; therefore, reducing visual weight was paramount.

4. Flexible Sizing That Adapts to User Behavior

If the report card continued to occupy screen space and demand attention even after users had accidentally discovered and read it, they would inevitably feel significant fatigue and burden. Users might want to read the recommendation immediately, but at other times, they may prefer to check their account or other necessary information first. Therefore, we carefully designed the report card to shrink naturally and smoothly the moment a user begins to scroll. When users start browsing the screen actively, the card yields its space, allowing them to view other content much more comfortably. The card, now smaller in the corner, remains an excellent entry point that customers can easily reopen whenever curiosity strikes. We made the visibility of the report flexible, adapting to the user’s real-time behavioral flow rather than keeping it in a fixed state. This flexible change helps users feel that they are proactively exploring the screen rather than having information forced upon them. When users first enter the home screen, the report starts in a closed state and unfolds naturally and elegantly. The base screen should first appear comfortably to the eye, followed by the card opening smoothly, so it feels like a warm suggestion about their current asset status. To instill a sense of relief that the card can be closed again at any time, we repeatedly refined the texture of the opening and closing movements. Movements that popped out too quickly felt startling and burdensome, while movements that were too slow felt sluggish, as if the system was lagging. Ultimately, we found the optimal movement speed that was neither too light nor too heavy, completing a natural and comfortable experience for the customer.

5. Completing Naturalness with Movement Details

Determining the speed of the card’s opening and closing movements was a very difficult and critical gate that defined the quality of the user experience. Movements that popped out too quickly felt like a warning window suddenly appearing, causing psychological burden for customers. Conversely, movements that were too slow and weak, with little rebound, were smooth but could be mistaken for a slow-reacting screen system. On the other hand, movements with too much rebound, while lively, felt too scattered to seriously display important asset information. After numerous tests, we finally found and applied the most ideal movement formula. It was a method that started quickly, decelerated smoothly, and added a very slight, subtle rebound at the very end. This delicate movement significantly reduced psychological burden through a smooth finish while injecting vitality into the screen with the small rebound. We did not stop there; we used a technique to subtly offset the start times of the two motions: position movement and size change. If both motions start simultaneously, it looks like a crude change in size and position, but slightly offsetting the start points creates a beautiful curve. Thanks to these subtle details that move in smooth curves like a living organism, the floating card achieved a higher level of polish. These movement details, which cared for emotional satisfaction beyond technical implementation, ultimately became the decisive key to winning customers’ hearts.

6. Amazing Results Created by Structure, Not Just Expression

We conducted actual customer experiments using three versions: the existing flat screen, an intermediate version with changed expressions, and a floating version with a completely revamped structure. The intermediate version, which only changed the wording and expression, showed only a marginal increase in CTR, rising just 1.1 times. However, the floating version, which innovatively changed the information hierarchy and spatial structure itself, recorded a miraculous performance, tripling both CTR and conversion rate. Most encouragingly, not only did clicks (a simple expression of interest) increase, but the conversion rate (leading to actual action) also surged. If it had merely been noticeable but inconvenient, clicks might have increased slightly before users dropped off; however, the structural innovation truly captured the hearts of customers who genuinely needed it. The only way to be naturally and clearly visible without being disruptive lies not in flashy appearances, but in the fundamental redesign of the structure. In the future, we will avoid the mistake of relying solely on flashy graphics or stimulating expressions and will deeply respect the flow of customer behavior. We will continuously strive to create wise structures that convey necessary value at the right time without interfering with customers’ comfortable performance of their tasks. This experience of revamping the asset management report reminded us deeply that design is not simply about creating a good-looking shell. The power to solve complex problems clearly always comes from deeply understanding the context of customers’ actual behavior and restructuring the board. In the many product challenges we will face in the future, we will continue to practice the aesthetics of visibility that seeps in naturally without disruption. We encourage you, our readers, to use the wisdom of changing fundamental structures rather than just surface-level flashiness to create wonderful turning points for growth in your daily lives and work.

Frequently Asked Questions