How to transform a static and unattractive website into a dynamic and intuitive experience that generates job opportunities and new business?
My personal website's main objective is to showcase my services and projects in UX/UI Design and Frontend Web Development. This case study focuses on the website redesign, aiming to improve the user experience and thus increase conversion opportunities, whether for job offers or attracting new clients.
During this project, I was responsible for various tasks covering everything from research to the complete development of the website:
Desk Research: Identifying problems in the current website.
User Research: Conducting interviews to understand user needs.
Personas: Creating personas based on interview insights.
Benchmarking: Analyzing competitors and best practices.
Information Architecture: Structuring navigation to enhance the experience.
Wireframes: Creating low, mid, and high-fidelity wireframes, exploring different solutions, and refining them based on feedback.
UI Kit: Defining a style guide, including typography, colors, and icons.
Prototype: Developing an interactive prototype for validation.
Usability Testing: Conducting tests with users to refine the experience.
Frontend Development: Translating designs into code, implementing interfaces and functionalities using HTML, CSS, JavaScript, and PHP, and ensuring an optimized experience across different devices.
Compatibility Testing: Running tests on multiple browsers and devices to ensure a consistent experience for all users.
SEO Optimization: Improving search engine indexing.
UX Writing: Producing clear and concise content. 
Figma
Notion
HTML5
CSS3
JavaScript
PHP
Visual Studio Code
The process was divided into five phases: Discovery, Strategy, Design, Testing, and Development.
My personal website functioned as an ineffective business card—few visits, low conversion rates, and an outdated design. It was time to turn it into a dynamic and attractive platform to attract job opportunities. But how?
To better understand the website's weaknesses, I conducted a detailed analysis, identifying best practices and opportunities for improvement. The old website had little content, responsiveness issues, and an unappealing design, negatively affecting user experience and conversion.
Based on this analysis, I identified two main audience profiles:
IT recruiters looking for qualified professionals in UX/UI Design and/or Frontend Web Development.
Potential clients needing a freelancer to develop their projects. Based on the target audience, I conducted four interviews with users fitting these characteristics: two recruiters and two potential clients. I gathered the following insights:
In the recruitment process, I'm interested in educational and professional backgrounds, as well as technical and behavioral skills. (...) But sometimes I can't find the ideal candidate. HR Professional
I'm struggling to find a freelancer with some experience and a good portfolio to develop my company's website. Entrepreneur
Recruiters wanted to quickly find skills and projects, while entrepreneurs sought a clear and straightforward portfolio. The old site didn’t cater to either profile, which guided my entire strategy.
In the strategy phase, I created two representative personas based on the interviews: one with an IT recruiter profile and another with an entrepreneur profile.
Profile: IT Recruiter
Profile: Entrepreneur
Next, I conducted benchmarking to understand how competitors' websites were structured. In this step, I analyzed marketing agency websites, freelancers, and UX/UI Designer and/or Frontend Web Developer portfolio pages.
Then, I created the site map, outlining the structure and key pages.
Site map
In the design phase, I started by creating low-fidelity wireframes to test initial ideas and navigation structure, followed by mid-fidelity wireframes.
Examples of mid-fidelity screens
Using the mid-fidelity wireframes, I conducted usability tests with four users to validate navigation and key functionalities. The following feedback was gathered:
3/4 users did not understand the purpose of the 'Learn More' button in the About section of the Homepage.
2/4 preferred seeing all portfolio projects on the Homepage instead of having a separate page accessible through a button in the Portfolio section.
2/4 found individual project pages too simple and unappealing.
3/4 felt there were too many geometric shapes on the website that did not add value to the content. The collected insights were crucial for refining the wireframes and validating improvements through new usability tests. After adjustments, I created a UI Kit and high-fidelity wireframes.
In the UI Kit, I carefully selected typography, font sizes, color contrast, and iconography to ensure the product was accessible to all users while maintaining a visually appealing design.
After creating high-fidelity wireframes, I developed an interactive prototype and conducted further usability tests with four users. No additional adjustments were needed.
With the validated high-fidelity prototype, I moved on to the website implementation. The design was translated into code using HTML, CSS, JavaScript, and PHP, without using a CMS. This approach allowed full control over design and performance, ensuring complete customization and resource optimization.
The absence of a CMS resulted in greater flexibility, enabling quick adjustments and a smoother, more efficient user experience. The clean and customized code also made maintenance and future website updates easier.
Next, I conducted tests on multiple devices and browsers to ensure compatibility, wrote the content, optimized for SEO, and launched the product.
The redesign resulted in a more appealing, dynamic, and well-structured website, helping IT recruiters and potential clients easily find my services and projects. Additionally, a bilingual system (PT and EN) was implemented, ensuring all content was available in both languages to reach a broader audience.
The main pages are:
Homepage: Overview with sections for Services, Technologies, Portfolio, and Contact.
About Page: Presentation of my professional journey.
Projects Page: Detailed case studies of each project. 
High-fidelity wireframes of the Homepage in desktop and mobile versions
The website redesign brought significant improvements to user experience and online visibility. Among the main achievements are:
The website attracted 30% more visitors after the redesign, proving the effectiveness of the improvements implemented.
International reach increased significantly, bringing new visitors from the United States and Europe, expanding networking and business opportunities.
Increase in the number of leads, both from IT recruiters and potential clients interested in my services.
I received more direct contacts from recruiters and entrepreneurs looking for a freelancer for their projects.
The website achieved better positioning on Google, appearing in relevant searches for UX/UI Design and Frontend Web Development.
The redesign of my website was not just an aesthetic change but a strategic transformation. Increased traffic, better Google ranking, and more direct contacts demonstrate the real impact of the improvements made. More than just a portfolio, the website has become an essential asset for advancing my career and securing new opportunities.
