Redesigning a landing page
Redesigning a landing page
Redesigning a landing page
Looking to get more clients in the tech industry and highlight the benefits of working at Density Labs.
Looking to get more clients in the tech industry and highlight the benefits of working at Density Labs.
Looking to get more clients in the tech industry and highlight the benefits of working at Density Labs.
Role
Role
Product Designer at Density Labs
Product Designer at
Density Labs
Product Designer at
Density Labs
Duration
Duration
4 Weeks
4 Weeks
Tools
Figma
Jira
Design process
Research
Exploration
Wireframing
Mockups
Tools
Tools
Figma
Jira
Figma
Jira
Design process
Design process
Research
Exploration
Wireframing
Mockups
Research
Exploration
Wireframing
Mockups
Introduction
Introduction
Introduction
The task of this project was to redesign the main website of Density Labs, an IT staff augmentation company.
The project was part of an internship program to develop and refine UX and UI skills and practices.
The task of this project was to redesign the main website of Density Labs, an IT staff augmentation company.
The project was part of an internship program to develop and refine UX and UI skills and practices.
Research
Research
Research
The first task was to do some research. That meant reviewing the previous website’s design to understand its structure as well as analyzing other sites from competitors to review what they highlight more and their information architecture.
The first task was to do some research. That meant reviewing the previous website’s design to understand its structure as well as analyzing other sites from competitors to review what they highlight more and their information architecture.
Problems
Problems
Problems
After reviewing the website, the main issues that were identified were the following:
Readability in the hero section
Hierarchy isn't very present and it's confusing to scan
Highlight more the key aspects of the benefits that are offered
Add a section of the services that Density Labs offers
Improve readability in the process that Density Labs has to select candidates
After reviewing the website, the main issues that were identified were the following:
Readability in the hero section
Hierarchy isn't very present and it's confusing to scan
Highlight more the key aspects of the benefits that are offered
Add a section of the services that Density Labs offers
Improve readability in the process that Density Labs has to select candidates
Previous website
Previous website
Previous website
Competitors
Competitors
Competitors
Luxoft: Their website main focus is to show the different industries that they’ve worked with, how they work and the services they offer. They show the multiple services they’ve performed to target different industries and give insights on how the workflow is performed with different services.
Accenture: Their website main focus is to show news related to projects they’ve worked at and different industries that they’ve serviced. They give insights on multiple stories of areas impacted by the work of Accenture and target users to join the company of stay informed on how the company operates in different areas.
EPAM: Their website main focus is to show metrics of industries their work has impacted at, as well as insights of the company and their partners. They show the partners that work with the company to help fulfill their goals and give the readers the impacts the company has made and the growth that has happened in different areas.
Luxoft: Their website main focus is to show the different industries that they’ve worked with, how they work and the services they offer. They show the multiple services they’ve performed to target different industries and give insights on how the workflow is performed with different services.
Accenture: Their website main focus is to show news related to projects they’ve worked at and different industries that they’ve serviced. They give insights on multiple stories of areas impacted by the work of Accenture and target users to join the company of stay informed on how the company operates in different areas.
EPAM: Their website main focus is to show metrics of industries their work has impacted at, as well as insights of the company and their partners. They show the partners that work with the company to help fulfill their goals and give the readers the impacts the company has made and the growth that has happened in different areas.
Luxoft: Their website main focus is to show the different industries that they’ve worked with, how they work and the services they offer. They show the multiple services they’ve performed to target different industries and give insights on how the workflow is performed with different services.
Accenture: Their website main focus is to show news related to projects they’ve worked at and different industries that they’ve serviced. They give insights on multiple stories of areas impacted by the work of Accenture and target users to join the company of stay informed on how the company operates in different areas.
EPAM: Their website main focus is to show metrics of industries their work has impacted at, as well as insights of the company and their partners. They show the partners that work with the company to help fulfill their goals and give the readers the impacts the company has made and the growth that has happened in different areas.
Exploration
Exploration
Exploration
In this part of the process, I gathered content to add to the redesign. This content involved vectors, colors and the typography.
For the vectors I searched for icons and illustrations that were key for the company to highlight.
For the colors and typography, I used the brand guidelines that the company currently uses.
In this part of the process, I gathered content to add to the redesign. This content involved vectors, colors and the typography.
For the vectors I searched for icons and illustrations that were key for the company to highlight.
For the colors and typography, I used the brand guidelines that the company currently uses.
Vectors
Vectors
Vectors
Colors
Colors
Colors
Typography
Typography
Typography
User flow
User flow
User flow
Once reviewed, I started to create a user flow to understand how the user would navigate between the website and what would be included in each area.
Once reviewed, I started to create a user flow to understand how the user would navigate between the website and what would be included in each area.
Wireframes
Wireframes
Wireframes
Once I gathered all the necessary content, I started to review the previous design and analyzed what to highlight and how to structure it.
The main key areas I wanted to highlight on this redesign are:
Our company’s mascot and slogan
Who is Density Labs’ hiring
Giving more importance to the benefits of working with Density Labs
The services that Density Labs offers
A simple and easy way to understand how the recruitment process works
Once I gathered all the necessary content, I started to review the previous design and analyzed what to highlight and how to structure it.
The main key areas I wanted to highlight on this redesign are:
Our company’s mascot and slogan
Who is Density Labs’ hiring
Giving more importance to the benefits of working with Density Labs
The services that Density Labs offers
A simple and easy way to understand how the recruitment process works
Mockups - Main Page
Mockups - Main Page
Mockups - Main Page
After reviewing how the design would be structured, I started to add the official colors, typography, and vectors gathered to bring life to the redesign. I also tested this on a prototype in Figma and reviewed how it would work.
The following mockup is my redesigned version of the Density Labs’ website as well as extra pages around the main site.
After reviewing how the design would be structured, I started to add the official colors, typography, and vectors gathered to bring life to the redesign. I also tested this on a prototype in Figma and reviewed how it would work.
The following mockup is my redesigned version of the Density Labs’ website as well as extra pages around the main site.
Mockups - General Site
Mockups - General Site
Mockups - General Site
Mockups - Mobile
Mockups - Mobile
Mockups - Mobile
Conclusion
Conclusion
Conclusion
After working on this project, I understood the main process of redesigning a website as well as some key concepts in the UX/UI industry.
This project also helped me polish my design skills to develop more as a professional.
After working on this project, I understood the main process of redesigning a website as well as some key concepts in the UX/UI industry.
This project also helped me polish my design skills to develop more as a professional.
Other projects
Other projects
Other projects
View other projects that I've worked on during the years.
View other projects that I've worked on during the years.
View other projects that I've worked on during the years.
Configure Programmable Buttons in devices
Set your device to have different features depending on what you click.
Add notes while taking calls
Connect with our different CRM Integrations and take notes of conversations with your client.
Customizing navigation in menu
Set your menu navigation the way you prefer and have easier access to your favorite features.
