5EEDAED5-6AA4-4553-94A3-AEF2477EDF6F
Contacts Team

Mail.Ru educational projects

Client

Since 2012, the company has launched six educational projects for programmers. These are two-year courses for the students of Lomonosov Moscow State University (MSU), Bauman Moscow State Technical University (BMSTU), Moscow Institute of Physics and Technology (MIPT), Peter the Great St. Petersburg Polytechnic University and Moscow Engineering Physics Institute (MEPhI). The courses aim to help students master the profession quicker, keep the knowledge that universities provide up-to-date, and supply companies with experts that are ready to take on the job without any re-education.

Task

The classes take place at five universities, and there are going to be more projects in the future. They have different names, websites, and style. It all got students a little confused, so a time has come to bring everything together by creating a global website and gradually abandoning the others. We laid out the structure, content, personal accounts, and designed all pages.

Concept

The page about the educational projects of Mail.Ru Group
Brief project presentation cards
Jump to project website

The work was divided in two stages: developing the public part of the website and creating personal accounts. First, we worked on the public part by reflecting on the target audience of the website and deciding on its design. We gravitated towards presenting the entire educational division of Mail.Ru Group on a single page with each project outlined on a brief card, but that proved to be not enough.

While discussing project development with the client, we came up with another idea: to replace four websites with a single one that would describe the courses, aiming to help students make the decision about enrolling on a course. We opted for more profound changes than developing a single-page presentation.

Technosphere
Technopark
Technotrack
Technopolis

Mail.Ru educational projects

Application filing diagram helped explain the process to new project participants.

By the time it came to the development of personal accounts, we already had considerable understanding of the goals and structure of each project, desires and concerns of students, so research took less time that it normally would.

Enrollment on any project involves three stages. It is a long and crucial process, so the main objective of a personal account is to guide an applicant from filing an application to enrolling on a course. It also notifies of the current status, shows the results of the tests, and hints at what to do next. Here, the students will find materials to help them prepare for the course as well as examples of last-year tasks.

Prototypes

We showcased the structure and content in prototypes: the home page and project page in detail, secondary pages — in simplified form. Website sections, navigation between them and the general tone of communication were devised by an information architect. The prototypes laid the groundwork, and arrangement refinements were transferred to the design.

Public part

Private part

A personal account consists of a home page and a page for each project. Their content changes depending on the status: “application”, “selection”, “testing”, “interview”, “enrolled”, “not enrolled”. The prototypes show the first two stages and the notification system.

The home page of a personal account is a card with courses: you can apply straight away or find out more about enrollment
After an application has been filed, the home page changes — now you can track your enrollment progress in My Courses
Changing information in the cards — choose a category, edit or connect social networks for quick authorization
Course page for students who haven’t filed an application yet
Applying for a course for the first time
Result is shown after each stage of enrollment

Design

We chose an informal approach to texts and conveyed this mood in the layouts. We invented the style ourselves based on the standards of Mail.Ru. We made the interface elements rather neutral to match the color backgrounds of the projects.

We sought to be closer to students and reiterated in different forms that programming is hard, but cool. There will be challenges, stress, triumphs and setbacks. Those who are ambitious enough will prevail. In terms of the visuals, we combined the corporate style of Mail.Ru with the elements of each project.

Deadlines were tight, but the designer still managed to add adaptive layout.

Project page

Project pages are based on the same template, but differ visually. They share the same style with the exception of color. We implemented a block about traineeship across all project pages, reminding students about their prospects after the courses.

Universal page structure for all projects

Personal account

We made personal accounts less vibrant, but retained the general style of the public part. The designer finalized the details and amended the profile page and the home page of personal accounts in accordance with the client’s requests during layout preparation.

Layout and programming

We strictly observed the budget and deadlines of the project, so we kept the animations simple, picking up several neat effects along the way.

Send a request or contact us at selling@nimax.ru

Technopolis
An educational project of Mail.Ru Group and the Polytechnic University in St. Petersburg
architecture, design, development
Zehnder-online
Heating solutions from the authorized agent of German manufacturer Zehnder in Russia.
website, design, development
Hotel Schools
Education at Swiss hospitality universities
concept, design, development
Pech.ru
A store selling fireplaces, furnaces, chimneys, and boilers
architecture, text, design, development