The goal of the project was to design a clear and efficient dashboard solution to monitor insurance proposals, sales, and commissions, supporting both internal teams and external partners with role-based experiences and real-time data visibility.
Company Overview
Okusfin is a financial services platform focused on insurance operations, connecting internal sales teams and external partners through a centralized system that supports performance tracking, transparency, and scalability.
Main Challenge
Create a single solution capable of serving different user profiles — internal teams and external partners — while maintaining clarity, data accuracy, and easy access to key performance metrics such as proposals, sales, and commissions.
Design Goal
Design an intuitive, performance-driven dashboard with distinct boards per user role, ensuring fast comprehension, trust in data, and seamless decision-making across the insurance sales operation.
UX/UI Design Responsibilities
Mapped critical metrics for proposals, sales, and commissions
Created wireframes for key dashboard views and flows
Designed high-fidelity interfaces focused on clarity and hierarchy
Collaboration & Impact
Translated complex insurance data into clear, actionable visualizations
Designed role-based experiences to reduce cognitive load and errors
Improved visibility and transparency across the sales and commission flow
Desk Research
Exploratory Desk Research to understand the market, users, and existing solutions.
Visual Research
Analyzed competitor interfaces, design trends, and user behavior patterns
Wireframing
Analyzed competitor interfaces, design trends, and user behavior patterns
Component Creation
Built a comprehensive design system with reusable UI components
Prototyping
Created interactive prototypes to validate design decisions
Visual Hierarchy
Defined clear typography scales, spacing, and color usage to highlight critical KPIs and guide users through complex insurance data.
Interaction Design
Designed intuitive navigation and micro-interactions to support fast scanning, filtering, and exploration of sales and commission data.
Data Visualization
Translated complex insurance metrics into clear, readable charts and tables, enabling quick insights and confident decision-making.
Primary colors
Light
18.49 AAA
AAA
1.14
#e9f1ff
rgb(233, 241, 255)
Light :hover
17.32 AAA
AAA
1.21
#deeaff
rgb(222, 234, 255)
Light :active
14.05 AAA
AAA
1.49
#bad5ff
rgb(186, 213, 255)
Normal
5.10 AAA
AA
4.12 AA
#2176ff
rgb(33, 118, 255)
Normal :hover
4.26 AA
4.93 AAA
AA
#1e6ae6
rgb(30, 106, 230)
Normal :active
3.52 AA
5.97 AAA
AA
#1a5ecc
rgb(26, 94, 204)
Dark
3.22 AA
6.52 AAA
AA
#1959bf
rgb(25, 89, 191)
Dark :hover
2.39
8.78 AAA
AAA
#144799
rgb(20, 71, 153)
Dark :active
1.78
11.82 AAA
AAA
#0f3573
rgb(15, 53, 115)
Darker
1.48
14.22 AAA
AAA
#0c2959
rgb(12, 41, 89)
Secondary colors
Light
19.72 AAA
AAA
1.06
#ecfbf8
rgb(236, 251, 248)
Light :hover
19.12 AAA
AAA
1.10
#e3f9f4
Light :active
17.37 AAA
AAA
1.21
#c5f3e9
rgb(197, 243, 233)
Normal
11.86 AAA
AAA
1.77
#43d9b8
rgb(67, 217, 184)
Normal :hover
9.55 AAA
AAA
2.20
#3cc3a6
rgb(60, 195, 166)
Normal :active
7.63 AAA
AAA
2.75
#36ae93
rgb(54, 174, 147)
Dark
6.74 AAA
AA
3.12 AA
#32a38a
rgb(50, 163, 138)
Dark :hover
4.51 AAA
AA
4.66 AAA
AA
#28826e
rgb(40, 130, 110)
Dark :active
2.93
7.17 AAA
AAA
#1e6253
rgb(30, 98, 83)
Darker
2.14
9.79 AAA
AAA
#174c40
rgb(23, 76, 64)
Tertiary colors
Light
20.19 AAA
AAA
1.04
#fffbe6
rgb(255, 251, 230)
Light :hover
19.80 AAA
AAA
1.06
#fff9d9
rgb(255, 249, 217)
Light :active
18.58 AAA
AAA
1.13
#fff2b0
rgb(255, 242, 176)
Normal
14.87 AAA
AAA
1.41
#ffd600
rgb(255, 214, 0)
Normal :hover
11.99 AAA
AAA
1.75
#e6c100
rgb(230, 193, 0)
Normal :active
9.39 AAA
AAA
2.24
#ccab00
rgb(204, 171, 0)
Dark
8.31 AAA
AAA
2.53
#bfa100
rgb(191, 161, 0)
Dark :hover
5.44 AAA
AA
3.86 AA
#998000
rgb(153, 128, 0)
Dark :active
3.40 AA
6.17 AAA
AA
#736000
rgb(115, 96, 0)
Darker
2.43
8.64 AAA
AAA
#594b00
rgb(89, 75, 0)
Afacad
Aa
Quicksand
Aa
Figma
AI