In early December, we announced a mega-competition on the redesign of mobile ICQ . Every day he gained momentum, the work was getting more and more intensive, and by the end of February 21, we already had 88 works! We got some interesting interface and ideological solutions for video calling, and a bonus of curious parallels with trend services. There was also a fabulous madness with rainbow-colored unicorns in space, which we were looking forward to.

Task

The task of the competition was to make a video chat of dreams. It was proposed to shift the emphasis in the product interface towards video calls (one-on-one calls, video conferencing or online broadcasting), without ignoring the usual text communication. It is important that the user has the impression of simplicity and familiarity, the daily video chat.

purpose

Good things for people are created along with people. ICQ is developed by users and changes with them. We wanted to supplement our thoughts on the development of the product with an outside view, to hear fresh thoughts and ideas from both users who decided to change something directly and from people not involved in the product.
')
Video calls have long been one of our key features, and we continue to think that something else that is useful and interesting can be offered. We, of course, have a lot of our own solutions to the tasks of the competition, but we will keep them secret and open them in the next big updates.

Jury

Evaluated the work of designers and managers of ICQ. Pavel Loutsker and Konstantin Rubtsov (product managers). Kolya Kuchkarov (designer) put a lot of minuses, Joe McGreen (designer) spoke about logos and walked on the trolls, and I, Alexander Smetanka (product designer), took over UI / UX and other things. The organizers of the contest Vera Bondareva (designer) and Dima Pleshakov (product manager) helped us in the assessment.

Works

Of the 88 designers, about half got into the task. Nontrivial solutions offered about 20 participants. The most daring ideas in one form or another are found in other services, but there were also fresh finds that pleases.

Of the minuses: sometimes it is not entirely clear in the concepts that are interesting in appearance what the elements on the screen mean and, unfortunately, this is not explained in any way. Of course, there were those who copied the current design by changing colors and icons.

As a result, we analyzed concepts for individual interesting ideas, trends in video communication, interface techniques, evaluated the approach to the problem and the presentation.

Nontrivial video message

The leaders were ideas that went beyond the usual interface of video calls (both developed concepts and some interesting mechanics).

Danial Siddiki offered “Moments” - a general video tape, from which you can go to communicate with the author. Well focused on the button in the tab bar, which starts the camera.



From the disastrous minuses - access to viewing "Moments": it is faintly visible, located far from "under the finger" as we would like. There is an excessive obstacle in everyday use “Enter the name of the moment”.

Alexander Kochevanov also made Moments, but in a different format: they are available from a profile, as well as on an interactive map. Under the moments, you can leave comments.



Misha Bilenko passed the usual scenario of calls by quickly turning on the video during a chat.



Yarik Bright wanted to record calls and broadcasts.



Oleg Mishkorudnyy created a selection of images taken during the call, which comes to the chat after its completion.



More than anyone else, the favorite was the favorite Russian Design Cup Denis Shoomov . I did a lot of things, starting with a smart presentation and ending with animations. In the case of the video offered a number of formats.



A fragment that allows you to instantly take a video of a moment with a duration of up to 10 seconds and send it to friends, interlocutors, or save to your video stream. We are familiar with video messages, but the smart and nyashny interface gives this process a special charm.



Butterfly - a space with infinite (whatever that means) video chats and the ability to sort infinity.



Pulse - stream of broadcasts with reference to places, themes, events, cities. The pulse is dynamic and tied to the timeline. Cool stuff.



Video contests.

Broadcast

The popularity of streaming is gaining momentum. New services that allow streaming are growing like mushrooms, and the existing ones acquire such an opportunity. About a third of all works provide for the ability to broadcast with simultaneous chat over video. Design copies applications of this type.



The translation option, which differs not only in the color of points, was suggested by Dmitriy Ivanov . In his version, the broadcast is conducted in SplitView mode with two simultaneously enabled cameras.



Denis Shoomov made a showcase similar to the Apple Watch interface.

Video call

With video calls, the same story as with the broadcasts, but in this case, the courage to shake the clamps of the participants turned out to be a little more.

For example, some have tried to brighten up the communication with video effects.

Alex Ovs and Vladislav Solomaha added emotional masks to calls and messages



Danial Siddiki offered hearts and content viewing.



Pavel Zametniy allowed to draw during the call.

