WebMoney Mail

My role: UI-designer.
Team: 2 frontend developers, Lead developer.
Year: 2022
Back
Presentaion
Gallery

Background

Old design

The mail interface was last redesigned in 2014.

 The mail itself is part of a large number of WebMoney services, which at the time of the task were not connected by a single design system.

 I started by creating a design system
Problems
Lack of a design system as such;

Old UX patterns that need to be rechecked and updated if necessary.
Tasks
Review the old interface and identify weaknesses;

Create a foundation for the design system and synchronize components with the front-end side;

Focus on popular email services.

What caught my eye

arrow-left
The first theses
The key problem is the complex hierarchy, which leads to an overloaded interface.

 The composition of the elements is designed for "square" monitors, which is no longer relevant in 2022.
The need for a redesign of the overall navigation
The general header with a bulky menu and footer took up too much attention; in parallel with the redesign of the Mail, the question of whether it was necessary to design a new WebMoney header and footer was raised.
After the review, I looked at how Yandex, Google, and Proton designed similar services.

Benchmarking

arrow-left
Conclusions

Popular email services organize their structure as follows:

On the left, there is the main navigation with categories and sections;

On the right, there is a list of emails;

The email management panel is located in a separate block above the message list.
Hypotheses
The similar structure of popular email services shows that it is convenient and understandable to the average user, which allows us to safely implement it in the WebMoney service — it is familiar and can solve the problem of hierarchy.
I would like to point out that for WebMoney, the entity of Contacts is of particular importance: it is important for some employees to synchronize their workflows with specific profiles. I will discuss the redesign of contacts and the flow associated with them below.

New design

In addition to the new list view, main menu, and top bar, you can partially see the new header design.

Analysis of the old design, redesign of the overall navigation

Let's take a closer look at the Search problem
Problems
There are many extraneous menu items that do not specifically relate to email; the search is only in the header, which contains all the service entities.
Small story
Проблему общей устаревшей навигации платформы предложили решить два инициативными разработчика, которые лучше понимали подводные камни.

От нашей, дизайнерской стороны, требовалось спроектировать новую логику меню. Первым делом мы попытались узнать, что мешает бизнесу отказаться от старой структуры.

Решающим фактором были не показатели метрик. Как это ни странно, руководство (по их словам) поддерживало нагромождённое меню с длиннющими списками просто на тот случай, когда у пользователя возникнет "какой-то вопрос" и ему потребуется помощь от Поддержки.

Других метрик, которые могли объективно показать необходимость в этом, нам не смогли предоставить.
The problem of the common outdated navigation of the platform was proposed to be solved by two proactive developers who better understood the pitfalls.

From our design side, it was required to design a new menu logic. First of all, we tried to find out what prevents a business from abandoning the old structure.

The metrics were not the deciding factor. Strangely enough, the management (according to them) maintained a cluttered menu with long lists, just in case the user had a "question" and needed help from Support.

They were unable to provide any other metrics that could objectively demonstrate the need for this.
arrow-left
Decision
There were no resources to research the support service. Therefore, the design team decided to look at the structure of the main menu from other banking companies and implement their strengths.
Small story
Сложность внедрения нового дизайна состояла в том, что каждому разработчику, который отвечает за определённый сервис, нужно было дать уже готовый код. Стороне фронтенда требовалось создать код, с готовыми стилями, который можно было бы подключить к файлу любого сервиса и просто поменять / добавить в нём нужные ссылки и названия. По-другому сценарию никто не хотел идти, а финальное решение наша сторона не принимала.

Но, в итоге, всё получилось :)
The difficulty of implementing the new design was that each developer responsible for a specific service had to provide ready-made code. The frontend side needed to create code with pre-defined styles that could be connected to any service file and simply modified or added with the necessary links and names. No one wanted to follow a different approach, and our team did not make the final decision.

However, in the end, everything worked out :)
The main goal of the navigation panels update was to move from the "everything is always available in one place" strategy to "providing solutions based on the context".

 The menu became contextual, native, and all the platform's features remained at hand, organized into categories within the horizontal menu. A unique second-level horizontal menu could be added to each Service as needed.
arrow-left

Old flow

Problem
Search in the general platform header is associated with all platform entities, not just the mail service.

 This is a real pain for the user: when they need to search, they will encounter unnecessary information and lose focus on their task.

 Benchmarking

After several discussions with the team and design iterations, a new search filter was added to the Mail interface
Decision
Implement a separate Search Form with Filters;

 Separate the main search engine from Contacts and give them a separate

New design