Glavnaya doroga website
Analytics, UX/UI design and website development with a convenient route calculation tool
Novoye Kachestvo Dorog is the operator of the Odintsovo Northern Bypass and Bagration Avenue toll roads.
Context and task
The main task was to make two key scenarios intuitive: calculating the cost of a trip depending on the route and purchasing a transponder.
The website’s primary functions are convenient route and trip cost calculation, as well as online transponder purchase for fast and comfortable travel on the roads.
Structure
The homepage contains the main features and information about toll roads, allows users to order a transponder, and provides access to a personal account where users can top up their balance.
Identity
We developed additional identity attributes for the digital environment. Minimalistic icons, illustrations, and line graphics became part of the website’s visual system, supporting the idea of motion.
The project used the Commissioner font, which maintains a strict and modern style. The palette includes the brand’s signature blue shades, complemented by white and grey for lightness and contrast, as well as accent yellow, orange, and green for navigation and icons. This approach made the website’s visual system recognisable while maintaining its integrity.
Design
The design came out modern and utilitarian. It is concise and compact, without unnecessary details and excessive emotionality, suitable for the service task of the website.
Templates and widgets help structure information and make the interface user-friendly, while the clean visual presentation maintains a sense of levity when interacting with the website.
Functional elements. Map and calculator
One of the key features of the website is the calculation of toll road costs, so a convenient calculator adapted for desktop and mobile devices is integrated into the main screen. Users can select the route, vehicle class, date and time of travel, day of the week, and immediately calculate the cost.
The interactive map shows toll collection points, service offices and tariffs. By clicking on them, you can find out details about the section, payment methods, office opening hours and available services. Online cameras allow you to assess the situation on the roads and the presence of traffic jams in real time.
Development. Frontend and Backend.
A modern stack was used for the project: HTML5, CSS3 (SCSS), TypeScript, Pug, Webpack. The build was carried out in accordance with the architectural recommendations of 1C-Bitrix, which was used for backend development.
The website features a convenient online purchase of transponders with the option of courier delivery or self-pickup. An interactive SDEK map was integrated with a selection of convenient branches or parcel terminals, and the Sberbank payment system and ATOL cheque printing system were also integrated.
All orders are logged in the 1C-Bitrix admin panel, where managers can see the info they need. This lets them quickly track and process requests without losing any data, as well as efficiently manage the process of issuing transponders to customers.
Result
The resulting product is a modern, convenient and functional digital platform that solves business problems and meets the needs of the audience.
The website provides users with access to services and information about the company, and helps businesses build convenient and transparent interactions with customers in the online environment.
