Yandex School of Design. School of mobile design: the process of completing a test task. What is our school about

A great opportunity to enter a new profession. Therefore, I decided to do a test task.

The task consists of two parts:

1. Check out Yandex mobile products and offer a couple of ideas for improving any of them.
2. Suggest a concept for a mobile application for the Yandex.Travel service. The result should be a few key screens and a description of how it works and why.

The second task turned out to be more difficult than I thought. It seems that I made all the mistakes that I could, and I will talk about this below.

Process

I found out about the recruitment to the School right before being sent to Yekaterinburg for DAMP. On the way on the train, I began to think over the interface of the application and draw screens in a notebook.

This was the first mistake. I started building interfaces the way I wanted. It would be correct to first understand what needs the interface should solve and, depending on this, build it.

When I returned from Yekaterinburg, I had 12 days to complete two tasks within test task. For a better understanding of the flow of time, I hung a sheet of days in front of me to remember the deadline. Every evening crossed out the day that passed.

Icon

The user gets to know the application before launching it. The app icon is very important, so I started with it. I took the icon of the existing Yandex.Travel web service as a basis.

I started by drawing an icon in my :

My second mistake. It looks nice, but it's really useless. When I started drawing in the Sketch, it turned out to be complete crap:

It would be correct not to redraw an already existing icon, but to start with the associations that the service calls. Yandex.Travel is a service for finding tours and choosing hotels.

The first association that came to mind was a glass with a cocktail, it allows you to relax, like a trip to the sea.

I agree, it looks pathetic. Although here you can even notice the Y from the Yandex logo. The option is not suitable, since the association of the service with an alcoholic drink is not a good idea. The following travel associations: palm trees!

I realized that I made a mistake again. Yes, I started drawing icons based on associations, but they were in a vacuum. It would be more correct to study the icons of Yandex mobile applications, highlight common features and using them in combination with associations to draw an icon.

Who would want to adopt such a freak into the family?

Yandex has simple application icons, they don’t go far beyond associations. For Transport they have a bus, for the Post Office they have an envelope, and for the Market they have a grocery cart.

I start looking for simple associations for Travel: luggage, bag, ticket. While looking for simple implementations of icons, I stumble upon a compass. Indeed, the compass and its image are familiar to everyone. I draw an icon and dress it in corporate colors. I check how she feels in the family:

I remember that half of the deadline before the deadline is over. There is a week left. Drawing an icon is not an easy task. I stop at the option with a compass and move on to the interface of the mobile application.

Left - icon with borders for list page mobile applications, on the right is an icon for use in the prototype, it should not have borders.

The icon feels good in its natural habitat:

Mobile app

I opened Yandex.Travel on my smartphone to see what the mobile version of the site looks like. Then I installed the following applications: Booking, Ostrovok, Travelata.ru, Aviasales and AirBnB to see how the interface might look in travel and hotel/tour search applications. I installed all the Yandex apps available for the iPhone in order to find common patterns in the interfaces.

I started looking for shots on dribble in the hope of finding interesting interfaces and using them as a basis in my concept. This was my next mistake.

Pictures in dribble turned out to be out of touch with life. The screens I found were beautiful, but they were in a vacuum and didn't solve the problem at hand.

Decided who will use the Travel mobile app. First of all, these are those users who have already used the service through the mobile version of the site.

Jump to app from mobile version the site should be as less painful for the user as possible, therefore the interface should be familiar and familiar.

I took the interface of the mobile version of the site as a basis and finalized it for mobile realities. The result is a sketch file of 8.7 mb and 15 artboards:

Unlike the mobile version, the application has a page with a selection of personal tours, the ability to add the search result to favorites and the "History" button that stores the history search queries user.

Prototype

At this stage, I realized that I had made the biggest mistake I had ever made on the test.

I drew interfaces under the screen of my old iPhone 4es to demonstrate the concept work on it. When I opened the app image for the first time, I realized that the sizes of the artboards do not match the size of the smartphone screen.

In Sketch, my screens were 320 by 480 pixels, but it should have been 640 by 960. I started redoing all the screens. Then I realized that in the Sketch the elements look good, but on the smartphone they are small.

It would be more correct to approach the process differently: not “Draw interface” → “Start prototyping”, but draw one screen and immediately check how it is displayed on a smartphone, it would save a couple of days of work.

Before starting the test task, I decided on a prototyping tool - this is Framer Studio. There you can write on CoffeeScript and make cool animations. In fact, it turned out that it was not easy to master the capabilities of Framer and implement my interface on it in a short time. There is nowhere to go, the deadline is on the nose, it is necessary to flex.

At school, Anton Shein mentioned the InVision service. Began to understand.

The service turned out to be intuitive: you upload pictures and link them with transitions. You can customize the animation for transitions, set your own application icon, which will be displayed when saved to the iPhone home screen. That's what I need!

There were no problems. I had to suffer with the status bar.

The status bar is an interface line that displays the time, battery charge and signal cellular communication. My layouts had their own status bar, but InVision can display the system one. If you save the icon to the home screen and launch the application through it, then the status bar merges with the background.

