Website for Baku City Circuit, Formula 1 Azerbaijan Grand Prix
Task
Create a website for the Formula One Grand Prix in Azerbaijan, a major event in both racing sports and the tourism industry of the host country.
Diving into the incredible atmosphere of speeds often exceeding 180 mph and planning your racing weekend within one service is something every race fan should be able to do!
Technologies
Gulp
Sass
Webpack
Yii 2 Framework
MySQL
Data Import
Data Export
Three.Js
TweenJS
Easel JS
Analytics
Hosting an F1 Grand Prix in Baku is not only significant from a sports perspective but also crucial for the development of event tourism.
Designing
Formula One embodies a special atmosphere, which was essential for us to convey. From the home page, we guide users to the section «How It Was Back in 2016» to showcase the scale and unique character of the event.
With a comprehensive program for the racing weekend in Baku, users can choose the best seating area, book the nearest hotel, and purchase tickets in the Shopping section.
Given that the website was intended to assist users not only in preparing for the race but also in navigating the event itself, we began by designing its mobile version. With 95% of users accessing the website from mobile devices, this approach ensured optimal functionality and user experience.
Race Guide
For those who have already bought their tickets, the interactive Race Guide helps create a unique personal program. This section contains all the essential information about the event’s infrastructure, the race schedule, entertainment events, and useful tips for tourists.
Tourism Promotion
One of the business targets for the event and the website is to attract tourists to Azerbaijan. The unique culture, historical landmarks, and natural sights of the «Land of Fire» are also highlighted. To showcase the allure of traveling in Azerbaijan, users can explore a 3D map.
For those who prefer a faster pace, key information from all sections is available on the home page. One scroll down reveals all the important details.
Full Immersion
Speed from the get-go: on the home page, users are greeted with a race car speeding past Baku’s iconic landmarks. This dynamic animation brings the scene to life, creating a captivating 3D effect.
Your Spot on the Race
Whether you’re watching the acceleration lane, tracking race cars speeding through old Baku, staying near the track, or taking a break from the race noise to buy souvenirs and grab a bite, all the essential information is available on the interactive track map in the «Race Guide» section.
With the object type filter, users can quickly locate the grandstand or hotel they need and access detailed information with a simple click. In the mobile version, the map also displays the distance from the user’s location to the selected spot, making navigation seamless and intuitive.
Map
To create the stunning 3D map of Azerbaijan and Baku, we used satellite images and a gradient altitude map. The displacement mapping technology forms a 3D landscape using a gradient map: the lighter the dot on the image, the more that spot protrudes on the map. The camera descends slowly and smoothly while scrolling.
To implement this technology, we developed our own solutions that work for both the desktop and mobile versions.
Online Showcase
In the Shopping section, users can buy race tickets, book a hotel room, order souvenirs, and make other necessary purchases.
On the website, you can thoroughly explore each offer, such as viewing the interactive map of the racing track and selecting a grandstand.
Any Configuration
Recognising that over 50% of traffic during the race would come from smartphones, we invested extra effort in developing the mobile version. All pages of the website display correctly, and all functions work on any mobile device, ensuring users can maximise their experience during the short racing weekend.
