Nabava.net

Nabava.net is is an app that has the quickest way of finding the lowest prices for half a million products from over 150 online stores. Find your product, check the price and choose the one that suits you the most.

Nabava.net

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..

Mobile UI idea

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 are users were, which is a range from teenagers to people in retirement. This data greatly influenced the research part of the mobile app development. Another important information was that Nabava.net website reaches up to million visits with around 500 thousand users.

One million users

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.

Navigation bar redesign

Design

When redesigning an app, some elements are already predisposed. For example, the brand color is dark blue, that is why it is the accent color 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.

Category menu

The menu for categories and subcategories needed to be intuitive and easy to use. Here, we reduced 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.

React Native Category menu

Offers screen

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.

Content editor

Development

The entire app was developed in React Native, using React Navigation because of the platform’s smooth animations and gestures. Most challenging part was having up to five product categories and subcategories section which we solved with recursion component.

Development technologies

Solution

The solution was an 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.

Solution

CoreLine scope of work

01

Research

  • Competitive analysis
  • Persona development
02

Strategy

  • User experience
  • Information architecture
03

Design

  • Art direction
  • UI design
  • Visual moodboards
04

Development

  • Frontend development