When we save the site icon to the home screen and launch it, the site opens through a web view. The status bar can be customized via the apple-touch-icon meta tag. Unfortunately, the status bar cannot be configured to be transparent with black text. Only with white text and black background.

Solution: install InVision App and use it for demonstration.

Since the concept had to be shown through another application, the integrity of the demonstration was violated. Come up with a script: show running application, return to the icon, talk about it and return to the application without clicking on the icon.

Result

Σ

Yes, I completely forgot to say. Before the test task, I had never worked in Sketch. As it turns out, it's easy to master.

It is much more difficult to adapt to the design of mobile applications. As a web developer, I only have web interfaces in my head. In applications, a completely different use case, other features.

The main reason why I want to enter the School of Mobile Design is to gain knowledge and experience in creating application design, to learn how to think like a designer.

I recently completed the Yandex.Design course. I studied the material myself. But I did not have the opportunity to communicate with other students, ask lecturers questions, and it was difficult to feel the atmosphere of the School.

Therefore, I want to enter the School of Mobile Design and personally attend lectures, ask questions and, most importantly, gain experience in creating a product together with other students.

Only 30 people will be accepted, the results will be announced by May 27. It remains only to wait for the results and hope for the best, but for now you can support me with a like and a comment on the note.

I will be glad to hear comments and suggestions on the test task.

In the summer of 2015, the first Yandex Design School. Video materials filmed in the summer formed the basis of a distance learning course. Taras Sharov, co-author of the school, made an introductory video in which he briefly tells:

1. Who is the Design School for?
2. What is our school about?
3. How to perceive school materials correctly?
4. How to get trained?
5. Where to start?

1. WHO IS DESIGN SCHOOL FOR?

The school is not designed for beginners in design.

2. WHAT IS OUR SCHOOL ABOUT?

Training is divided into 4 blocks:
1. Design in a large company.
2. Prototyping.
3. Product design.
4. Teamwork.
And also your personal project(practice).

3. HOW TO RECOGNIZE THE MATERIALS OF THE SCHOOL?

Set aside criticism for a while and be open to everything new. Try to study in more detail those topics that will sound in the materials of the school.

4. HOW DO I TRAIN?

1. Get ready for work.
2. Pick a brand and imagine yourself as a designer working for that brand.
3. Come up with a product idea that complements the brand's product line. It should be a small product - no more complicated than Instagram.
4. Work on the Russian version of the product.
5. During the first and second sections of our school, act on your intuition. Starting from the third section, follow our recommendations.

5. WHERE TO START?

If you are not familiar with HTML languages, CSS and JavaScript, you should start with the basic courses at Codeacademy. Also, before the start, we recommend warming up your brains with a few tips from the Gorbunov Bureau.

Yandex opens the School of Design - a project for novice product designers. From June 15 to August 31, Yandex employees and invited experts will share their experience in working on product design with project participants. The program consists of four blocks: "design in a large company", "prototyping", "product design" and "teamwork".
At the end of the program, participants will present a personal project - simple and useful service, which would conceptually and visually continue a number of Yandex services.

The selection to the school took place in several stages. From March 18 to April 19, applicants sent a portfolio, essay, and test task to the Yandex team. The authors of the most successful papers were interviewed. In total, the School team looked at 780 applications and spoke with 74 applicants. Although initially there were supposed to be 30 participants in the project, in the final composition there are one more of them.

Lola Kristallinskaya

Deputy Head of Design Department

“Product design of mass services in Russia is not yet taught anywhere, therefore, the School attracted the attention of different people: physicists, engineers, mathematicians, architects, web designers, illustrators wrote to us. Someone works and has collected a portfolio, someone else is studying and only decides where to move on.

Initially, we planned to take 30 listeners, but the figure is conditional: if we found 23 people, we would take 23. It was important for us to find "ours" - enthusiastic and thoughtful at the same time. From the very beginning, we formulated the goal - the selection system should be transparent, so that we can clearly explain to each person why “yes” or why “no”.

It was important for uso find"their" - enthusiastic
and thoughtful simultaneously.

First of all, we looked at “confusion”: how seriously a person approached the test task. It was not a discovery for me that having experience or a cool portfolio does not at all guarantee accurate and meaningful work. It is valuable when a person understands where he is going and is ready to learn. Again, this does not depend on age or experience, but rather on internal culture and personal goals. For example, some promising candidates retreated after being warned that they would have to study all summer long: a lot, a long time, difficult.

We answered every person who wrote to us, talked to a lot of people and learned a lot of interesting things about the designer market in Russia, we will definitely tell you about it soon.”

Classes will be held every other day in the evenings. The progress of the participants will be monitored by mentors from Yandex and personal curators. Since there is no established methodology and literature for product designers in Russian design education, Yandex employees developed the project program on their own.

Taras Sharov

Head of Product Management and Design Department

School of Design, launched in the summer of 2015 - course participants will be able to sequentially go through all sections of the School, listening to lectures by Yandex employees and simultaneously working on their own projects. Video lectures will be published sequentially, every week on Tuesdays. The course is designed for 10 weeks and will end on April 5th.