Video chat path

The most obvious way of positioning a product is through an interface: tools in easy accessibility and icons with clear associations. In our case, this is a camera: if you select it, put it in a tab bar, it becomes clear what this application is about. This trick has turned almost half of the participants.

Arsen Kolyba with a nostalgic lamp design turned out to be the most difficult .



Ico Maker with gigantomania still profitably carried it to the chat.



Very simple and pleasant at myinterface , tidy at Danil Siddiki and Vitaly Tamashin .



It became more difficult because of the icons and details of Dmitriy Ivanov , Kirill Yarovenko and Pavel Karpov



There were more games with the transformation of the logo into the camera and control. So did

Vova Sharapov and Edward B.



Another obvious trick is putting the camera on the chat or contact list. They were used by Dmytriy Kravchenko Pavel Anpleenko Khokim Sharipov Alex Martinov Alex Kurlaev Ivan Demenev .



Fliqle , like Pavel Anpleenko above, also added a camera and defined the space around the icon, making it a rather large button, which is good.

The main trick is that the chat unfolds directly from the card. But what will happen when the keyboard opens, we have not learned.

The chat list in the form of cards is not the only idea, but on a dark background and with colored stripes it turned out quite stylish.

Little about cards

By the way, about the cards. They are in trend, they are used a lot and in different ways, not limited to the fact that they prescribe the guidelines for material design.

Sascha Yeryomin perfectly highlighted the new inbox and used the cards in the chat. Looks like a game!

By the way, he is one of the few who did not make the red button during the call (more on that below).



Slava Kornilov used the cards everywhere, live chat and broadcast were especially attractive.



Angela Rybina used flashcards to view people and generally made an interesting search.



Kirill Yarovenko , Fliqle , Alexander Kochevanov and Pinkten used the cards in the calls.



Ilya Gruzhevski filled out calls and broadcasts with cards, it turned out whole and nice.



Evgeny Pershin used the cards in the calls and the chat windows.



Andrei Inozemtsev used the technique in the presentation and effectively designed the live-display windows.

Entry field

Changing the input field can also be a profitable solution. The most courageous could play on it.

Vladislav Mikhailov made a call near the input field.



Several participants immediately added a camera with a corresponding icon to quickly send video messages: Slava Kornilov (flying outgoing bubbles with neon lights!), Astract (andr.novojilov) and Vyacheslav Nazarov .



The most interesting with the input field created Denis Shoomov . He allowed to do anything from the input field and (attention!) Did not create the second row of buttons below it, but completely removed the standard text field by making a smaller button out of it (the input field is, in fact, a button, large).

Red tube

The icon of the tube in the modern world deserves a whole study and dissertation, as well as a floppy icon. The phenomenon of the red tube is amazing: three quarters of designers have focused on the end button in video calls. Even in the concepts filled with interesting solutions, this moment was not beaten in any way, as if they had completely forgotten about it.

Most of the solutions are standard - a tube in a circle, in the middle or on the edge, surrounded by controls or without, with minor differences.

For example, Nikita Kokarev , Roman Kryzhanovskyi , Sergey Korneev . Well, you understand.



Bogdan Pavlik , Extremal and Nick Voloshyn have made a brilliant video call end.



Alex Bogomazov invented a non-trivial assignment of the interlocutor to the edge of the screen, but did not reinvent the tube. Now this is a champion tube!



Even in fairly loaded solutions, the tube is in the center of everything - so in Grisha Uglanov .



Nazar Moravskyi acted differently and raised the end of the call to the upper right corner, it may already be far away.

Aesthetics, entertaining details and space

Vitaly Tamashin successfully placed accents, in general, it was easy and colorful.



Slava Kornilov did everything nicely and polished, but the logic suffers. An interesting move with a gradient when choosing an action with a bell, but it is unclear how it works. It seems that brushing can change buttons.



Kitya Toropovsky pleased with the incomprehensible unicorns in space. First, it is beautiful.



Igor Kus proposes to rotate the drum to find dating.



Leon Bakadorov added an interface to photos. I found a lot of beautiful photos, different!

Alas, 99.99% of users do not have such beautiful photos. You should always try to work with real content.

The tin

Tab bar with eggs from Sasha Red .



Pavel Anpleenko conquered our minds.



