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.
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.
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.
Mail.Ru educational projects
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.
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.
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.
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.
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.
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.
We strictly observed the budget and deadlines of the project, so we kept the animations simple, picking up several neat effects along the way.