Interface Development for Rafinad


Rafinad (Reliable Agency of FINancial ADvertising) - a new affiliate network aimed at financial offers. The project is part of a large structure with expertise in CPA.

About the project

We've been involved in the project since its inception. We helped in naming, developed a logo, prepared an original website, made a presentation for future clients. In parallel with this heap of work, we developed complex interfaces of the service itself.

UI/UX design for financial affiliate network

The development started in February 2020, and the layouts were delivered to the client in May, which is a very smalltime for such sophisticated services as Rafinad.

Special thanks to the client's project manager for the inclusion and speed of reaction to the new layouts: "Lyudmila - you are cool!".

First message

The codename of the project was KOKOC_FIN_CPA.

After some time and with our help the client came up with an interesting name — Rafinad (Reliable Agency of FINancial ADvertising). We started designing the interface without waiting for the ready name.

The first versions of the design were collected on the example of a complex section Statistics, without a ready-made design system.

At this stage, the task was to mark the grid and determine the general style of the user's interface. Our client and uswanted for service to have  individual character, therefore after the coordination of the layout "Statistics v7" (there were 10 versions in total) the lead designer developed his own design system.

Subsequently, we were updating the component base in Figma as new sections of the personal cabinet were added. This allowed us to speed up the creation of the product, both for our designers and for the client's frontend.

The component base in Figma

Another feature of the project - the development started in parallel with the design, when about ¼ of the site sections were agreed upon. We assembled styleguide, but sometimes it had to be revised to take into account new interface entities.

Style guide for Rafinad

In order not to slow down the development, especially for the frontend, our designer collected additional instructions and recommendations, such as these. That's what we call client-oriented work.

Instructions and recommendations

As mentioned above, the product manager was actively involved in the project and wanted to control all stages of development. Even the prototypes of the page Ludmila prepared herself, as she could, in Google Sheets. We, for our part, used the professionalism of our designers and turned Ludmila's ideas into a functional interface.

For example, Dashboard looked like this. On the left, before, on the right, after.


arrow-compare-left.svg arrow-compare-right.svg

That's what the Sources section looked like

arrow-compare-left.svg arrow-compare-right.svg

And that's what the page of offers looked like

arrow-compare-left.svg arrow-compare-right.svg

In total, the client provided us with 8 "prototypes" and an infinite number of edits. On individual pages, the number of versions came to two-digit numbers, and a very high speed of corrections was required.

The Lead Designer and Project Manager worked for several weeks in a row - receiving comments in the morning, and sending edited versions to the client in the evening. This project was a test of strength and pumped up the skills of the entire team.

In general, the following project statistics were achieved:

  • 2 managers
  • 6 designers
  • 12 weeks
  • 180+ screens
  • 450+ design hours
  • 700+ comments in Figma
  • Endless cups of coffee
  • Kilometer of nerve cells
  • A pleasant aftertaste when the project was done


Project team

  • Max


  • Artyom


  • Dinara


  • Vera

    Project manager

  • Ekaterina


  • Ludmila Serova

    Product manager

  • Kirill


Next project

Let's discuss your project

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.