Project Overview
A Dubai-based company wanted the landing page of their website to be unique and clean. They wanted a bright and positive theme that perfectly fits into the description of what the company does - jumpstarting careers of people from around the world.
The Wireframe
While wide meaningful banner images in the hero section add weight to the heading, I decided to put the heading at the center and test out how I can still convey the same positivity through it. However, it would have made sense to put the symbol of Dubai in the hero section - the Burj Khalifa. So I left out a very narrow amount of space for it in the background of the heading.
Sorting It Out With Card Sorting
There was some confusion with the people from the company about deciding the order of the sections on the landing page (excluding the hero section obviously) and so I did a quick card sorting session with them. These were 5 people and we came to the following order:
1. Basic plan detail section
2. Choose your journey section
3. Our process section
4. Reviews section
5. Company's team section
6. Featured Jobs section
7. FAQ section
Structuring
This page was going to have a lot of content and cards to show, and I wanted to create a dichotomy between its sections.
I had added a grid to the Jobs for everybody in Dubai section, a horizontally moving grid to the review section, and a slider to the featured jobs section.
To avoid making the page appear too empty because of the negative space, I decided to use typography and gradient shapes (which aren't there in the wireframe for an obvious reason). But even in the wireframe, you can notice how the large background typography adds life to the package details section. My idea was to make it responsive by using the VW (viewport width) unit for it.
Following the idea that every section should look different, I decided to add icons to the package details section and numbering to the Our Process section (which also makes sense). The FAQ is popularly an accordion section, just like it is here, and I did choose to add a background to the footer.
Building Our Burj Khalifa
The idea of moving abroad and living a better life is a distant dream for many across the world.
When you are on a journey, structures that are extremely distant appear on the horizon, gray and blurry. But you are moving towards them - towards hope. That's my idea behind not using an actual image of the Burj Khalifa in the hero section's background.
Design System
I took inspiration for this project from Google's material.io, Instagram, and the Clubhouse mobile application.
The buttons have text in all caps, dropdowns have the menu (with its box-shadow) starting right from its bottom border's edge, and all inputs have states to help the user. This is based on Google's material.io.
I chose to give a gradient background to all the buttons following the theme that the website would be having gradient shapes everywhere in it.
The client wanted our form's toggle button to look like the ones in the Clubhouse app. But those were gray and the icons were not impressive. To match with our theme, I made my secondary color its active state. I also choose more colorful icons instead.
Desktop Landing Page
Responsive Mobile Version
Form Design