The challenge
Redesigning an app is always a challenge. In this case, the challenge was improving the UI of the app with a concentration on creating a better category layout and better navigation. Also, one of the biggest challenges was how to present so many products which can have up to five subcategories.
The idea
The idea was to rebuild an old app from scratch. The goal was to make it modern, easy to use and improve existing features while adding a couple of new ones.
Research
A mobile app redesign isn’t meant to be subtle. It’s meant to be intentional. It’s meant to be transformational. It’s meant to deliver a lasting impact on both the business and the brand. That is why our research was intense in order to deliver the best result to our clients.
Persona development
It is a rare occasion in user experience to have such a wide range of user personas. In this case, we already knew who our users were, which is a range from teenagers to people in retirement. This data greatly influenced the research part of mobile app development. Another important information was that Nabava.net website reaches up to million visits
Information architecture
Information architecture was one of the most important things we changed. The menu was stripped of one item. It was no longer necessary for categories to be a part of the menu because the information architecture of category items has been sufficiently changed.
Design
When redesigning an app, some elements are already predisposed. For example, the brand colour is dark blue, which is why it is the accent colour in the new version of the app. The outlined icons were used to give the app a modern and minimal look because, in the end, the main focus is on the products and the offers.
Offers screen
The menu for categories and subcategories needed to be intuitive and easy to use. Here, we reduced the number of screens from 4 to 1 because all categories can now be accessed from the same screen, but not to create clutter, if 2 subcategories are opened, the user cannot look through the main category until they close the other ones.
Category menu
Offers are the main functionality of Nabava.net. In order for a user to find the best one, they needed to be well structured, with all of the info available at one glance. What we did was making sure that the user gets all of the information, but for them to not look too cluttered, that’s why even in this case, the tones are light blue and white so the design can breathe and for all of the elements to be visible to the user.
Development
The entire app was developed in React Native, using React Navigation because of the platform’s smooth animations and gestures. The most challenging part was having up to five product categories and subcategories sections which we solved with the recursion component.
Solution
The solution was intuitive navigation with a cleaner and more mature look. The price list and wishlist don’t have to be refreshed anymore for an item to show up. Empty states now have a more interesting look and invite you to interact with the app. Offers from online stores are opened in-app and users can enjoy browsing through the new and improved category list.
