"Yandex.Money in your application to enter uninterestingly make shtonibut"
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 devised, it remains only to pay them a hundred thousand.
Often the guys asked this button to change the design - in whole or in part - to make it better. We read these letters (I'm in the morning for coffee) and see that a dark theme is being asked more often than a custom unlock, but less often than a photo of your favorite coteyka on the main screen.
And one day we decided to get involved in redesigning - because of the outdated navigation, the difficulties with scaling and for those who sent us feedback, of course.
Post about it, and more about how we made our CSS on Swift.
The simplest analogy here is the constructor, in which you can not add your cubes 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 seamless picture, and elements that work poorly, remake from scratch. For example, users often do not have enough information on transactions in history, wallet statuses or how Favorites work.
This is all a lot of work, and often the redesign of some elements of the library strongly affects other components of the application, so we move in small steps and try to give more time to working out and testing such things.
- And tell me more about the library, very much interesnenko
We were preparing for the redesign for a whole quarter - ruthlessly broke the application into buttons, lists, blocks and their states. And after that they made a library of the main components, described their states and behavior, gave examples of use. Along the way, they found several screens, needed for the same, but made at different times and in different styles - and got rid of them.
Demo application, no more, no less than
All new components are checked in the demo application - so you can review, poke, and then meditate on this without making changes to the main application. We collect the states 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 one language and find errors faster.
- Did you really make your own CSS for Swift?
The guys with the browser have BEM, CSS and all the rest of the verstal 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 again draw the same button, but green, and on the other screen.
As a result, we developed a system of cascading style sheets for components, so that everything can be flexibly adjusted. Now the button is not a solid element, but a set of blocks: text and its style, shape and size, color, and on top is also a set of states. The entire application now consists of elements that can be customized for any task.
One and the same unit, which issued differently
If you are suddenly familiar with the game, then most of all it looks like prefabs in Unity - if necessary, change the design of one button, and the rest will change themselves throughout the project.
- And yet, why not put a photo from the phone's gallery? This is a couple of lines of code
In short, it's because it's impossible to predict which picture the user will choose. In the universe of ideal design, buttons, icons and texts should automatically be colored, depending on the color of the photo. The user can just load a white background, and then it will be like this:
The correct adjustment of colors for a long time to do and even longer to test, and risk the appearance of the application immediately after the launch, we really did not want. It is better to use a small set of images after the start (by the way, part of that beauty was filmed by our designers), collect feedback and add the feature to the automation. Such a plan.
All this will help customizable elements - paint the elements in suitable colors is fairly simple, the main thing is to determine the desired color pairs based on the user's picture. And also different application blocks can be built in to our partners and easy to color them into corporate colors.
The short conclusion is
We believe that all decisions taken are the first step that will help us to quickly scale and change the product based on what users and businesses need.
Users will notice not a lot of changes, but at this stage of the redesign we have prepared the tools, components and the 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.