

Affiliate Marketing
Platform
UX/UI Project
August - 2019
01
Project overview
01
Research
Interviews
Personas
Competitor analysis
Research available customer data
User flows
The product
Per-Mate is a cutting-edge affiliate marketing platform that strives to establish fairness and trustworthiness for both advertisers and publishers. Project ultimate goal is to provide a balanced and reliable environment where advertisers and publishers can collaborate effectively and achieve mutual success.
Project goal
My role in team
My responsibility
Senior UX/UI design
Create products with great service, easy to use, high security, cross-platform
Research, UX/UI Design, Interaction Design, Prototyping, Design system.

Understand
the user
The scope of work
Research
Ideation
Prototyping
UI Design
User Testing
Research available customer data
Personas
Problem statements
User flows
Competitor analysis
Function analysis
Define MVP
Information Architecture
Paper wireframes
Digital wireframes
Prototyping
User testing
Adjustment
Visual Conception
Accessibitily testing
Final design of all layouts
Interactive prototypes
Design system
User testing
Results summary
Define next step
Users’s pain points
Cost issue: Publishers incur significant expenses in renting management and optimization tools, while advertisers also bear the cost of screening out low-quality affiliate partners. This can result in a substantial financial burden for advertisers.
The use of multiple tools often consumes a considerable amount of time for publishers to track and monitor campaigns across various platforms.
Controlling the quality of traffic in the affiliate industry is a challenging task. Low-quality publishers can lead to a significant marketing expense for advertisers without delivering satisfactory results.
There are still dishonest and unprofessional advertisers and networks operating as scammers, obstructing the success of their partners.
Finding reliable publishers for advertisers, as well as finding suitable advertisers for publishers, can be difficult due to a fragmented and inaccessible market. This leads to publishers and advertisers having to work through multiple intermediaries, making it harder to control the quality of traffic and reducing payment rates for publishers.
The affiliate market is also challenging for newbies as information and industry experience are rarely openly shared.
Setting up tool systems remains challenging, requiring communication with multiple parties for each specific tool to support the integration process. Additionally, businesses in the market have not placed enough emphasis on customer support for their clients.
1
2
3
4
5
6
7

02
Application Structure

Ideation &
Prototyping
Permate Platform
Advertiser Interface
Publisher Interface
Based on the analysis of the platform's functionality, business goals and user needs.
The structure of the MVp application. Only meet basic features
August - 2022
Because of the confidentiality of the project, information will not be shared much


03
Wireframes
500+
Screens

Wireframe of Create Offers >>
Wireframe of Create Offers >>
04
UI Design
The application is designed to be minimalist, clean and intuitive. I researched users of different ages and paid particular attention to accessibility
500
Screens



05
Design system
Color
Main Red
#FF1200
light Red
#FF1200
Dark Red
#FF1200
Main color
Grey
Grey 400
#ADB5BD
Grey 500
#6C757D
Grey 600
#495057
Grey 700
#343A40
Grey 800
#231F20
Grey 300
#CED4DA
Grey 200
#DEE2E6
Grey 100
#E9ECEF
Grey 50
#F5F8FB
Background
#F7F7F7
White
#FFFFFF
Highlight
Link
#1991FF
Success
#4FC62B
Warning
#FFB649
Error
#FF3A30
Typography
H 1
32 pt
H 2
28 pt
H 3
24 pt
H 4
20 pt
H 5
18 pt
Hight Body
16pt
Body
14 pt
Hight Note
13 pt
Note
12 pt
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9
. , ! ; : # ? < > ( ) [ ] = / + * @ $ % & “ ”
Font: Euclid Circular B
Icon
+
+

Text area
Default
Helper text
Text
0/500
Lable *
Helper text
Text
0/500
Lable *
Filled
Helper text
Filled
Lable *
0/500
Helper text
Filled
Lable *
0/500
Error
Error text
Text
Lable *
0/500
Error text
Text
Lable *
0/500
Helper text
Text
Lable *
0/500
Helper text
Text
Lable *
0/500
Focus
Check box
Default
Check box
Hover
Check box
Check box
Check box
Disable
Check box
Press
Check box
Check box
Radio button
Radio button
Default
Radio button
Hover
Radio button
Press
circle##
Radio button
Disable
Toggle
Default
On
Disable
Toggle
Toggle
Toggle
Toggle
Toggle
Toggle
No
Lable
Yes
Lable
No
Lable
Overflow menu
Default
Hover
Press
Disable
Option 1
Option 2
Option 3
Option 4
Option 5
Option 1
Option 2
Option 3
Option 4
Option 5
Multiselect
Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
Option 7
Option 1
Option 2
Option 3
Option 4
Option 1
Option 2
Option 3
Option 4
Default
Error
Focus
Filled
Disable
Text
Text
Option 1, Option 3, Option 3
Option 2
Option 1
Option 2
Text
Text
Error text
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Default
Hover
Focus
Press
Disable
See more
See more
Button
Toast
...
Scroll
Shadows
Blurs
Breadcrumbs
Pagination
Link


Let’s collaborate
Please use the web to view