How a Redesign Can Improve Key Product Metrics

During its life cycle, any mobile application or web platform goes through several design changes as a part of general rebranding campaigns. The first several iterations before the initial launch of the product are never seen by users. The final appearance of the UX and UI is decided by the product team, which relies on competitors’ market research and some internal user tests.

When it comes to entirely redesigning an already existing app or platform that has been on the market for several years, the stakeholders must have a legitimate reason for doing so. Transformation of the product from one thing to another, changes in mission and/or vision, and the desire to differentiate yourself from competitors in the market are all potential reasons.

In the case of the product I work for, the decision to redesign was triggered by all three of those factors at once. So the team had to pack many things in a new product design. This experience proved to me, once more, the importance of perceiving redesign as a responsibility and an opportunity.

Redesign as a Responsibility

The redesign of Promova was not just a planned upgrade of the existing language-learning app. In fact, with the updated naming and design, we had to present a completely new product to our loyal and potential users. Doing something different from the competitors and breaking the mold in the language learning market is a huge responsibility. That is why we hired a design bureau to create our identity starter pack.

The new design approach was tested only in static, so no one fully realized how it would be perceived in the interface when our students started using it. As you know, users spend 99% of their time outside of your product, so the interface should be built on generally accepted patterns, and it's better to avoid experimenting with it. But our path was different.

It's also worth mentioning that people don't like change. This hypothesis is proved every time Instagram releases an update. Users express a lot of hate about updates and write that they will not use the app. However, over time, they adapt and accept the changes.

In the first UX and UI development stage, we tried to follow the exact things the design bureau suggested. But the more we scaled up the idea and added screens, the more we realized that the design was still complicated. The screens were overloaded with colors. Cognitively, this made it difficult to perceive the content and created a sense of confusion. Interface design should be a kind of guide in learning and should ideally help the user, rather than interfere with their learning.

That's why we had to make several iterations to simplify the design. As a result, we removed the blue cards and gradients in the answer options and abandoned the idea of fitting all the brand colors into one screen. We set a goal to reduce cognitive load and improve the hierarchy.

Always try to test your solutions by scaling up your ideas and adding screens. What works on three screens may not work on thirty. It's better for you to catch that early to fix the problem and save your precious time. Start testing your new design as early as possible. It's better to use all methodologies: corridor tests, hi-fi prototypes, and moderated usability testing of ready-made pieces of functionality. Be sure to get everything together before you have everything together.

It was decided to start implementing the new design on the web because it has a shorter and faster development cycle. This decision allowed us to make mistakes and test different design options at a lower cost. So if your product has both mobile app and web versions, I recommend putting the new design into practice on the web first as well as creating all the components at once. This will help you make changes more quickly.

What eventually helped us to bring order in design was the indentation between blocks. One of the main features of our branding is that the blocks fit snugly together, building a solid composition. But in the interface, we divided these compressed blocks into groups according to their function. So, for example, in cards with quizzes, the question blocks are well separated from the blocks with answer options.

I strongly recommend maintaining the integrity of the design. When designing separate pieces of functionality, there is a great temptation to add local features or additional gradients. But all of that will eventually negatively affect the integrity of your product.

Redesign as an Opportunity

The redesign should be seen not only as a responsibility but also as an opportunity. Why? Simply because you get a chance to work out the shortcomings of the previous design, test bold solutions, and develop an optimal design system.

For instance, we at Promova decided to improve the lesson feed in the new design. Since our primary identity tool is the form, we wanted it to be a sort of tip that will help recognize the lesson type. Previously, all bite-sized lessons looked the same, with only a tiny icon signaling their type (vocabulary, grammar, speaking). In every interview, we saw that people did not know about this. Considering that, we coded each type of lesson with its unique form in the redesign. Usability tests have shown that the second time people use the platform, they can understand which block corresponds to which type of lesson.

The redesign was also an opportunity to work out the hierarchy and accents. The previous design was very modest, so all the UI was about the same size. After consulting with the content team, we enlarged all the illustrations inside the lessons and used typography to shift the emphasis to key things for learning, such as the number of mistakes made in a lesson or the list of words learned that day.

Another challenge was to preserve our huge heritage of original illustrations. There are several thousand of them, so we had to integrate them into the new design. Keeping in mind that redesign is an opportunity, we spent relatively little time with the illustrators removing the colored backings from the covers, "pulling" the illustrations out of the masks, and cropping them into rounded shapes. As a result, we got clean and beautiful covers placed directly on the color block.

We also managed to implement a single animation principle throughout the product. It was born out of experiments with the icon — we wanted to communicate the personalization of learning tools to the user through "springy" transformations of the blocks. We incorporated this principle into all the animations, and the animated icon eventually became a loader.

The redesign was also an opportunity to implement the principle of a seamless transition between platforms. The interfaces on the web and app versions are almost identical so that users can switch between learning environments without stress.

This was achieved thanks to well-established communication with our developers. So talk to your engineering team a lot during a redesign: it will help you learn about technical limitations and "sell" the design to them so that they can implement it with more inspiration.

Finally, I would like to discuss the onboarding redesign, as it is the quintessence of all the above-mentioned techniques. We tried to make onboarding as playful, entertaining, and communicative as possible. As a result, we created a sort of game in which everyone collects their own unique set of icons by answering questions. Then we add some magic, and voila: your personalized course is ready. This is a perfect reminder not to forget that design should evoke emotions. Think through the user's emotional peaks, and decide at what stages you will praise them, at what stages you will support them, etc.

Results

In general, the redesign of Promova allowed us to be bold and try something we had been putting off for a long time. We did something different from our competitors. It was a risky decision regarding how the product would look. But as we can see now, users have no problems using the app or web version. More than 170,000 people used the newly redesigned platform in just the first few days.

What metrics did the redesign improve?

1. The average number of open lessons per user increased by a factor of 2.

2. Conversion to completion of the 5th lesson increased by 30%.

3. We received an increase of almost 20 relative points in the completion of onboarding.

4. The average user session duration increased by 30%.