The editors of the site learned from the creators of the School details about the new video course and its work.

Tell us about the results of the School of Design. Are you happy with the results?

Lola Kristallinskaya, organizer of the School of Design, Deputy Head of the Yandex Design Department: In the summer of 2015, we held the School of Design for the first time. For a large team of designers at Yandex - in our company, by the way, there are already about 140 designers - this was an important event for which we were seriously preparing.

We argued heatedly about the program and the training format: “What is design in a big company? What should a product designer know? How can he work with the team? Novice designers have a lot of questions, and it was necessary to understand how to gather knowledge that seemed disparate at first glance into a coherent story and fit it into a 2.5-month intensive.

As a result, the program included not only practical blocks, such as, for example, prototyping, but also about teamwork, the benefits of related professions, and others. The order of the sections was not chosen by chance - according to our plan, the student of the School gradually develops practical skills, reaches a certain professional maturity - and is ready to defend his project by the end.

Interest in product design is great, and not only from employers - we received 780 applications for training, with completed test tasks, and conducted 70 interviews, which were successfully passed by 32 people.

One of them, at the start of the school, decided to try to get a job at Yandex and, having successfully passed the interviews, joined us. It was very important for us to choose guys who took their education seriously. We succeeded, and 30 of the 31 students who entered the School reached the final defense of the project.

As a result of the School, Yandex invited 16 graduates to work, other guys went to develop their own projects or returned to the companies they worked for.

Taras Sharov, organizer of the school, head of the prototyping group for new products at Poisk, Yandex: The portrait of an ideal student of our school looks like this: you, as a designer, have repeatedly coped with the tasks assigned to you, your customers accepted your work and were satisfied with it. Gradually, you began to doubt that the customer really understands what he needs. Or there is no customer at all, and the closest contender for this role is yourself. You often ask yourself “how to understand: what is right and what is wrong?”, you have the motivation to thoroughly understand this issue.

When developing the school program, we tried to answer the question “what should a product designer know and be able to do in a company like Yandex?”. So, we have a beginner interface designer. Where should he develop?

We used the following analogy: the development of a designer resembles a cut of a tree - the more experience, the more rings on the cut. Closer to the core of the cut are the crafting skills - after all, many begin with practice. And closer to the outer ring of the slice are abstract knowledge - these are reflections on the real meaning of the designer's work.

What is the idea of ​​the School of Design video course launched today?

Today, Yandex is launching a remote video course at the School of Design - course participants will be able to sequentially go through all sections of the School, listening to lectures by Yandex employees and simultaneously working on their own project.

At the beginning of the course, you need to choose a well-known and well-known brand, imagine yourself as a designer working for it, and come up with an idea for a small product that will complement the product line. You will work with this product throughout the course. Simply watching video footage is unlikely to be effective.

Details - in the introductory lesson from Taras Sharov:

Plan of the introductory lecture:

1. Who is the Design School for?
2. What is our school about?
3. How to perceive school materials correctly?
4. How to get trained?
5. Where to begin?

Video lectures will be published sequentially, every week on Tuesdays. The course is designed for 10 weeks and will end on April 5th.

Can course participants send projects to Yandex for review?

Lola Kristallinskaya: We are ready to recruit an experimental group, which will receive the opportunity of consultations from our teachers during the study of the project. We will inform you about the start and recruitment conditions additionally, during February.

In the meantime, we recommend that you tune in to serious work: watch lectures, read additional literature and, in parallel with this, work on your project. In the process of learning, his concept can seriously change. Your goal is not so much the end result as the process. The school gives you the opportunity to broaden your horizons and try to work on the product the way it is done in large companies.

Are you planning to launch the second enrollment to the School of Design?

Objectivity and non-interference are expected from Yandex - such a requirement for information also affects the interface: to be a natural environment, not an admixture.

PROGRAM

Design in a large company

About the difference between creator and designer. On the benefits of studying related professions. Immersion in working with brand limitations: visual language, architecture, history. How to contribute to the common value system, to become a part of a larger one. Resolving personality and brand conflict.

Prototypes

The best way to get a feel for a product is at the design stage. A Guide to Mastering Prototyping Techniques. Getting rid of the fear of working with code. A systematic approach to organizing templates and styles. Interface decomposition methodology. Terminology shared with developers. Introduction to Yandex internal tools.

Products

Manufacturing process from idea to product. Roles: product manager, product designer, technical architect and marketer. Turning an interface designer into a product designer. Stages of the design process and tools for each of them. Hypothesis testing: research and experimentation. Promotion of the product after its creation.

Teamwork

Why is it important to gather a team of diverse like-minded people around you. How to organize yourself and others. Group decisions and their implementation without distortion. Correct behavior in typical conflict situations. Techniques for communicating ideas to others. The specifics of a large team: deadlines, meetings, criticism, quality control, respect and trust.

Project work

For the effective passage of the course, it is necessary to engage not only in theory, but also in practice. The participants of the School worked on their own products - we offer a similar task to the students of the video course. You can learn more about it from