MTNL

Mahanagar Telephone Nigam Limited

An interface redesign project for mobile and desktop

A005 Sharvaree Grampurohit | A025 Mihir Bhanushali | A032 Moitreyee Bhattacharjee

 PROJECT
We were assigned the task to examine the existing website of MTNL on
mobile and desktop platforms, conduct a thorough heuristic and user
journey study and find out the existing gaps and errors in the site. Based
on our study we were told to redesign the website, create a more
structured information architecture and submit a complete report showing
all the steps followed.

01
 MTNL
“Transparency makes us different”

A telecom company providing fixed telephone, GSM, CDMA, Internet,

Broadband, ISDN and Leased Line services, to meet broadcast and other
requirement such as carrying of High Definition TV stream, games, data,
security, entertainment etc in metro cities of india under the name MTNL and
beyond boundaires through its Joint Ventures and Subsidiaries.

02
Heuristic Evaluation

Homepage

03
#1 Visibility of System Status
Incorrect placement of breadcrumb
Left right swipe not clearly visible with no indication
on which banner the user is on currentl
No loading animation

Tentative Solutions

Change Breadcrumb placement and make it visibl

Make the arrows visible and add dot indicators
Add animation to show the loading status

04
#2 Match between system and
real world
Incorrect placement of breadcrumb
Left right swipe not clearly visible with no indication
on which banner the user is on currentl
No loading animation

Tentative Solutions

Make distinct icons to minimize misunderstandin

Explain acronyms
Modify icon

05
#3 User control and freedom
No back or undo button on the entire website.

Tentative Solutions
Provide back button to reach other pages on the
website

06
#4 Consistency and standards
Not able to differentiate between link text and
normal text
Different shades of green used disrupts the
standards

Tentative Solutions
Make links different colour to look clickabl
Maintain a consistent colour palette

07
#6 Recognition rather than recall
The entire website is too textual, making it
hectic for the user.
One can easily forget the steps to achieve a
process

Tentative Solutions
Make things more visual and reduce the textual
load.

08
#7 Flexibility and Efficiency
of Use
Search results irrelevant, too complex and

technical for the use

Lack of Chatbot

Hamburger menu contains same content as

main conten

Multiple links land to same pages.

Tentative Solutions

Make search results relevant to make the

process easie

Add Chatbot to simplify the proces

Content should not be repeated

09
#8 Aesthetic and Minimalistic
Design
Improper alignmen
Improper Tab alignment
Improper Banner Alignment and inconsistent
colour usag
Overall Homepage looks clustered.

Tentative Solutions
Fix alignmen
Fix Tab alignment
Fix Banner Alignment and use minimalistic
palette

10
#10 Help and Documentation
Lack of proper “help and documentation” page

for the users

Search section showcases hard-to-decipher

search results

Lack of chatbot

Unhelpful placement of Sitemap

Tentative Solutions

The site should include help page, which can

help a user when confused, Customer support &

FAQs section should be be easy to locat

Provide relevant search result

Adding a responsive chatbot can help the user

when he gets los

Visible placement for Sitemap 11

Stakeholder
Studying the website and its users we were able to map out primary, secondary, tertiary stakeholders.

Primary Stakeholders - MTNL’s customers who use the website to manage their subscriptions.

Secondary Stakeholders - Employees maintaing the website and Companies looking for office spaces.

Tertiary Stakeholders - Students and potential investors who use the website for reseach purposes.

Potential Investors

Students (Research Purposes)

Primary

MTNL Employees

Office Spaces
Secondary

MTNL using
customers
12
Households/ Tertiary
Families
 Target Audience
Individuals from urban households

MTNL being a reliable and low priced service provided by the

government, it focuses on people looking for good telecom and
landline services in metro cities of India.

13
Persona 1

Brands used

I really want something

that could help save my

time and energy to pay

my bills by going to the

MTNL office every time

Needs
Traits

Amrita Parve Budget Concious Seamless Transaction

Govt Employee - +
Multiple Payment Options
Amrita is a working parent of 2
Jessica Tech saavy
children, she loves spending time Age
Timely Reminders
with her family, but finds it very
College Student
- +
difficult to manage between work 32 year old
Senior year or College, she loves traveling
and family.

solo and with her close friends. She likes

also taking weekend trips but looks

Devices
forward to long vacations to get away from

the city.

Mobile

Workoholic Busy
Desktop

Passionate Supportive
City

Mumbai Knowledgeable Ambivert

14
 Scenario

