I decided to create a webpage for Dubai because it is a global city and the business hub for the Middle East. With its ultramodern architecture, spectacular skylines, and rich heritage, it mixes modern culture with history. There is something to do for everyone.
I worked as a UI designer tasked with designing the website from the ground up. This started with UI research, competitive analysis and strategy followed by interaction wireframes and prototypes and creating the user interface design, and visual branding.
- Visual UI Design
- Creative Direction
- Brand Strategy & Positioning
The design process that was followed to find the right opportunity and design the best user experience for Dubai and showcase it in an authentic way.
Design inception sheet
I started the design process by conducting research online by looking at other websites that showcase cities to get a better understanding of the UI. I create a design inception sheet to capsulate my findings.
As I started to do research, I came up with two prominent mood boards for Dubai city. There was the ultramodern Dubai with all of the luxuries the world has to offer and then there was the authentic, more traditional side of Dubai. The modern Dubai shows the city’s skyline with all the skyscrapers, malls, and beautiful shoreline. The traditional Dubai shows the old souk markets, old mosques, and boat ride at Bur Dubai Abra Dock. After exploring both options, I decided to go with the traditional Dubai because it shows the true culture of the city and allows the visitors to explore the city in an authentic way.
Inspired by the mood boards, I created the style guide with authentic Dubai in mind. I decided to go with a minimalist look with simple lines for icons.
I chose warm colors in brown and orange shades to represent the desert and overall look and feel of the traditional streets of Dubai.
After conducting some research I decided on the Dubai Font since Dubai is the only city in the world with its own official font. I decided to use Open Sans for the body text because it nicely complemented the Dubai Font in its look and feel. It’s also easy to read for a better user experience.
I explored a few options for the website logo. I wanted to keep the Arabic look but still be able to read it in English. I wanted to include the dots to get the feeling of Arabic writing. Although all three options met that criteria I decided to go with the first logo because of it’s clean minimalist look. It gives the impression of having buildings in the D and B of Dubai. At first glance, it looks to be Arabic but it is actually spelling Dubai in English.
Input Fields, Buttons and Pagination
Based on the research, I decided to create the wireframes for the website. I wanted to keep the look simple and provide the user with the most amount of information. I decided on the Z pattern to create sections with the image on one side and a brief description on the other side. This would lead to the connecting page where the user can access more detailed information about the location and its significance in the history of Dubai.
The previous research and wireframes were turned into the final high fidelity prototype.