Mail.ru email client redesign and what the octopus is doing there
Mail.ru email client turned 20 last year. Over the life of the product, web-version has changed a number of times. There were about seven versions. Sometimes we changed only the code, sometimes we completely changed the design. Every time we made changes for the better. We improved our product, making it faster, more convenient and modern.
New email client looks like this today:
Ten years ago it looked like this:
Email Client Version 2014 appeared as a part of the unification process of three products: calendar, email client and cloud platform. Each service solves its own tasks, but at the same time complement each other. These products make a powerful set for the achievement of certain tasks. In a company, we call them productivity services.
At one time with a web version, the mobile apps of the product actively being developed. The mobile audience was growing very fast. Became noticeable intersections with the web version, that is people could use web version at home or at work and use a mobile app or mobile web on the go. The next step has become obvious — there should be uniform design on all platforms.
We had another reason for changes — the logo and branding of the company have remained unchanged for 10 years. However, we wanted to refresh design So we have got a global challenge to change the visual style of the company and the flagship product, where we could try a new style.
First concepts
It all started with the title of the product inside the company. We have a funny tradition of naming versions by using greek numbers, that`s why the project was called “Octavius” because it was eight version (octō means “eight” from the Greek).
This is in line with the word octopus, so in current beta-version you can see mollusk on a welcome screen. The octopus became a mascot of the project. Interesting fact — octopus also appeared in a very first version of an email project in 1998 as a mailman, who can handle big amount of letters.
We have faced a serious task: remake web interface that it had a single style for all platforms. Hence establish a new approach for all other company products.
To decide which way to choose, we tried the Double-Diamond approach for this. When we firstly differ in solutions and narrow down to only one then. It can be repeated several times as long as we get the result that we want.
We needed to get as much as possible interesting concepts and ideas to choose the best one. To generate this we used a design session, when designers from all departments meet all together and solve one problem. We often use this approach in a company, it helps explore the problem more. It is also good for designers in a way that they can dream up and switch from their own projects.
At first, each designer was working alone on the task without any limits, they could do whatever they want and draw their own variants of the interface. In this way, we got a lot of different concepts. We reviewed all ideas and left only strong ones. Several teams thus were formed around these ideas.
Pop-up concept
The first group decided to make an experiment, what if a letter or compose will open with a popup window. Because on a desktop we mostly work with a letter list, this is the main screen for users and the other screens are additional.
We decided not to take users off the main screen, but instead give them the opportunity to work with all tasks through pop-up windows: it saves interaction time and keeps the person in the context.
For instance, users can scroll down the list of letters for a long time, after that they can compose a new letter in a pop-up window, close this window up, and then return to the same position of letter list.
Slice, Slide & Scroll concept
At all company websites we have a block with a portal navigation, which contains links to all projects. We thought what if we reconsider this structure and give the entire page space only for the product. To divide everything into modules (slice), and give the ability to move between them horizontally (slide). At the same time leave the usual movement in the vertical plane (scroll).
Slice, Slide & Scroll is a bold look of one of our teams on the scalability and contrast of interface. Guys from the very beginning did not limit themselves. Although some decisions remained only as a concept, anyway the team worked brilliantly with dozens of interface details, micro-animations, and typography. This had an effect not only for a specific tasks but also was distributed to other projects.
Flex and Touch concepts
There were two more concepts, which started two different groups but had quite similar results.
Flex concept had a good adaptive layout: it was clear how this product will look at any device. Guys also worked with real data and business requirements. It supposed to be the most realistic work among others if it could be developed.
Another approach (Touch) complemented the UI of a three-column mode and a convenient view of a narrow column with folders. These gave flexibility to the interface and closed gaps in scaling at certain screen resolutions.
An important advantage of the approach was that many mobile patterns were used there. For example, the enlarged block size which made the interface on the web suitable for touch-based devices. An additional impulse was desktop devices with touch-controlling which meant that the interface should be convenient to control with your fingers everywhere not only on tablets and phones.
Principles of the new interface
Following the results of the design sessions, we got a combined approach: we took the Flex and Touch approaches as a basis, and added successful solutions from other concepts. We understood a lot and were able to form design principles on which we assembled a new interface.
- Adaptability: web version should be available at any device from desktop to mobile phone
- Versatility: appearance adapts to your specific tasks
- Efficiency: the ability to work with the interface in one browser tab and speed up work with familiar tasks
- Relevance: maintain the context of the situation and show only the necessary one
- Clean and simple: less visual noise and unnecessary elements
- Intellect in the interface: the ability to solve routine tasks for the user
Adaptability of interface
It was important for us to save every single user experience on any device, that’s why the adaptability of the interface was extremely important. People should not feel discomfort when they open an email client on a mobile browser after a tablet or desktop, they should easily find control elements on the screen
This is not a simple task, because of the complex product. Right now the beta version of the interface adapts only to the viewport of the portrait version of the tablet (the visible area of the web page equal to the tablet resolution). We almost have done to adapt a mobile viewport, but meanwhile, we show the old version in this way.
The versatility of the interface
It was necessary to make a single interface not only for the web, but also to connect it with our mobile applications. Default interface elements are larger, they support comfortable finger tapping even on laptops or large tablets with touch screens. It helps you to keep a single control size on all devices.
We know that the amount of information on the screen is very important for many users, especially on the desktop. So we added the ability to use a compact view of the interface.
The compact view has always been in our interfaces, this is an important part of productive work. And now it is systematically described, moreover it is a part of our design system Paradigm.
Also, we have another interface view for users who want to make their work faster — a view with a letter column. Due to research, we know that our users, for who productivity is important, often switch, for example, to Microsoft Outlook, because there is such a special display mode when you can see both: a list of letters and an open letter. This is extremely convenient in working correspondence. We supported this in a new interface.
Interface efficiency
We know that the majority of our users use email for business purposes. And most of the correspondence is precisely business correspondence nowadays.
Previously in the situation when you needed to compose a letter and use the list of letters at the same time, it was necessary to open a new tab in the browser. The same was when you had to write several letters at the same time.
Currently, you can manage it in one window and you can return to the list of letters at any time with minimizing and expand the letter. Also, you can write multiple letters at the same time. That’s how we give the opportunity to do everything only on one page.
The creation of a filter for letters works in the same way. This feature available right from the letters opens in a pop-up window. We will also add the ability to minimize the window in the future.
Interface relevance
Relevance in our situation is an opportunity to cut off the unnecessary things and leave only what is really important for users.
We used this principle in the header toolbar which contains basic actions with letters. This toolbar becomes contextual, it means that we show only those buttons which are necessary for a person in a particular situation.
For example, if we are in an open letter, then the toolbar shows the main letter actions.
If we select several letters, we see a different set of group actions.
We know interactions like this as a mobile application pattern. This is the main point of redesign — the project looks and feels like a full-fledged web application than a simple website with endless menu layers.
We have also worked with a list of letters. For example, we decided to remove checkboxes for selecting a particular letter. Now you can make a choice by clicking on the avatar. We already use this pattern in our mobile apps and it showed itself well.
This is the case of the evolution of a mature product when some things become obvious and you can try to remove them however everything will be working.
The headline of the letter became more compact, it raises the text of the letter and puts more emphasis on it. This can be called as a reference to messengers, where the correspondence works quite similar.
Clean interface
We have worked with the interface elements and tried to remove the visual noise. We introduced the style of buttons without a background that doesn’t look so heavy. This trend came from mobile applications when the context prompts the purpose of the button.
Since the product was constantly growing and sometimes only parts of the interface were changing, a mess appeared in the styles. There were too many colors in different shades. To understand where to use one or another color was not easy, it is what made work more complicated.
We supported the Paradigm design system in the eighth version of the project, thanks to this we could use only 9 colors.
Intellect in the interface
Modern email client becomes really smart and helps users in a variety of ways. The machine learning team helps us in this.
All email clients suffer not only from spam but also from a large number of mailings, to which we subscribed by ourselves. They can be useful, but more often they create chaos in the mail.
We made meta threads in the new version, that hide mailing in smart folders which can be opened right in the list of letters. So really important letters, for example, correspondence with people are not lost among a large number of mailings.
Machine learning also has helped us with responses to letters. Now we can offer ready-made phrases that you can quickly send. There are always three options: positive, negative and neutral.
Testing
The testing process was divided into several stages, on each of them we checked certain people and how they solve their problems.
UX research in the laboratory
We needed to check how to work the principles that we used in the new interface. A series of studies in our UX-lab helped us with this.
We collected certain people for research: one group of people who use only the web version of the project and second use also mobile apps. Since the web interface contained many mobile patterns, we needed to check them for different types of users.
All respondents performed basic tasks, for example, compose letters, select letters, answering letters. We also added tasks with new features: writing two letters at the same time, using a ready-made quick response to a letter, creating a filter to the sender directly in the letter.
The most problematic thing was the selection of letters by avatars instead of checkboxes. Precisely for users who are not familiar with our mobile applications, where such a solution has been used for a long time. We know that people get used to this from experience with mobile apps. We also fixed the situation by changing the toolbar and adding a hint at the start of use.
We also had difficulties with the new compose form, where we tried to swap the fields of theme and recipients. People could not get used to it and ignored all clues and error for one reason — they do not look at the screen when they print something. As a result, we returned the classic field order.
The respondents positively assessed the new design, talked about the cleanliness and simplicity of the interface, compared it with mobile and desktop applications of email clients, and that’s what we exactly wanted.
Testing for corporate users
Mail.ru Group is a large company with a big amount of staff, so colleagues are among the first get the opportunity to see new products, and we get useful feedback from them. Our email client is the main working tool in the office. In this case, you can define some problems among all sets of tools not only basic scenarios.
We showed the product inside the company and received a number of wishes. For example, in the first approach, the compose button was contextual and was hidden when you switched to searching or selecting letters on the list. Constant access to this button is important for professional users. We moved it to the folder list and now it is available at any interface state.
We tested adaptability because people in the company have a number of different screen sizes. We immediately began to receive feedback on which breakpoints we had something broken.
We also did not launch a compact view at this stage and we showed a large view by default. The most important request among experienced users was to return a compact view. It became obvious that such a view should be done as soon as possible.
Corporate users immediately noticed the absence of some details. For example, a person writes about attachments in a letter but does not attach them. Previously, we asked if he had forgotten to attach them, and we missed it in the new version. So users began to make similar mistakes again and told us about it.
Beta community
The next step was to check the new interface on the beta community: we offered each user connect to it and test new features before they get into the main interface. This is a good test for understanding regular users on an extremely big amount of them.
For example, many requests were received about the translation of letters. We wanted to postpone it but revised the situation and added to the interface a little faster.
People asked to create a folder from inbox — in the old version there was a link in the folder list. We returned this opportunity but improved the process. Now you can create a folder directly on the list with a pop-up window.
We also launched a survey of new users to hear their opinion about the new interface. Users noted that they like design, that new interface looks like popular desktop clients and mobile apps.
It was important for us to hear about the sensations from long-term use of the product — it is a quality metric. According to previous reviews, we found out that the transition to the new interface causes discomfort. But even greater discomfort made a return to the old interface when already spent more time in the new. As a result, we see that the percentage of returning to the old interface among connected users is steadily decreasing.
In addition to quality, we also checked quantitative metrics — the main thing for us is how often users return to the interface to solve their issues (retention rate). And this value has grown. In addition, people are 50% more likely to respond and open attachments in the new interface.
First results
Mail is a large and mature project with a huge audience, and we know how difficult to make such a redesign. We are not in a hurry. We are moving neatly to make the beta version to the main mail client, but the first conclusions can already be made.
The new web interface along with mobile applications helped to build the product as a single system, where the visual style and interaction with the elements are the same. This also changed the approach to work within the team: separation of the mobile and web designer has disappeared. Nowadays the person responsible for the entire product. But the most important, that it gives a unified interaction experience for users and makes the transition from one device to another as seamless as possible.
The new interface is available at the link: octavius.mail.ru.
