Map Rank Tracker:
Designing the Payment System
2025
Project for the Semrush company
Project goal
Reduce inconsistencies in payment messages to lower the cognitive load on users who encounter payments in different parts of the product.

Product link: Map Rank Tracker
Note on Confidentiality (NDA)
Due to Non-Disclosure Agreements, specific quantitative metrics related to user engagement or financial performance cannot be shared within this case study. The focus is placed on design processes, challenges, and solutions implemented.
My role and approach
  • Main role
    In this project, I was responsible for the entire design process, from initial concept to final mockups. I worked closely with a Product Owner, UX Writer, and developers to bring this vision to life.
  • Research & Analysis
    Before designing, I used analytics data to identify the key drop-off points of appearance of payment messages.
  • Strategic Planning
    Based on our findings, I developed the payment system. The key idea was to create flexible component base system.
  • Design & Collaboration
    I designed the screens and worked directly with a UX Writer to make payment messages clear. I also collaborated with developers to ensure the designs were technically doable.
Map rank tracker Payment system
Defining the problem
Inconsistency.
The main problem with product growth and point-of-purchase growth is inconsistency and lack of systemization.
Same but different.
In addition to the cognitive load on the user, this affected the development and implementation of new messages, which took a long time because they had to be developed from scratch each time.
Dilute focus.
Some messages contain a lot of information that does not help to make decisions quickly.
Big difference.
Some messages are completely different and do not offer solutions.
Map rank tracker Payment system
Implement the solution
Finding all payment points.
In order not to miss any cases, all points where the payment message is displayed were collected.
Systematization of messages.
A block structure was developed where each message is adjusted to the context and adapts the blocks separately.
Same message different settings.
All messages were standardized and added to a single component in Figma, and the same pattern was repeated on the front end.
Same block different settings.
Each block in the component has its own settings.
Same payment different settings.
The payment system for paying users and free users without linked cards is different. A scenario for activating the trial version has also been developed.
Credits explainnation.
One of the important aspects of the new system is the hint about credit determination and dependent from context.
Same payment different context.
Here you can see how messages adapted to the context appear in the same conditions but with different contexts.
Result
The payment system was implemented and showed good results, including a decrease in the number of window closures without any proposed action being taken.
This site was made on Tilda — a website builder that helps to create a website without any code
Create a website