• en
  • pt
  • Jhone Dias

    UX | UI Designer & Front-end Developer

    I’m a Front-end Developer and UI/UX Designer, holding a degree in Design with a focus on digital media from PUC-RJ and a postgraduate degree in Interaction Design. With nearly 10 years of experience, I have extensive knowledge in web design and development technologies.

    Bachelor in Design with specialization in Digital Media from PUC-Rio and MBA in Interaction Design.

    Download Resume

    Previous experience sectors

    Real Estate

    2 years and 5 months

    Development of sales and lead capture hotsites

    Front-end design and development of CRM customer management system

    Front-end design and development of instant messaging system

    Education

    1 year

    Development of sales and lead capture hotsites

    Websites Development for various sectors of the educational group

    Design of institutional graphic materials

    Banking

    1 year and 9 months

    Project and development of the company's intranet

    Design and development of the institutional website

    Deisgn of graphic materials for internal campaigns

    Legal

    3 years, 6 months, and counting

    Front-end design and development of systems

    Creation of hotsites for the presentation of legal defenses

    Maintenance and creation of the office's websites

    Automation of process notifications by email

    Projects

    Contract Request Website

    May 24

    Landing Pages

    Contract Request Website

    Crafting a Law Firm Website with Webflow

    Feb 24

    Web Sites

    Crafting a Law Firm Website with Webflow

    Videos App

    Jul 23

    Web Apps

    Videos App

    Laws App

    Feb 23

    Web Apps

    Laws App

    Landing Pages Plataform

    Nov 22

    Landing Pages

    Landing Pages Plataform

    Dashboard Business Inteligence

    Nov 21

    Web Apps

    Dashboard Business Inteligence

    Websites and Landing Pages for legal disputes

    Jan 21

    Landing Pages

    Websites and Landing Pages for legal disputes

    Unigranrio Postgraduate Website

    Nov 17

    Web Sites

    Unigranrio Postgraduate Website

    Instant Messaging System for Brokers and Clients

    Nov 16

    Web Apps

    Instant Messaging System for Brokers and Clients

    Property Management System

    Feb 16

    Web Apps

    Property Management System

    Web Site Patrimóvel Real State

    Dec 15

    Web Sites

    Web Site Patrimóvel Real State

    Campaign for Information Security Awareness

    Sep 19

    Campaign for Information Security Awareness

    Email CDB Modalmais

    May 19

    Email CDB Modalmais

    Easter Campaign Communication – Modal S/A

    Apr 19

    Easter Campaign Communication – Modal S/A

    Promotional Material for the YOU Botafogo Development

    Jan 16

    Promotional Material for the YOU Botafogo Development

    Education

    2009-2014

    logo PUC-Rio

    Bachelor's Degree in Digital Design and Multimedia

    Pontifícia Universidade Católica do Rio de Janeiro

    Activities and groups: Project development, case studies, creation, and solutions in digital environments.

    Undergraduate program with a focus on designing solutions to solve problems. Graduates are well-prepared to work on complex projects that require creative ability and objectivity.

    certificado puc-rj

    2018-2019

    logo PUC-Rio

    Master of Business Administration - MBA, Interaction Design

    XP Educação

    Activities and groups: UX Design, UI Design, Design Thinking, Interface Design, Consumer Behavior.

    Specializing in industry practices in the research, design, prototyping, and evaluation of interactive interfaces, aiming to enhance the user experience for the commercial success of software.

    certificado XPE

    Supplementary courses & certifications

    Webflow Partner Certification

    Webflow

    May. 2024

    certificado webflow partner
    Webflow CMS Certification

    Webflown

    May. 2024

    certificado webflow cms
    Webflow Layouts 2 Certification

    Webflow Layouts 2 Certification

    May. 2024

    certificado webflow layouts 2
    Webflow Layouts 1 Certification

    Webflow Layouts 1 Certification

    May. 2024

    certificado webflow layouts 1
    UX and Usability for Web and Mobile

    Caelum

    Nov. 2019

    40h

    certificado puc-rj
    LESS: Simple and Productive CSS

    Alura

    Jul. 2017

    6h

    JQuery I: Introduction to the JavaScript Champion Library

    Alura

    Sep. 2018

    10h

    JQuery: Dynamic Content Manipulation

    Alura

    Sep. 2018

    12h

    Work History

    2020 . Current

    Licks Attorneys

    UI Designer | Front-end Dev

    Interface design and front-end development of websites and systems. Automation design with Microsoft Automate and portal creation with Power Pages + Office 365.

    2018 . 2020

    Modal Bank

    Web Designer | Front-end Dev

    Interface design and front-end programming for internal websites and systems. Design of graphic materials for web publication.

    2017 . 2018

    Unigranrio University

    Web Designer | Front-end Dev

    Development and maintenance of websites. Defining navigation flows and hierarchy, creating low and highfidelity prototypes, interface design and front-end development. Creating marketing emails, banners, and other web advertising assets.

    2015 . 2017

    Patrimóvel Real Estate

    UI Designer | Front-end Dev

    Graphic interface design projects and front-end development for the company's real estate systems and websites. Designing hotsites and landing pages for promoting real estate projects and customer acquisition.

    2014

    Pixfólio

    Front-end development intern

    Front-end development of websites using HTML, CSS, and JQuery.

    Skills

    Front-end

    JavaScript

    95%

    JQuery

    95%

    Angular JS

    70%

    VUE JS

    65%

    HTML

    100%

    CSS

    100%

    Wordpress | PHP

    90%

    Webflow

    95%

    Wized

    90%

    Xano

    65%

    Design

    Figma

    90%

    Photoshop

    75%

    Illustrator

    70%

    Adobe XD

    75%

    General knowledge

    Javascript Libraries

    Usability

    Design Paterns

    Information Architecture

    Scrum

    Microsoft Power Automate

    Microsoft Power Pages

    Prototyping

    User Testing

    JSON

    MYSQL

    CSS Pre-processors

    Web Site Patrimóvel Real State

    capa app de vídeos

    Description

    Patrimóvel Real State

    The website development project for Patrimóvel was an exciting opportunity to merge my web design skills with the company’s need to provide an intuitive online platform for clients searching for real estate. Patrimóvel is a renowned player in the real estate market, and the website we created aimed to make property search, analysis, and contacting the company for buying or renting properties a breeze.

    The Patrimóvel website was designed to offer users a more efficient and personalized property search experience. We implemented an advanced filtering system that allows clients to refine their searches based on criteria such as location, property type, and more. Additionally, we created a user-friendly and intuitive interface for easy property viewing and access to detailed information.

    Key Features:

    • Advanced filtering system for precise searching.
    • Show results in a map using Google Maps API.
    • Detailed property listings with high-quality photos.
    • Integrated contact form for easy communication with the company.
    • Responsive design for a seamless experience on mobile devices.

    Web Site Patrimóvel Real State

    Introduction

    Patrimóvel Real State The website development project for Patrimóvel was an exciting opportunity to merge my web design skills with the company’s need to provide an intuitive online platform for clients searching for real estate. Patrimóvel is a renowned player in the real estate market, and the website we created aimed to make property search, […]

    05/12/2015

    Technologies used

    CSS

    HTML

    Javascript

    JQuery

    Promotional Material for the YOU Botafogo Development

    capa app de vídeos

    Description

    While working at the real estate agency Patrimóvel, I created the following material for digital media promotion regarding the sale of a property listed by the agency. The material aimed to attract potential buyers to learn more about the property by clicking on the ad, directing them to the company’s website.

    Promotional Material for the YOU Botafogo Development

    Introduction

    While working at the real estate agency Patrimóvel, I created the following material for digital media promotion regarding the sale of a property listed by the agency. The material aimed to attract potential buyers to learn more about the property by clicking on the ad, directing them to the company’s website.

    16/01/2016

    Technologies used

    Adobe Illustrator

    Adobe Photoshop

    Property Management System

    capa app de vídeos

    Description

    To keep company informations security, i used only two screens in this portfolio.

    Property Management System

    Introduction

    To keep company informations security, i used only two screens in this portfolio.

    09/02/2016

    Technologies used

    CSS

    HTML

    Javascript

    JQuery

    Instant Messaging System for Brokers and Clients

    capa app de vídeos

    Description

    In 2016, we developed a system that enabled instant communication between brokers and clients, significantly enhancing the user experience by allowing them to resolve doubts and questions directly with experts. The primary goal of this project was to provide a fast and effective means of interaction between brokers and clients seeking information.

    The chat system we built facilitated a seamless integration between the company’s website and the messaging tool, resulting in more accurate sales metrics and more efficient control of client distribution and management internally.

    Instant Messaging System for Brokers and Clients

    Introduction

    System enabling instant communication between brokers and clients, enhancing the user experience by directly addressing inquiries. The project’s main aim was to provide efficient interaction for clients seeking information, achieved through seamless website-chat integration, yielding more accurate sales metrics and improved client management.

    08/11/2016

    Technologies used

    CSS

    HTML

    Javascript

    JQuery

    Unigranrio Postgraduate Website

    capa app de vídeos

    Description

    As a UI Designer and Front-End Developer, I had the privilege to lead the development of a website for the postgraduate courses at the renowned educational institution, Unigranrio. From the initial conception stages to the final delivery, I was deeply involved in every step of the project.

    My journey began with crafting design ideas, meticulously working on prototypes that captured the essence and specific requirements of Unigranrio. During this phase, I focused on ensuring an intuitive and engaging user experience, aligned with the institution’s visual identity.

    Upon prototype approval, I delved into website development, utilizing my skills in HTML, CSS, and JavaScript to turn concepts into digital reality. Each element was carefully coded to ensure seamless functionality and compatibility across different devices and browsers.

    One aspects of the project was integrating with an API to provide up-to-date information about Unigranrio’s postgraduate courses. Through diligent work, I implemented this functionality, ensuring that website visitors had quick and accurate access to relevant information.

    This project provided me valuable experience in collaboration and problem-solving.

    Unigranrio Postgraduate Website

    Introduction

    As a UI Designer and Front-End Developer, I had the privilege to lead the development of a website for the postgraduate courses at the renowned educational institution, Unigranrio. From the initial conception stages to the final delivery, I was deeply involved in every step of the project. My journey began with crafting design ideas, meticulously […]

    08/11/2017

    Technologies used

    CSS

    HTML

    Javascript

    Easter Campaign Communication – Modal S/A

    capa app de vídeos

    Description

    Our proposal aims to engage Modal S/A bank employees in the noble cause of Easter through a donation campaign. We have crafted visually captivating material, designed to convey the message clearly and effectively. Every element has been carefully chosen to ensure the campaign’s message is easily understood, encouraging participation and solidarity.

    Easter Campaign Communication – Modal S/A

    Introduction

    Our proposal aims to engage Modal S/A bank employees in the noble cause of Easter through a donation campaign. We have crafted visually captivating material, designed to convey the message clearly and effectively. Every element has been carefully chosen to ensure the campaign’s message is easily understood, encouraging participation and solidarity.

    16/04/2019

    Technologies used

    Adobe Illustrator

    Adobe Photoshop

    Email CDB Modalmais

    capa app de vídeos

    Description

    This project involved creating a visually engaging email marketing layout targeted towards the internal staff of the company. The aim was to promote a new banking product exclusive to employees, emphasizing convenience, competitive rates, and personalized support. The design focused on clear communication of key features while maintaining brand identity and professionalism.

    Email CDB Modalmais

    Introduction

    This project involved creating a visually engaging email marketing layout targeted towards the internal staff of the company. The aim was to promote a new banking product exclusive to employees, emphasizing convenience, competitive rates, and personalized support. The design focused on clear communication of key features while maintaining brand identity and professionalism.

    09/05/2019

    Technologies used

    Adobe Illustrator

    Campaign for Information Security Awareness

    capa app de vídeos

    Description

    In this project, I developed an email campaign aimed at promoting awareness about information security. The campaign was designed to engage recipients and educate them on the importance of safeguarding sensitive data and maintaining secure digital practices. Through compelling visuals and concise messaging, the emails conveyed key concepts such as password management, phishing awareness, and the significance of software updates. By incorporating interactive elements and clear calls-to-action, the campaign encouraged recipients to actively participate in enhancing their own cybersecurity posture.

    Information Security campain

    Campaign for Information Security Awareness

    Introduction

    In this project, I developed an email campaign aimed at promoting awareness about information security. The campaign was designed to engage recipients and educate them on the importance of safeguarding sensitive data and maintaining secure digital practices. Through compelling visuals and concise messaging, the emails conveyed key concepts such as password management, phishing awareness, and […]

    11/09/2019

    Technologies used

    Adobe Illustrator

    Adobe Photoshop

    Websites and Landing Pages for legal disputes

    capa app de vídeos

    Description

    We develop websites and landing pages in Webflow with the purpose of presenting our clients’ legal defense in an organized and strategic manner. Due to the sensitive nature of the information involved, these pages are password-protected to ensure the privacy and security of the content. At the time of publishing this portfolio, we had already launched more than 50 of these sites, each meticulously designed to support our clients’ legal cases. Below, you will find a selection of images illustrating some of these case pages.

    Websites and Landing Pages for legal disputes

    Introduction

    We develop websites and landing pages in Webflow with the purpose of presenting our clients’ legal defense in an organized and strategic manner. Due to the sensitive nature of the information involved, these pages are password-protected to ensure the privacy and security of the content. At the time of publishing this portfolio, we had already […]

    29/01/2021

    Technologies used

    CSS

    HTML

    Webflow

    Dashboard Business Inteligence

    capa app de vídeos

    Description

    In this project, I had the privilege to be part of an exciting job that combined the creation of intuitive user interfaces with modern technologies. The challenge was clear: to create customized informative dashboards for clients, each with secure access to their own control panel, where they could monitor and analyze essential data related to their patent orders.

    Goal and Challenges

    The goal of this project was to provide clients with a unique and information-rich experience, enabling them to quickly access and understand the status of their patent orders and other relevant information. Additionally, we aimed to enhance efficiency and transparency in managing these processes. The challenges were diverse, including:

    1. Customization: Creating a personalized interface for each client, reflecting their specific needs and preferences.
    2. Security: Ensuring that data was accessed securely and restricted only to authorized clients.
    3. User-Friendliness: Designing an intuitive and user-friendly interface so that even clients unfamiliar with technology could easily use the system.

    Solution

    To address these challenges, we chose to use modern technologies that provided flexibility and efficiency.

    • HTML and CSS: We used HTML and CSS to create visually appealing and responsive user interfaces. The combination of well-structured HTML with refined CSS styling resulted in clean and elegant designs that met the clients’ expectations.
    • Vue.js: With the ability to update data in real-time and provide a responsive user experience, Vue.js allowed clients to explore critical information in an agile and effective manner.
    • Power BI: This tool was utilized by the team to create dashboards and process data for report generation.

    Project Screens:

    NOTE: As this is a project with ultra-sensitive information, the screens are blurred to protect client confidentiality.

    Dashboard Business Inteligence

    Introduction

    In this project, I had the privilege to be part of an exciting job that combined the creation of intuitive user interfaces with modern technologies. The challenge was clear: to create customized informative dashboards for clients, each with secure access to their own control panel, where they could monitor and analyze essential data related to […]

    27/11/2021

    Technologies used

    CSS

    HTML

    Javascript

    VUE JS

    Landing Pages Plataform

    capa app de vídeos

    Description

    In this comprehensive project, developed within the Microsoft 365 environment, our main goal was to create a dedicated space for the construction of highly customized pages, accessible exclusively to registered clients and stakeholders who use login credentials. Additionally, all company employees were able to log in with their Single Sign-On (SSO) credentials. The focus on the user experience is evident in the user-friendly interface, making navigation intuitive and efficient.

    A notable aspect of this project was the incorporation of the Liquid language, which was essential for customizing pages and creating highly relevant experiences for each client. Learning and implementing this new language was a challenge due to the limited time available.

    In summary, this project exemplifies my ability to combine UX design principles with technical front-end development skills, while also showcasing my capacity for rapid learning.

    Here’s an example of a page developed on the platform. At the time of creating this portfolio, the platform had 14 hotsites developed.

    NOTE: As these pages contain confidential information, the data has been blurred to ensure the confidentiality of certain details. Since the majority of the pages consist of 100% confidential information, it is not possible to provide a wide range of examples.

    Projeto Hotsites - exemplo

    Landing Pages Plataform

    Introduction

    In this comprehensive project, developed within the Microsoft 365 environment, our main goal was to create a dedicated space for the construction of highly customized pages, accessible exclusively to registered clients and stakeholders who use login credentials. Additionally, all company employees were able to log in with their Single Sign-On (SSO) credentials. The focus on […]

    29/11/2022

    Technologies used

    CSS

    HTML

    Javascript

    JQuery

    Liquid

    Laws App

    capa app de vídeos

    Description

    This project stood out for its agile and efficient approach, driven by the need for a quick delivery.

    With an accelerated timeline, we opted for a lean research phase that allowed us to act swiftly, gaining valuable insights.

    Instead of traditionally going through the stages of low and high-fidelity prototyping, we went directly to the beta version of the application. This approach allowed us to test, iterate, and refine the user experience in a real environment from the outset, saving time and ensuring the application was quickly available to our users.

    At the time of creating this portfolio, the application was in production in version 1.0.

    Laws App

    Introduction

    Elaborado dentro da organização da Licks Attorneys, este projeto foi concebido com o propósito de satisfazer uma necessidade interna de consolidar e centralizar as diversas leis que desempenham um papel essencial no cotidiano da empresa e de seus advogados.

    22/02/2023

    Technologies used

    CSS

    HTML

    JQuery

    Videos App

    capa app de vídeos

    Description

    Research and Discovery Stage

    We started the project by conducting research to understand user needs and pain points. This stage was crucial in gaining valuable insights that shaped the course of the project. We conducted interviews and competitor analysis to gain a comprehensive understanding of user demands.

    User-Centered Design

    Based on the feedback collected in the research stage, we initiated user-centered design. I created wireframes and high-fidelity prototypes to iterate quickly on solutions, considering the user experience at every stage and incorporating modern and effective design elements, ensuring a user-friendly and pleasant interface.

    Validation and Continuous Feedback

    Once we had the high-fidelity prototypes in hand, we conducted usability tests with actual users to ensure that the application met their expectations. Iterations based on continuous feedback were essential to refine the interface and improve usability

    Beta Version Developmment

    After the validation of the prototypes, the development team sprang into action to create the beta version of the application. As a front-end developer, I was responsible for translating the design into functional code. I utilized modern technologies and best practices to ensure solid performance and a consistent user experience.

    New Tests in Beta Version

    With the Beta version in production, we initiated a new round of usability testing. We identified the need to make essential modifications to further simplify the application and significantly enhance search filters. This was made possible through production testing, which provided us with valuable insights and a deeper understanding of the actual user demands. Based on these results, we implemented improvements to ensure that the application provided an even more efficient and intuitive experience.

    Final Results

    At the time of creating this portfolio, the application was in production in version 1.0.

    Videos App

    Introduction

    Desenvolvido na empresa Licks Attorneys, este projeto teve como objetivo atender uma demanda interna de organização e controle dos vídeos produzidos, pois ja eram muitos e estavam em constante crescimento, tornando complicado tanto para quem gerenciava quanto para os demais funcionários que utilizavam os vídeos.

    10/07/2023

    Technologies used

    Angular JS

    CSS

    HTML

    Javascript

    Crafting a Law Firm Website with Webflow

    capa app de vídeos

    Description

    lickslegal.com

    Design

    In the design process, I prioritized creating a sober and professional interface, aligned with the image of a law firm that values technology while maintaining a sense of seriousness. The layout was conceived to provide an intuitive and efficient browsing experience, reflecting the firm’s commitment to offering high-quality legal services in an accessible and modern manner.

    Development:

    The development part was where I could truly bring the design to life. I used Webflow’s powerful visual development environment to translate the layouts and design elements into functional code. To achieve the project’s objectives, I needed to utilize integrations with external tools, such as Zapier, to manage the flows and automations of contact forms, and Finsweet libraries to create filters and enhance other platform functionalities.

    Conclusion:

    This project was an exciting opportunity to combine my passion for design with my technical skills in web development. The end result is a website that not only meets the client’s needs but also elevates their online presence to a new level.

    Crafting a Law Firm Website with Webflow

    Introduction

    Website developed entirely in Webflow. This project represents the fusion of design and development, where I was able to exercise my creativity and technical skills to create a engaging digital experience.

    25/02/2024

    Technologies used

    CSS

    HTML

    JQuery

    Webflow

    Contract Request Website

    capa app de vídeos

    Description

    At Licks Attorneys’ office, I was tasked with developing a platform for clients to request contracts from the firm. This platform needed to be designed in a way that it could be easily replicated for other clients. To ensure efficient request handling, contracts needed to be sent via email to specific recipients, with confirmation emails sent back to the requester.

    Considering the entire company website structure was hosted on Webflow, it was a requirement that this new page also be developed on the same platform. Given the various types of contracts, each with specific fields, I chose to enhance Webflow’s functionalities by integrating Zapier, a tool for process automation, to manage email notifications.

    To understand the requirements and provide the best user experience, I initiated a research process involving all stakeholders. Based on these discussions, I drafted some wireframes for discussion with users to gather feedback. Below are two examples illustrating this stage.

    Following the review of all screens and several rounds of user testing, I finalized the product, which is currently in production. Below, I present a gallery of images representing the project.

    On desktop screen

    On mobile screen

    Contract Request Website

    Introduction

    At Licks Attorneys’ office, I was tasked with developing a platform for clients to request contracts from the firm. This platform needed to be designed in a way that it could be easily replicated for other clients. To ensure efficient request handling, contracts needed to be sent via email to specific recipients, with confirmation emails […]

    19/05/2024

    Technologies used

    CSS

    HTML

    Javascript

    JQuery

    Webflow