MTS brand portal. Digital ecosystem

We have gathered everything one needs –– from insights to guides –– to make a grasp of the MTS brand smooth.
  • Design

    Concept
    Scaling

  • Development

    Next.js
    TypeScript
    Webpack
    REST API
    SCSS

  • Outcome

    brand.mts.ru

Task

In 2023, MTS carried out a rebranding and decided to create a brand portal to introduce its employees and job seekers to the new visual identity. The site shall not just bring together the guidelines in one place but rather communicate the company's values that the new identity reflects and inspire designers to collaborate with the brand. The MTS team turned to us for the design and development of the brand portal.

Solution

When creating the brand portal, we have leaned on the new style of the MTS ecosystem. The new website consists of semantic blocks. Each one is dedicated to individual brand constants. The user shall not only see a beautiful design –– but they shall immediately understand how the components of the MTS corporate identity work. That's why the visual elements in each block are interactive.

There are different digital products within the MTS ecosystem. The design of each product has its own distinctive character and visual features while belonging to the overall style of MTS.

MTS photo style consists of obligatory cold and warm colour spots: blue is responsible for digital, and red –– is for the energetic and cheerful character of the brand. On the website of the brand portal, the user can interact with the photo style –– they can see a photo before retouching, using separately cold (blue) and warm (red) shades, as well as two shades together.

Controls are an essential part of the MTS design system. They are an interface element that can perform as a button, a slider, or a text box. They recall smartphone interface elements and emphasise that MTS creates digital applications. We have made them clickable so that users can understand how they work.

The new brand portal came out practical with inspiring visual elements. As a result, it is a summarising entry point to the entire MTS design. Our team used the Next.js framework, TypeScript programming language, Webpack module builder, REST API and SCSS syntax.

MTS. Rebranding
Next project