Ninja Swipe from King Swipe Daniil Antipin .





Ihor Mikhailov ...



Alex Kurlaev



Edward B. reminded all the past! By the way, many of our users no longer know what it was, they are young and young.

Logo

Many guys carried the idea of ​​a video message to the logo. Hence, the expected metaphors - the camera, the Play button, the lens and the aperture, crossed with a flower.



Nostalgic diaphragms from Vyacheslav Nazarov and Den Kulinich .



I would like to mention designers who tried to do something quite strange.

Ivan Baryshev , Alexander Dadaev , Alexandr Pesenka , Vadim Zlygastev .



And our undisputed favorite Pavel Anpleenko . So the flower has never flown!

Interesting feed

Alexander Kochevanov was surprised by a detailed description of the analytical process. I compared competitors, singled out key functions, described the structure, justified the proposed solutions and made a prototype . Read it, it's interesting, but the title of the post is audacious!



Eugene Kazakov bribed the visual approach to the concept.



Denis Shoomov did everything that was possible, and even more: cool animations, a good promotional site, described everything as it should. Umnichka, in general!



The most colorful presentation was made by Andrey Kravchuk . Thrash animation and 8-bit notes did their job and won the hearts of the fans of “ Pollitrovoy mouse ”. On style! Fitz approves.



www.facebook.com/dlyareganasaytah/videos/1710084605871808

Winners

We carefully reviewed all the work, and then again, each member of the jury had to rate it given the ingress in the task, the thoughtfulness of the interface and aesthetics.

Favorites identified unequivocally. We didn’t just give up and more than once questioned their decisions within the team, but they held out.

1st place: Denis Shoomov

Very large-scale and qualitatively approached the matter and did a great job.

The task of making an instant messenger with a bias in the video is brilliant. Denis has come up with many interesting formats in which one way or another video messages, streaming, video calls and the only one that made a unique design appear. We were pleased with numerous interface solutions such as rethought input in the chat, seamless video calls, cool icons, unusual list patterns. The main thing is that the concept is organically entered into the format of a classic messenger. At the exit, we get a middle ground - this is not the space in which to understand and not a dull sample application.

Special attention deserves a luxurious website presentation . He carried all the ideas, laid out on the shelves, accompanied by wonderful animations, icons, gifs. The fire!

Minuses

We decided not only to praise the winners, but also to criticize a little, they deserved.

There are cavils and shortcomings. Brave design is definitely beautiful. But it is important not to overdo it with courage. Retrogrades can call the application too fun and windy, but it can simply scare someone off. You can find fault with the metaphors of some icons - you need to seriously work on them. There were no particular problems, but sometimes I had to figure out what this might mean. The most surprising flaw is the complexity of sending a fragment. A quick start of shooting and a catastrophic process with several iterations before the video message in the chat. Percentage “loading” negated all efforts. For everyday function, it's a failure.

2nd place: Danial Siddiki

Detailed and fully functional concept. The moments, the way they were created and viewed, the broadcasts and the emotions in the calls all right now can be quite simply embedded in the current client. I liked the idea of ​​petals-entertainment on the logo.

Minuses

The interface is designed in a too classic style, as if it was a test task, and not a competition to create a concept.
Complication in the way of simply creating a moment in the form of a sentence to enter its name. The logo during the call is completely wild and incomprehensible in functionality thing.

3rd place: Misha Bilenko

Misha took one important problem, realized it very correctly, described it and perfectly solved it. Erased the border and made a seamless video chat. It can be seen that first of all I was thinking not about choosing the color of icons, but about the practice of communicating in a chat.

Minuses

You can find fault with the questionable location of the controller, including video in the chat. The disappearance of a part of messages during a call is quite sudden and discouraging.

findings

Works turned out to be surprisingly a lot. It turned out that even collecting them is not easy: they were sent to the competition not through a rebound in Dribbble. As a result, we collected work from various file hosting and services. It seems that the mechanism of the competition was not as simple as it seemed. Thanks to energetic Yura Vetrov for help in organizing the competition, he smoothed out many corners.

Evaluation and analysis of decisions took a huge amount of time, many judges had to deal only with this. Most of all it took to systematize the ideas proposed in the concepts and to assess their adequacy in relation to real tasks.
Will we still conduct such experiments? While the question remains open.