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

Email

chungnt2612@gmail.com

Please use the web to view