"Yandex.Money to enter your application is not interesting to make stonibut"
Somewhere inside the Yandex.Money application, the "Suggest an idea" button is hidden. People click on it and write about their pain, offer help or ask for money for the incredible new opportunities that they have already come up with, it remains only to pay them a hundred thousand.
Often the guys with this button asked to change the design - in whole or in part - to make it better. We read these letters (I am in the mornings for coffee) and see that the dark theme is asked more often than a custom unlock, but less often than a photo of a beloved cat on the main screen.
And once we decided to get involved in the redesign - because of outdated navigation, difficulties with scaling and for the sake of those who sent us feedback, of course.
A post about it, and also about how we made our CSS on Swift.
- Why do you need a new design, was it normal?
People use Yandex.Money differently: they buy games on Steam, choose discounts or pay a QR code for a housing and utility services once a month. And before that, all these buttons needed a long search.
Navigation was the main reason for the redesign - it turned out that it was difficult to build in something new. A few years ago, the team designed the application and did not think about a dozen products available from the inside, as well as many storefronts, stocks and various other things. The main task was to predict possible points of growth of the product and do well in those places.
Okay, new products could somehow be added somewhere - but difficult to promote due to the fact that there was no system for informing users other than push notifications.
Well, by the way - now it may seem strange, but the balance and information about the wallet were not always on the main screen. On Android, this section lived in the sidebar, and on iOS, in the section with information on the second tab. Users opened the application, did not understand how much money they had, and were frustrated.
This was shown by UX-studies, so now on the main screen you can take out three frequently used actions and put money to parents on the phone in a couple of tapes.
Class placer
- What are UX studies?
New design solutions need to be developed not from the head, because product hypotheses must be tested on real users. It is important that these are not the same people who are working on the application - regardless of the role.
This is how the first approaches to the new interface looked
We started with small usability testing for 6-8 people, even at the design prototypes stage. This makes it possible to quickly run in new solutions without involving developers in the process. So the solutions are either discarded, or improved and reach the beta version - at this stage we show the application to a large number of people and ask to share feedback.
This is important because a small group sometimes skips some scenarios or does not understand internal terms that seem obvious to us. Now, when the updated application is available to everyone, we finish the priority scenarios for users and collect even more feedback - the button with the ideas works, the reviews in the pages too.
- What is the difficulty of mobile app redesign in 2018?
Microservices save the universe, components become more technological, Swift and Kotlin appear. But one thing does not change - if a large application is seven years old, then there is an old code that is hard to maintain. In addition, the complexity is always that you need to do a lot of components in a little time. And by the beginning of the redesign, newcomers appeared in our team - they can understand how things work for a long time.
Therefore, the redesign affected the processes in the teams. A library of components has appeared on Android and iOS, each of which has a responsible designer and developer. These two prepare the elements and transfer them to the general library, and from there everyone else takes something for their projects. This approach does not give developers and designers a space for amateur performance - everything is already invented before them. After completion of the design project for Android, the designer sends it to the responsible iOS colleague. He conducts a review, adds a component to the library and synchronizes with the main developer.
It looks like a library from afar. For those who want to look closer - link .
The simplest analogy here is the constructor, in which you cannot add your dice and hope that you can play with them normally.
Still in the application there are several screens from the past. We plan to gradually update them and achieve a solid picture, and elements that work poorly, redo them from scratch. For example, users often lack information on operations in history, the status of their wallets, or how the Favorites work.
This is all a lot of work, and often the redesign of some library elements has a strong effect on other components of the application, so we move in small steps and try now to devote more time to working out and testing such things.
- And tell us more about the library, very interesting
We were preparing to redesign the whole block - ruthlessly smashing the application into buttons, lists, blocks and their states. And after that they made a library of main components, described their states and behavior, gave examples of use. Along the way, we found several screens needed for the same, but made at different times and in different styles - and got rid of them.
Demo app, no more, no less
All new components are checked in the demo application - this is how you can review everything, stick it in, and then meditate on it without making changes to the main application. We collect the state of all elements, their settings and exact names, so that the designer and the developer look at it in one place and see the same thing. It helps to speak the same language and quickly find errors.
- Have you really made your CSS for Swift?
The guys with the browser have BEM, CSS, and all the other versioning magic. I wanted something similar, only natively and on iPhones. Because every pioneer knows that in mobile development you first draw a red button, and then draw the same button again, but green, and on a different screen.
As a result, we have developed a system of cascading style sheets for components, so that everything is flexibly customized. Now the button is not a solid element, but a set of blocks: text and its style, shape and size, color, and on top also a set of states. The entire application now consists of elements that can be customized for any task.
The same block, which is decorated in different ways
If you are suddenly familiar with game devs, then most of all it looks like the prefabs in Unity - if necessary, change the design of one button, and the others will change themselves throughout the project.
- And yet, why not put a photo from the gallery of the phone? This is a couple of lines of code.
In short, because it is impossible to predict which picture the user will choose. In the universe of perfect design, buttons, icons and texts should automatically be colored, depending on the color of the photo. The user can download just a white background, and then it will be like this:
Properly adjusting the colors for a long time and even longer to test, and to risk the appearance of the application immediately after launch, we really did not want to. It is better to use a small set of images after the start (by the way, our designers shot some of the beauty), collect reviews and add features to the automation. Such a plan.
Customized elements will help all of this - it is quite simple to paint the elements in suitable colors, the main thing is to determine the necessary color pairs based on the user picture. And still different blocks of the application can be built in to our partners and it is easy to paint them in corporate colors.
Short conclusion
We believe that all decisions made are the first step that will help us quickly scale and change the product, based on what users and businesses need.
Users will not notice very many changes, but at this stage of the redesign we have prepared the tools, components and team to quickly change the functionality and visual style, if necessary. We are ready to quickly solve user problems, launch new products and do even more good.