Immersive 3D space for the Russ group
Analytics, UX/UI design, 3D, motion design, Bitrix
Russ is a Russian advertising operator, providing over 150,000 advertising surfaces in more than 150 cities across Russia.
In 2023, the company underwent a major rebranding amid expanding market presence and diversification across various segments. Other areas were gradually added to traditional and digital outdoor advertising, and now the Russ Group encompasses four: Outdoor, Indoor, Airport, and Transit.
Each offers its own unique set of products for advertising in business centers, airports, train stations, metro stations, and on city streets.
Each offers its own unique set of products for advertising in business centers, airports, train stations, metro stations, and on city streets.
Bronze. “Services for Business”
Gold. Large company website nomination
Context and tasks
The company approached us to create a promotional website where users could explore urban infrastructure and visually examine Russ’s various advertising formats. The 3D format of the scenes would allow users to assess the scale and location of the products, while the minimalist interface would simplify the process of understanding its specifics.
The project tasks can be divided into four categories:
1. Production: create realistic 3D scenes of urban infrastructure, think through the placement of advertising formats and camera movements.
2. Interface: develop clear interaction logic for users and ensure the fulfillment of the client’s business objectives.
3. Branding: visually integrate and develop the identity of the Russ brand and new directions.
4. Development: ensure high playback speed and seamless product navigation.
Structure and analitycs
Work on the project began with analytics. The goal of this stage was to collect all advertising formats, evaluate their volume, and distribute them across scenes. The client provided for analysis all data on the formats used in outdoor advertising.
At the same time, we were also working on the site structure and user journey. It was essential for us to make the site not only eye-catching but also user-friendly, so we came up with various learning scenarios for the company’s products. Each scene ended up containing 7-12 advertising formats.
Home screen
The next task was to figure out the user path to the desired scene. We came up with the idea of showing all areas on a single city map. This solution allowed us to show the full scope of Russ’s advertising capabilities on a single screen.
We drew the city map by hand before moving on to modeling it. We aimed for realism in the style and paid great attention to architectural details, trying to create a composite image of different Russian cities.
The finished map is rendered in the white and blue shades of the Russ brand. This avoids visual noise, emphasizes the architectural elements of the buildings, and highlights the advertising formats, created in the brand’s signature blue color, from the background. We also integrated Russ’s brand identity into the city map. For example, when you hover over a scene, it is highlighted in the brand’s colors.
Scene design
We began working on the spaces for the different areas by composing the entire scene. At this stage, we made sketches of the space, thought through the placement of objects, and planned the camera’s trajectory from one medium to another. Then we drew sketches of the products in their real environment.
After creating the sketches, we modeled a rough scene in 3D and worked out the camera movements, gradually adding details to the scenes and making the movements smoother.
When both we and the client were satisfied with the result in terms of scene composition and camera movements, we began to work on the lighting. We sought the right contrast, striving to make the scenes look realistic and three-dimensional. We paid special attention to shadows, glare, and reflections to ensure a full immersion effect.
Development
We ended up with five full scenes with a high level of detail and lots of movement within them. Since image quality and ease of use were our top priorities, we implemented movement within spaces in video format. This approach not only allowed us to preserve the detail of the locations, but also ensured continuity between objects.
The entire scene was divided into separate video fragments corresponding to each advertising format. In addition, we provided separate videos for backward movement and vertical videos for the mobile version.
Some interesting technical solutions include:
— delayed background video loading, which does not affect the loading time of the site;
— session-level video caching to prevent videos from reloading when moving between rooms;
— modern WebM video format (MP4 is also supported for older browsers);
— optimized video versions for mobile devices to speed up loading and reduce traffic consumption;
— browser window resizing, allowing real-time tracking of device type, allowing the necessary videos to be loaded;
— use of complex SVG animations using the lottie-react library in the preloader and pins on the city map;
— caching requests to the backend using the SSG (Static Site Generation) strategy on Next.js. Thanks to this, requests to the backend are sent only once when the site is built. Afterwards, static content (that is, all pages) is retrieved from the cache for users, which significantly speeds up the loading of the site.
Result
The Russ promotional website is not just a nice-looking project, but also a working tool for presenting the company’s capabilities.
It complements the Russ corporate website, clearly and consistently immersing the user in the company’s product line. In addition, the interactive nature of the project makes it an excellent tool for industry events and exhibitions, allowing the virtual city to be presented on a large screen.
