Services
- Prototyping
- Website coding
- UI/UX design
- Adaptation for smaller screens
Go to the site - vtbsession.vtbcapital.ru/esg/
Client
VTB is one of the leading universal banks of Russia and is part of the VTB Group that offers a wide range of banking services and products in Russia, CIS, Europe, Asia, Africa, and the U.S.
Task
Develop a fully functional and user-friendly page for the Green Agenda online forum held on May 25, 2021.
Solution
Development of a landing page and its adaptation for mobile devices in accordance with the customer’s wishes.
The first step was page prototyping. The customer was provided with the presentation with the supposed landing page structure and the layout of its elements. Once the final version was approved, we started developing the design layout.
The design was made in VTB's corporate style, and its distinctive feature was a large number of animated elements.
When the main layout work was completed, the customer sent us several edits which were promptly implemented. As a result, we added new blocks, updated content and increased the analytics block. These modifications required quick changes to the layout and design, typing, optimizing images and animated elements, and then testing their display in different browsers.
The button "Ask the speaker" and the form where user could select a speaker and write to them were implemented under the player where the conference was broadcast. The functional part of the form was ready, and all that we had to do was to stylize it to match the page design. When the form expands, the next block slides down so that the elements don’t overlap.
In order to place more information on the page, a news popup was created. If users want to study the materials of the conference in more detail, they can click the "Read in full" button or download the presentation to their device.
Another major task was adapting the page for the screens of various devices. A separate menu was developed for the mobile version which is located at the bottom of the screen, and the customer really liked this feature. This way users can easily find the section they need without scrolling through the page in search of a menu. When viewing from mobile devices, the player is docked in the lower right corner, so that users can watch and read at the same time.
Web version
- While working on adaptation, the animated elements were developed in such a way that the page scrolls more smoothly, and it becomes easier and more convenient for users to perceive the information.
- Apart from adapting the website for PCs, tablets and smartphones, adaptive versions were created for non-standard screens, for example, for screens with the 1024 x 768 resolution.
- Along with this, the page has been adapted for Internet Explorer which also has a non-standard resolution. The peculiarity of this browser is that it’s built on the old engine, and some CSS styles and scripts are displayed incorrectly. We worked on the layout, and now the website looks as good in Internet Explorer as it does in more modern browsers.
Showreel
Conclusion
The online forum page was created according to the customer's plan and wishes. The website was adapted for different types of screens including non-standard ones, and in addition, a separate layout was made for Internet Explorer. At each stage of work, edits were promptly implemented, and as a result, we created a fully functional conference platform that meets all customer’s needs and requirements.
