What are the steps involved in Redesigning an App?

Example and Story || Copying is good for your UI, but mix-n-match with your own flavor gives it a better taste. I am not the only one who says this, Visit here and here. It offers the best way to stay in par with current industry standards, and be consistent. Users love it!

Note: This project was done on March 2017.

Upgrading is an inevitable and important part of IT industry. We all start at Beta, and grow up to version 1.0, then move up towards better. Being a UI designer, we should be on our toes to keep our favorite apps up-to-date with current industry standards. Another IT industry standard is to stick to the process. Process helps us cover up the whole scenario, and saves us from embarrassing miss.

In this article I will give you a walk through the steps I usually take while redesigning an app. My examples will revolve around a new budding and bubbling app called iDecorama. In their own words, iDecorama is a one-stop resource guide for homeowners to plan their entire home renovation journey. Whether somebody is looking for design inspiration, unique products or hiring a professional to renovate or decorate their home, iDecorama has everything they need to build their dream home. It is also the largest networking platform for architects, interior designers and home improvement professionals to share their work and keep their followers updated on latest projects, industry updates and market trends.

Let’s redesign it from the Beta version:

1. Use the app as an user (Get feedback)

Redesign works on feedback, if you don’t have available feedback, go with giving one yourself. As an extension you may ask your friends to give you some input as well.

Example: I downloaded the app, and started using it. I kept it with me for around a week, looking at it from a customer’s point of view. (I am a big fan of arrangement and decoration, myself.)

2. Make a Sample fresh design

Design the app as if you are making it the first time. For this we need steps, which I have mentioned in my previous article.

As per article, the steps are:

• Analyzing the idea: We can get the requirements from the existing app.

• Making wireframe: Let’s create the wireframe by our possibilities column.

• Creating illustrations, and icons.

• Designing prototype.

• Creating working prototype.

Let’s go till making wireframe step for now.

3. Look for suggestions (and Inspirations)

Find out the similarity of the app to existing happily blooming apps. Then look towards successful not-at-all related apps. Find out which functionality makes it unique and successful. Look for what you can use, and mix-n-match it with functionalities from other apps.

I decided to club the offerings under categories on the home page. So the user knows all options that the app has to offer.

Example: Paytm is one app that clubs a lot of stuff on the homepage without making it clumsy and cluttered.

There are two tricks here:

i. Use icons in place of pictures, and give proper divisions and space.

ii. Don’t use a scrollbar, put icons in such a way that it shows half icons on the direction you want the user to scroll. (See ‘Cars & Bil..’) User will see it and realize there is more on the right side.

Now let’s look at the Jugnoo’s Auto booking screen.

That middle action floating-button is used to tell the user what is that they need to do. I am going to combine it with the lower action bar of Paytm. Thus, giving the user three important actions on the homescreen.

This design looks similar to Paytm, and is inspired by it. But it works neither like Paytm nor Jugnoo.

(All icons are designed by me, and pictures are taken from iDecorama App.)

4. Give it a function (and your own flavor)

As I mentioned above, the design should let the user know all options that the app has to offer. Thus, the page acts as filters. It allows the user to choose from the list and proceed to the feed post-filter application.

This takes the user to the page which only displays the products defined by the filters. This feed page should allow user to edit filters at any time, and sort the feed in multiple ways at any time.

This is how it will work:

A big thanks to Paytm, Jugnoo,and Amazon for being such great UX!