Creating an account and managing bills on MTNL website

Amrita has been a resident of Mumbai ever since she shifted here for work purposes. She

already uses an MTNL landline, but it has been very hectic for her to keep the track and

payment of bills, at the MTNL office. Her friend suggested her to use the MTNL Mumbai

website for such tasks, since it is time saving and can be done remotely, hence Amrita

has been wanting to create a account and manage her bills, payment history on the

website for her ease.

15
Storyboard
Create an Account

16
Task Flow
Create an Account

17
User Flow 1
Create an Account

18
User journey
Create an Account

19
Task 1 Heuristics
Create an Account

20
21
22
23
24
Information Architecture
Create an Account

25
Paper Prototype
Create an Account

26
Mid-Fidelity Prototype
Create an Account

27
Mid-Fidelity Prototype
Create an Account

28
High-Fidelity Prototype
Create an Account

29
High-Fidelity Prototype
Create an Account

30
Task 2
Telephone Bill Payment

31
User Flow 2
Telephone Bill Payment

32
User Journey- 2
Telephone Bill Payment

33
Task 2 Heuristics
Telephone Bill Payment

34
35
Information Architecture
Telephone Bill Payment
Paper Prototype
Telephone Bill Payment

37
Mid-Fidelity Prototype
Telephone Bill Payment

38
Mid-Fidelity Prototype
Telephone Bill Payment

39
High-Fidelity Prototype
Telephone Bill Payment

40
High-Fidelity Prototype
Telephone Bill Payment

41
Persona 2

I love to coordinate Traits

with people and help
them out. Although I Budget Concious Brands used
dislike being disturbed
in my workflow, as i
- +
plan my things out
beforehand. Tech saavy
- +
Raghav Desai Self-Taught
Manager - + Needs
Recently got promoted as a
company.
Jessica
Manager at a Tech
He lives with his Age Affordable Options
College Student
wife in an apartment in 40 year old
Senior year orHe
Mumbai. College,
loves she loves
going Fast connection
traveling solo and with her close Proactive
long walks
friends. She in thealsoevening.
likes taking Devices Outgoing Easy transactions
In his trips
weekend freebut
time heforward
looks cooksto
longandvacations to gettelevision.

watches away from the Mobile

Responsible Honest
city. Smooth navigation
Tablet

Passionate Supportive
Laptop
Organized Ambivert
42
 Scenario

Buying a new Postpaid Broadband Plan

Raghav recently got promoted as a manager at a Tech based company. Previously he

had been using a Prepaid Broadband plan. But now due to his promotion, he can now

administer his job from home as well. Due to this there is constant usage of his current

broadband, leading it to expire quickly. He is frustrated as he has to pay again at shorter

intervals and does not want to be disturbed. His friend suggests him to buy a Postpaid

Plan from MTNL instead, which will make his workflow smoother.

43
Storyboard
Buying a new Postpaid Broadband Plan

4
4
Storyboard
Buying a new Postpaid Broadband Plan

45
Information Architecture
Buying a new Postpaid Broadband Plan

Legend

46
Task Flow 3
Buying a new Postpaid Broadband Plan

47
User Flow 3
Buying a new Postpaid Broadband Plan

48
User Journey- 3
Buying a new Postpaid Broadband Plan

49
Task 3 Heuristics
Buying a new Postpaid Broadband Plan

50
51
52
53
54
55
Paper Prototype
Buying a new Postpaid Broadband Plan

56
Mid-Fidelity Prototype
Buying a new Postpaid Broadband Plan

57
High-Fidelity Prototype
Buying a new Postpaid Broadband Plan

58
High-Fidelity Prototype
Buying a new Postpaid Broadband Plan

59
High-Fidelity Prototype
Buying a new Postpaid Broadband Plan

60
High-Fidelity Prototype
Buying a new Postpaid Broadband Plan

61
 Colours
Primary

#FFFFFF #E9FFE5 #E2F3CF #D1EFAE #8CBB52 #5A9818 #037F04 #004700

Neutral

#FFFFFF #E8E8E8 #DDDDDD #D3D3D3 #B4B4B4 #8F8F8F #6C6C6C #393939

62
 UI Components

Top Navigation Bar

About Us Landline Broadband Mobile Enterprise E-Auction Support Mobile

Search Sign Up

About Us Landline Broadband Mobile Enterprise E-Auction Support Mobile

Search M

Calendar Icons 25 x 25 px Checkboxes

Date

05/25/2022

February 22 2009 Radio Buttons

