.
F
I
R
S
T
P
L
A
C
E
F
I
R
S
T
P
L
A
C
E
.
The goal of the project was to develop an intuitive digital solution, focused on usability and accessibility, that streamlined the user journey, built trust, and delivered strategic value to the business
Company Overview
Operação Código de Ouro" is a LinkedIn initiative that helps Brazilian developers find remote jobs in international companies, earning in dollars. It focuses on optimizing their online presence, especially on LinkedIn, while providing training for interviews and strategic networking to prepare them for global opportunities.
Main Challenge
The main challenge was to create a solution that helps Brazilian developers stand out in the international market by optimizing their online presence and making them more competitive for remote positions in global companies.
Design Goal
The design goal was to create a clear, intuitive, and engaging interface that conveys credibility and simplifies the user journey, increasing both engagement and conversion.
UX/UI Design Responsibilities
Discovery and clarification of critical points to be resolved.
Created comprehensive wireframes for 4 key screens
Designed high-fidelity mockups with pixel-perfect precision
Built interactive prototypes for user testing
Established a scalable design system with components
Collaboration & Impact
Collaborated with 2 developers to align design with technical requirements.
Designed wireframes and high-fidelity prototypes to quickly validate ideas.
Structured visual hierarchy and user flows to ensure usability.
My impact was translating complex needs into a clear, functional interface,
enhancing the user experience.
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
Implemented clear typography scales, a consistent spacing system, and the strategic use of color to guide users through interactions.
Interaction Design
Redesigned navigation patterns, implemented intuitive gestures, and crafted smooth micro-interactions that provide clear feedback for every user action
Data Visualization
Transformed complex AI data into clean, readable visualizations using progressive disclosure and contextual information architecture to facilitate quick understanding and decision-making.
Primary colors
Y50
20.16 AAA
AAA
1.04
#fdfbea
rgb(253, 251, 234)
Y75
18.00 AAA
AAA
1.17
#f7f0aa
rgb(247, 240, 170)
Y100
16.92 AAA
AAA
1.24
#f3ea86
rgb(243, 234, 134)
Y200
15.53 AAA
AAA
1.35
#eee152
rgb(238, 225, 82)
Y300
14.71 AAA
AAA
1.43
#ebdb2f
rgb(235, 219, 47)
Y400
7.18 AAA
AAA
2.93
#a59921
rgb(165, 153, 33)
Y500
5.60 AAA
AA
3.75 AA
#8f861d
rgb(143, 134, 29)
Secondary colors
O50
18.90 AAA
AAA
1.11
#fdf1e6
rgb(253, 241, 230)
O75
13.22 AAA
AAA
1.59
#f5c496
rgb(245, 196, 150)
O100
10.78 AAA
AAA
1.95
#f1ab6b
rgb(241, 171, 107)
O200
8.00 AAA
AAA
2.63
#ea872b
rgb(234, 135, 43)
O300
6.64 AAA
AA
3.16 AA
#e66f00
rgb(230, 111, 0)
O400
3.61 AA
5.82 AAA
AA
#a14e00
rgb(161, 78, 0)
O500
2.94
7.14 AAA
AAA
#8c4400
rgb(140, 68, 0)
Neutral
B50
17.17 AAA
AAA
1.22
#e9e8e8
rgb(233, 232, 232)
B75
8.24 AAA
AAA
2.55
#a3a2a1
rgb(163, 162, 161)
B100
4.99 AAA
AA
4.21 AA
#7d7b7a
rgb(125, 123, 122)
B200
2.13
9.85 AAA
AAA
#454341
rgb(69, 67, 65)
B300
1.24
16.95 AAA
AAA
#1f1c1a
rgb(31, 28, 26)
B400
1.14
18.37 AAA
AAA
#161412
rgb(22, 20, 18)
B500
1.12
18.83 AAA
AAA
#131110
rgb(19, 17, 16)
Sansation
Aa
Nunito sans
Aa
Figma
AI