Re-designing the Hathway Cable & Datacom App

Disclaimer :

This redesign is in no way associated with Hathway Cable & Datacom Pvt. Ltd. Its just a personal design exercise. I actually starting self-learning UI/UX design and took up this personal project to help my self to improve my skills.

Check out my other personal design exercises at www.dribbble.com/Biswadeep

Why this redesign?

When I was in school I used to go to Kolkata every year during my summer holidays and I used to see Hathway set-top box in my Grandma’s house and even in a lot of neighbours house and that’s what the early memory I have of Hathway DTH and broadband services and now I have been using Hathway broadband for about 2 years but I had been always facing a lot of issues with customer care service and with the app also which is pathetic actually still pathetic and the experience was always been a nightmare for me. I always want that Hathway should simplify this process and make the process hassle-free but I didn’t saw any effort from their side.

There are many instances I cannot log in into the app. The app main onboarding page is very confusing and it does not guide through the user where the user wants to go. And I always feel a bit scared of using the app to pay the internet bills because the app never looks secure and trustworthy. Lot of time I had tried to change the plan of my broadband connection but the plan page and the way the plan Hathway kept is quite confusing.

Every single month I come to this situation where I have to go through this and tolerate this to make the payment where it doesn’t even redirect me to google pay rather it gives me a time frame to make the payment and then again trust issue arises again.

I always felt that this app really need a redesign for sure and there the redesign comes in my mind and I started researching about it and finding the pain points. So I thought to give a shot to redesign the app by myself. And I really thought that it will be a great opportunity for me to get into this process of design and understand what are all things it needed to make an app.

The old design of Hathway app

Pain-Points in the current app

• No login alternatives are given. There is only OTP option there to log in
• Data plan page is very cluttered and daunting.
• Two apps needed to make a payment (Ex: Hathway to Google pay app)
• User can’t even see the usage of data properly in the app, it’s so confusing.
• User can’t change the plan even if there is an option.
• None of the features works.
• Bad UX and poor visual design.

Research

The research was done with 3 people through phone call and I referred through the internet and got several reviews which I got from the play store to gain insights on the problems faced by many customers.

From the review, I got some of the information:

• Most of the features and option does not work.
• And most or majority talks about the customer service which I think is a very big problem in hathway services

So, actually, I can't do anything with the customer support but I make sure that the most of the necessary features works and they don’t have to reach customer support by enhancing the experience and UX aspect of it so it will be easy to retain the customer.

Current User Flow

Objectives

As I have considered the user flows, user reviews and the pain points I have pointed down, I found a lot of issues and problem statements that I could work on. These are the high-level objectives of this case study.

Design Objectives

• Maintain a proper direction of user flow.
• Reduce the clutter in payment and other features page.
• Make the user payment journey easy and less confusing.
• Remove unnecessary stuff from the app.

Business Objectives

• Reduce the load on customer support by adding up the chatbot.
• Improve the user experience to retain the customer.

Let’s go to the redesigns and compare it with the old ones.

Problem

The old UI of the home screen doesn’t give you proper information about how much data you have consumed and how much is left. And there is no offer and ads for the offers I the home screen which may help the customer to retain. And personally, the visual characteristics of the design is so annoying and it doesn’t make me feel personal to use it. This app UI may make the customer lose trust in this brand.

Approach

My approach is to make it visually appealing first then make it sense to the customer so that they can use it with ease as compared to the other market players and there should not be any problem towards the information architecture for the customer.

Final Solution

• I have redesign the home screen in a way so that the user can view each and every information properly and the user can be guided easily by the information architecture I have put here in it.
• I have put visually appealing icons and buttons which will give even more information to the user and eventually helps the company to retain the customer.
• I have used the colours in a gradient form so the colour little pop-ups to the user.

Problem

In the old design, the payment card is quite confusing in my case and I realise that the options which given as payment mode were so limited and very confusing (Ex. Its written payment with PayU or TechProcess or UPI). User can understand UPI at least but what the hell is PayU and TechProcess! it’s very easy to get confused if you are not tech-savvy. We are so used to the other payment modes which are offered by food or e-commerce companies these days.

Approach

My approach was pretty simple in this, I just want to make it simple and easy so that any age group can use it even you are not a tech-savvy person. The design should be in a manner which can guide them easily with a lot of option.

Final Solution

• I have designed it very simple like any payment gateway so that the experience will be good and simple and not take so much valuable time of the user. The main agenda of an app is to make the user life easier.
• I even introduced a hathway wallet so that the user gets the auto-debit feature in case the user forgot to pay.
• Now it’s less confusing and it will make the user feel more familiar with the payment modes.