March 23 2010
April 24 2011
May 25 2012
June 26 2013
July 27 2014
August 28 2015

63
 UI Components

Illustrations

64
 UI Components

Grid and spacing

Suitable for Device No. of Columns Max width

Desktop 12 1140px

Gutter = 24 px Margin = 80 px

Desktop = 1140px 65
 UI Components

Grid and spacing

Suitable for Device No. of Columns Max width

Mobile 4 None
Margin = 24 px Gutter = 16 px

Desktop = 414px

66
 UI Components

Grid and spacing

Suitable for Device No. of Columns Max width

Mobile 4 None
Margin = 24 px Gutter = 16 px

Desktop = 414px

67
 UI Components

Card Design

Title of product Title of product

card card
Description of Description of
Product Product

Button Button

68
 UI Components

Corners Elevation

Blur = 3 Blur = 0
X=0 X=0
Rounded Opacity = 25% Opacity = 0%
corner
radius - 16
dp
Y=4 Y=0

Dialog box
Dialog box
20
40 x 40
24 40 x 40 24 Message 24 24
Icon
20 x 20
Icon 24

24 Warning Message 24

Variations 24

Your account has been verified with one time
password.
Listed below are all bills related to the entered
customer account and telephone number.
Due to some error your files haven’t been
uploaded, please try again.
Back Next
Reloading this page will result in loss of date.

69
Typography

Aa
Name Font-Weight
Helvetica
Light Regular Medium Bold
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss
Tt Uu Vv Ww Xx Yy Zz

Font-Size Line-Height

Heading 1 Bold 30 px 56 px

Heading 3 Medium 24 px 36 px

Heading 4 Medium 22 px 28 px

Heading 5 Bold 20 px 24 px

Body Large 1 Regular 18 px 20 px

Body Large 2 Regular 18 px 20 px

Body Medium Regular 16 px 24 px

Body Regular Regular 14 px 24 px

Body Small Regular 12 px 20 px

Button Bold 16 px 16 px
70
UI Components

Buttons Inputs
Primary Secondary States
Default Default Default
Input Label
Primary Secondary Input placeholder
Example
Hover Hover Hover
Input Label
Primary Secondary Input placeholder
Example
Focus Focus Active
Input Label
Primary Secondary Type someth
Example
Disable Disable Disable
Input Label
Primary Secondary Input placeholder

System Feedback
Success
Input Label
Success
Success Message
Error
Input Label
Error
Error Message
71
UI Components

Accordions

Accordian 1

Accordian 2

Accordian 3

Accordian 4

Accordian 5

Accordian 6

Accordian 7

72
UI Components

Steps
Default Active Completed Completed

Step 1 Step 1 Step 1 Step 1

1 Description
1 1 Description 1 Description 1 Description

Tabs

Tab 1 Active Tab 2 Tab 3 Tab 4 Tab 5

Slider Loading

73
Desktop Version
Task- 1

74
 Task-1
Create an Account

Welcome to MTNL! Welcome to MTNL!

Create an account to avail all the MTNL services Create an account to avail all the MTNL services

Sign in with Google

Sign in with Google

OR OR

Fill the below information to create your free account Fill the below information to create your free account

First Name*

First Name * Last Name * Mihir Last Name *

Email Id * Email Id *

Password * Confirm Password * Password * Confirm Password *

Back Next Back Next

29°C
ENG
14:50
29°C
ENG
14:50

8 8
Sunny Sunny
IN 07-11-2022 IN 07-11-2022

75
 Task-1
Create an Account

Welcome to MTNL! Welcome to MTNL!

Create an account to avail all the MTNL services Create an account to avail all the MTNL services

Sign in with Google Sign in with Google

OR OR

Fill the below information to create your free account Fill the below information to create your free account
First Name* Last Name* First Name* Last Name*
Mihir Bhanushali Mihir Bhanushali

Email Id*
Email Id * mihir.bhanushali@gmail.com

Password * Confirm Password * Password * Confirm Password *

Back Next Back Next

29°C
ENG
14:50
29°C
ENG
14:50

8 8
Sunny IN 07-11-2022 Sunny IN 07-11-2022

76
 Task-1
Create an Account

Welcome to MTNL! Welcome to MTNL!

Create an account to avail all the MTNL services Create an account to avail all the MTNL services

Sign in with Google Sign in with Google

OR OR

Fill the below information to create your free account Fill the below information to create your free account
First Name* Last Name* First Name* Last Name*
Mihir Bhanushali Mihir Bhanushali

