role
UI/UX Designer
Timeline
2021-2022
Skills
Visual design
Product thinking
Tools
Figma
The Struggle
RFG Advisory was born from the challenges financial advisors face in a traditional industry.
The Goal
To design a user-centric platform for RFG Advisory advisors that enables seamless monitoring of key metrics, such as Assets Under Management, Total Revenue, Top Clients, and Upcoming Events, while fostering professional growth through the RFG Masterclass.
This ensures advisors have the tools and resources to excel in their roles effectively.
Role
Warren Labuan independently managed all aspects of the project, including ideation, wireframing, and creating the final UI/UX designs. Collaboration with the client ensured that the outcomes aligned with their vision and objectives, producing a user-focused and impactful design.
Client
Me
Phase 1
Information Architecture
The platform organizes essential tools for advisors, including sections for tracking Assets Under Management, Total Revenue, Top Clients, and Events. It also integrates the RFG Masterclass, providing accessible financial learning resources within a clear and efficient structure.
Legend
Pages
Phase 2- Design System
Colors
Primary
25
#FFF7F7
50
#FFE0E0
100
#FFC2C2
200
#FC9C9C
300
#FA7979
400
#F64B4B
BASE
500
#F10909
600
#C50303
700
#940505
800
#630505
900
#400303
Base
White
#FFFFFF
Black
#000000
Gray
#FCFCFD
Neutral
25
#F7F7F7
50
#EAEAEA
100
#E6E6E6
200
#D9D9D9
300
#BDBDBD
400
#989898
BASE
500
#676767
600
#4E4E4E
700
#373737
800
#222222
900
#141414
Positive
25
#F6FEF9
50
#ECFDF3
100
#D1FADF
200
#A6F4C5
300
#6CE9A6
400
#32D583
BASE
500
#12B76A
600
#039855
700
#027A48
800
#05603A
900
#054F31
Negative
25
#FFFBFA
50
#FEF3F2
100
#FEE4E2
200
#FECDCA
300
#FDA29B
400
#F97066
BASE
500
#F04438
600
#D92D20
700
#B42318
800
#912018
900
#7A271A
Warning
25
#FFFCF5
50
#FFFAEB
100
#FEF0C7
200
#FEDF89
300
#FEC84B
400
#FDB022
BASE
500
#F79009
600
#DC6803
700
#B54708
800
#93370D
900
#7A2E0E
Phase 2- Design System
Typography
Base Value: 16
Scale: 1.125
Headline / md
32px
2.00rem
The quick brown fox jumps over the lazy dog
Headline / sm
29px
1.813rem
The quick brown fox jumps over the lazy dog
Title / lg
26px
1.625rem
The quick brown fox jumps over the lazy dog
Title / md
23px
1.438rem
The quick brown fox jumps over the lazy dog
Title / sm
20px
1.25rem
The quick brown fox jumps over the lazy dog
Label / xl
23px
1.438rem
The quick brown fox jumps over the lazy dog
Label / lg
20px
1.25rem
The quick brown fox jumps over the lazy dog
Label / md
18px
1.125rem
The quick brown fox jumps over the lazy dog
Label / sm
16px
1.00rem
The quick brown fox jumps over the lazy dog
Label / xs
14px
0.875rem
The quick brown fox jumps over the lazy dog
Body / lg
20px
1.25rem
The quick brown fox jumps over the lazy dog
Body / md
18px
1.125rem
The quick brown fox jumps over the lazy dog
Body / sm
16px
1.00rem
The quick brown fox jumps over the lazy dog
Body / xs
14px
0.875rem
The quick brown fox jumps over the lazy dog
Caption / xs
12px
0.75rem
The quick brown fox jumps over the lazy dog
Overline
16px
1.00rem
The quick brown fox jumps over the lazy dog
Phase 2- Design System
Iconography
Phase 2- Design System
Components
Dropdowns
Input Fiields
Modals
Base Buttons
Avatar Group
Base Badges
Phase 2
Explore More Projects
