How to modernize UI and UX?
The demand for UI/UX modernization is growing these days. The reasons for it are quite clear. Today there are a lot of apps that function well but look bad. Let’s admit that if the software was built 15 years ago, there are low chances that it looks and feels pleasant according to modern standards. In this article, we will explain our approach to UI & UX modernization and share our vision on how it should be conducted.
Steps of UI & UX modernization
- We always start with a business analysis which also includes considering strategy, risks expectations and other important issues. We also advise you to create a navigation map, organize brainstorming, to inspect and remove all obsolete forms. As a brainstorming tool, you can use Mindmaster, Microsoft Visio or Draw io.
This stage should be also continued with the preparation of a components migration table and project management tasks. Building your components migration table, you will see whether you have all your components for the up-to-date Delphi version that you are going to use or you will need to build some new ones. - Then we go on with the wireframing stage (this step can be optional). Here you need to understand the scope and the scale of work, what you will want to change, what your business and clients want to change.
We advise you to create prototypes not for all forms but only for the main 20-30 ones. Among the tools that are usually used, we can mention HotGloo.io, inVisionApp.com, Axure RP, Ms Visio, Photoshop and others.
After you wireframed your application, you have to show it to your product owners, to get and analyze their impressions and comments. - The third step is design. After wireframing, you will have only unclear boxes, squares, and forms, but if you want to get a beautiful application, you have to design its look. To begin with, you can take 15 or 25 main forms and ask an artist to draw your UI and styles in Photoshop or Figma. However, you can also give your wireframes directly to the developer and UI will be up to him.
When the design is ready, we recommend you to approve colors, styles and concepts with your team. It will also be a good idea to show the concept to your existing clients to get their feedback. - And then when you are satisfied with your design, you can proceed to the development and implementation.
We have to perform components migration or custom implementation, this is what developers do. Usually forms migration or implementation is conducted in parallel with the code refactoring. And there is no other way if we are talking about an app that was created 15 years ago. It’s good practice if we are redesigning applications, good practice to divide logic from the user interface. - The final step of this modernization can be UI testing. Today there are different tools for this.
As you see the UI/UX modernization process is not a quick one. It may take months and sometimes even years. It includes many steps and requires serious preparation and a well-developed strategy.
However, it’s also very important to be ready for some unexpected pitfalls and challenges. In one of our next articles, we will explain what pitfalls you may face in more detail. It is practically impossible to predict the exact timeframes and expenses. And it is an absolutely common thing. You shouldn’t get disappointed if something does not go the way you expected.
If you have any questions regarding software migration or modernization, please feel free to contact our team and share your pains with us. We always deeply analyze each case individually as we know that there are no “fit-all-solutions”.
And if you have already started your app modernization, good luck!