Email Id* Email Id*

mihir.bhanushali@gmail.com mihir.bhanushali@gmail.com

Password* Password* Confirm Password*

******** 0/8 Confirm Password * ******** 0/8 ******** 0/8

Back Next Back Next

29°C
ENG
14:50
29°C
ENG
14:50

8 8
Sunny IN 07-11-2022 Sunny IN 07-11-2022

77
 Task-1
Create an Account

Fill the below information to create your free account Fill the below information to create your free account

Gender * Gender *
Male Male
Female Female
Other Other

Date of Birth * Date of Birth *

Date Month Year Date Month Year

I agree to all terms and conditions I agree to all terms and conditions

Back Next Back Next

29°C
ENG
14:50
29°C
ENG
14:50

8 8
Sunny IN 07-11-2022 Sunny IN 07-11-2022

78
 Task-1
Create an Account

Fill the below information to create your free account Fill the below information to create your free account

Gender * Gender *
Male Male
Female Female
Other Other

Date of Birth * Date of Birth *

05 Month Year 05 November Year

I agree to all terms and conditions I agree to all terms and conditions

Back Next Back Next

29°C
ENG
14:50
29°C
ENG
14:50

8 8
Sunny IN 07-11-2022 Sunny IN 07-11-2022

79
 Task-1
Create an Account

Fill the below information to create your free account Fill the below information to create your free account

Gender * Gender *
Male Male
Female Female
Other Other

Date of Birth * Date of Birth *

05 November 2001 05 November 2001

I agree to all terms and conditions I agree to all terms and conditions

Back Next Back Next

29°C
ENG
14:50
29°C
ENG
14:50

8 8
Sunny IN 07-11-2022 Sunny IN 07-11-2022

80
 Task-1
Create an Account

Verification Verification
Please enter your mobile number and Please enter your mobile number and
enter the OTP enter the OTP

India 8375620863 India 9375630123

Verify Verify

Resend OTP Resend OTP

29°C
ENG
14:50
8
29°C
ENG
14:50
8
Sunny IN 07-11-2022 Sunny IN 07-11-2022

81
 Task-1
Create an Account

Verification
Please enter your mobile number and
enter the OTP

India 9375630123

Mobile Number Verified

3 1 7 9 Successfully!

Please login to enhance your experiencce

Verify

Go to
Get Login
Started
Resend OTP

I’ll do it Later

29°C
ENG
14:50
29°C
ENG
14:50

8 8
Sunny IN 07-11-2022 Sunny
IN 07-11-2022

82
 Task-1
Create an Account

Mobile Number Verified

Successfully!
Login Into Your Account
Please login to enhance your experiencce
Please enter your Email Id and Password

Email ID *

Get Started
Go to Login
Password *

I’ll do it Later

Login

29°C
ENG
14:50
29°C
ENG
14:50

8 8
Sunny IN 07-11-2022 Sunny
IN 07-11-2022

83
 Task-1
Create an Account

Login Into Your Account Login Into Your Account

Please enter your Email Id and Password Please enter your Email Id and Password
Email Id* Email Id*
mihir.bhanushali@gmail.com mihir.bhanushali@gmail.com

Password*
Password * ********

Login Login

29°C
ENG
14:50
29°C
ENG
14:50

8 8
Sunny IN 07-11-2022 Sunny IN 07-11-2022

84
Desktop Version
Task- 2

85
Task-2
Telephone Bill Payment

86
Task-2
Telephone Bill Payment

87
Task-2
Telephone Bill Payment

88
Task-2
Telephone Bill Payment

89
Task-2
Telephone Bill Payment

90
Task-2
Telephone Bill Payment

91
Task-2
Telephone Bill Payment

92
Task-2
Telephone Bill Payment

93
Desktop Version
Task- 3

94
Task-3
Buying a new Postpaid Broadband Plan

95
Task-3
Buying a new Postpaid Broadband Plan

96
Task-3
Buying a new Postpaid Broadband Plan

97
Task-3
Buying a new Postpaid Broadband Plan

98
Task-3
Buying a new Postpaid Broadband Plan

99
Task-3
Buying a new Postpaid Broadband Plan

100
Task-3
Buying a new Postpaid Broadband Plan

101
Conclusion

We gained knowledge about material

design systems, and how they are vital for
design decisions.

It is also important to apply design styles

according to what look and feel is to be
perceived.

Government websites are designed in a

certain style and are more about trust,
transparency and ease of use.

102
Thank You