Problem

Whenever I used to see other plans in the app and thinking about to change the plan I always end-up with cluttered text with lots of underscores and weird radio button which is not even needed. There is no information in detail given that the plan is unlimited or not, is it a monthly plan or not. Each and every name of the plans is actually horrible.

Approach

My approach is simple towards this, declutter everything so that user not get exhausted and get panic about changing the plan.

And I don’t want this to be getting confusing so that customer doesn’t have to call on customer care and that’s why I even introduced a chat option where a chatbot can handle most of the common issues.

Final Solution

• I came up with some of the options in the plans screen page like the recommended option and add on option and I even accompanied the compare option which was available in the previous app and I thought its a great option and it should be there in the app so that user can compare what best for them.
• Then I made simple cards with different plans and put and arrow icon over it so that the user can click it and know more about the plan which will help them to decide.

Problem

Oh! That’s funny, Actually, there is a speed test option in the previous app but when I click it nothing comes out, it's an empty screen and I thought my phone isn’t working but every time I go to the app it's still empty, So I got an opportunity to put that test right there where it belongs.

Approach

I want to make it simple as I already said about the other screen because it supposed to be like that. And even I strongly believe that there should be a speed test features so that the user doesn't have to go other apps to know the speed of their internet or they can even collab with an app like Ookla, Fast and Netspeed etc.

Final Solution

I tried to make it simple with clean icons and clear illustration which is not mine I used it from undraw.com because I can’t illustrate. There is not much to do after all its a simple speed test.

Problem

Actually, Hathway doesn’t have a wallet features and I was thinking that it is a very important and a very common feature which should be there which helps the user to keep their money and they can recharge at any time.

Approach

In this I want it to be similar like all other wallets with a blue gradient card to make it little more eye-catching.

Final Solution

While I was making the screen I had to iterate this a lot of time to get the result and I added a rounded corner button and played with that logo and took a risk to make it white.

In this screen, I put a card which is a wallet card indicating how much money in that card with an additional money button and gave some option of preset money which will help the user to save their time.

Problem

This is also a feature which is not there in Hathway and I saw that in a lot of competitors app and I thought that they give a good internet at least from my perspective but yeah they a horrible service. I have seen this in the current app that all the important and necessary features are not there and all unnecessary stuff are there.

Approach

My approach was first to make it visually good and then there should be some kind of reward which is money in this case and this will help them to retain and earn more users because everyone nowadays needs a good internet with a reasonable price and I think they give but they make their app and website nice which can actually help them to have some more of the market share in this business.

Final Solution

• As you can see that I put some eye-appealing illustration along with a card which says how much you can get if you share about this app so that they can also know about Hathway broadband service.
• And at the bottom, I gave the referring option with WhatsApp and other sharing option.

Problem

To be honest the old app screen was quite ok but the design was so ugly. The bill and request card was made with a lot of flaws and the padding was wrong if you look closely with so much inconsistency, plus the colour combination was so weird and it was not even matching with the brand colour itself. In short, it is pathetic visually and you can’t expect this from a company who have been in this industry for 9 years.

Approach

I want to make it quite same but I want to change the visual aspect of it and the detailing which was so much needed in this app, I personally believe that app and website is the most important representation of the company and I tried to do that and I hope I did some good improvement in this app.

Final Solution

• I made this exact same but visually it looks a bit more pleasing and I fixed the padding for every bill and request card in these screens with a suitable combination of typography.
• I have fixed the colour combination and I have removed the feedback button and instead, I gave an arrow button in the service request page, if the user clicks to the request option then the feedback button will pop up and then they can give them feedback easily.

Conclusion

Finally, I want to say that this is my first ever UX design project. I feel this is not a very in-depth project but because I am learning everything on my own, it's quite tough to be accountable for your work when there is no clear path and you procrastinate every time about your first work. And that is why it took me a month.

Learnings and Takeaways

• I should have planned each and everything properly and make the screens accordingly.
• I should have put more attention to the material design guidelines each and every time and stick to the basics.
• I should have spent more time on research.
• I wish I would have a mentor to connect with every time whenever I got stuck.
• I wish I wouldn't have procrastinated about this project and stick to the basics.
• I should have more consistent and respectful about the project and put more effort into it.
• And at last, I really think I don't understand a lot of things in the design process but I am learning.

I really like to thank each and everyone who is taking their time to read this case study. If you think that there are mistakes or any kind of improvement chances are there the please feel free to comment and give your feedback.