We got the requirement for re-designing the Management Information System for our organization as many employees was facing the problem in the system related to usability and interaction of the system with users.
We initiate with different research methods like Heuristic evaluation, Interviews, Surveys, Competitive analysis to find out the problem objectives of the system and from those objectives, we started working on the improvements of User Experience, System Interaction and User Interface to make User-Centric Design.
We also did the usability testing on the final design and made some iterations from the users' feedback.
To find out the problem objectives we need to empathise with the users to get to know what they are feeling while using the current system. For that we categorised our research into two
parts - Primary Research and Secondary Research.
In Primary Research, We anaylised the users by taking interviews, prepared questionnaires, Direct observation and Heuristic Evaluation of the present design which helps us to find out the bottle neck areas of the system.
From Secondary Research, We were able to analyse the challenges faced by different types of users and the what are the technological challenges are there which affecting the tasks
performed by users in the system.
2. We got the requirement for re-designing the Management Information System for our
organization as many employees was facing the problem in the system related to usabiltiy and
interaction of system with users.
We initiate with different research methods like Heuristic evaluation, Interviews, Surveys,
Competative analysis to find out the problem objectives of the system and from those
objectives we started working on the improvements of User Experience, System Interaction and
User Interface to make User Centric Design.
We also did the usability testing on the final design and made some iterations from the users
feedback.
Previous Design
Why we are Re-designing it
TECH
3. Define Ideate PrototypeEmpathize
Heuristic
Evaluation
Interviews
Primary
Research
Questionnaire
Direct
Observation
Secondary
Research Technology
Background
Personas
& Scenarios
Case
Study
Problem
Identification Primary &
Secondary
Needs
Concept
Generation
Phase
Visual Ergonomic
Approach
User Interface
Wireframing
Concept
Validation
Hick’s Law
Gestalt Law
1. Proximity
2.Similarity
3.Continuation
4.Common Fate
5.Figure & Foreground
Law of
Similarity
Information Flow
Heuristic Evaluation
Guerrilla Usability Testing
User Role
Test
Design Process
4. Primary Research1
To find out the problem objectives we need to empathise with the users to get to know what
they are feeling while using the current system. For that we categorised our research into two
parts - Primary Research and Secondary Research.
In Primary Research, We anaylised the users by taking interviews, prepared questionnaires,
Direct observation and Heuristic Evaluation of the present design which helps us to find out the
bottle neck areas of the system.
From Secondary Research, We were able to analysed the challenges faced by different types of
users and the what are the technological challenges are there which affecting the tasks
performed by users in the system.
Empathize
Heuristics
Visibility of primary
information first
Use simple language
User control and freedom
Consistency in the system
Recognition rather than
recall
Aesthetic and minimalist
design
Error prevention
User Roles in system
Customization of
elements
Security and
Confidentiality
Notes
Information should appear in a natural and
logical order
Language of the system should be simple
like words, phrases should be familiar to
the user
Users often choose system functions by
default and will need a clearly marked
“emergancy exit” to leave the unwanted
state without going through a long flow.
Types of elements used in the system
should have same theme such as forms in
any section must have a similar layout and
same goes for other elements like buttons,
cards, icons etc.
Minimize the user’s memory load by
making objects, actions and options more
visible. User should not have to remember
information from one section to another
Any of the section should not contain
information which is irrelevant or rarely
needed.Number of steps to complete any
process should be minimum.
Eliminate error-prone conditions and
present users with a confirmation option
before they commit to any action. Provide
error messages if some conditions cannot
be eliminated.
System’s layout should be visible according
to the user role. There should not be other
step to open the layout on the basis of user
roles
User should have freedom to arrange
elements of the dashboard on the basis of
his/her requirement.
As system will be used internally, there
should be security check in the sections
where critical information is present and
the users should be verfied with passwords
and other verfication methods.
Severity
2.5
(Out of 5)
4
2
3.5
2.5
1
4
4
3
4
Recommendation
Some primary information is missing
which should be present on the dashboard
like leave status, updates, Team Leaves
after that secondary information should be
visible
Language used in the present design is
easy and understated though there are
extra words added which can be avoided
There is no flow for any process , everything
is independent which breaks any process
in multiple separate screens
There are some elements which follows the
consistency part like card style, buttons,
table format but there are also some other
elements which are not consistent like
icons used in the system are different in
different section both linear and filled
icons are used and strokes of linear icons
are also different
User has to recall for the some tasks to
perform any action like for leaves ,he/she
has to go to calendar section then holiday
section then after he/she will apply for
leave
Aesthetically the interface is not appealing
and use of vibrant color pallete led user to
leave the system as soon as possible
Error messages are present in whole
system wherever necessary
System opens based on the user type
User can arrange his/her dashboard based
of the requirement but there is no way to
pass the this information to the user
Verification of user is two step process
where user is verified through different
layers
Heuristic Evaluation
5. Secondary Research2
DEMOGRAPHICS
Role : Manager
Age : 36
Department : Product Team
GOALS
• To check the tasks, working hours and leaves of team members
• To check the goals and appraisal forms of team members
• Get contact information of any employee
• Check holidays and leaves status
• Not able to access required information related to team member easily
• To get any contact information, he has to click on the separate section and then find out the person
• There is no one section where all information related to holidays and leaves are there
PAIN POINTS
EMPLOYEE
MANAGER
DEMOGRAPHICS
Role : Software Engineer
Age : 27
Department : Product Team
GOALS
• To check Log In hours daily
• To fill timesheet in minimum time span
• Get contact information quickly of other employees
• To get update of leaves and holidays
PAIN POINTS
• He has to fill verify his account every time he log’s in
• There are series of steps to fill a single timesheet which is hectic on daily basis
• To get any contact information, he has to click on the separate section and then find out the person
• Finding difficulty during planning leaves as leaves and holidays are in two different sections
Personas
Empathize
6. Technology Background
The current design has been made from a pre defined
template where controls and other elements are already
defined and slight modifications has been done in the design.
Theme based templates gives the bad user experience and
also the design cannot be user centric as the theme will
designed on other requirement and our requirement is
different and we are trying to fixing it in this theme forcefully
which eventually results into bad user experience and
decreases the usability of the system which makes the system
useless and users will also adapt bad user experience
functions.
To solve this issue the focus will be on the requirements firstly
and accordingly technology will be updated based on the
requirement of the design instead of picking some theme.
Empathize
Secondary Research2
7. Affinity Mapping
Activities
• Open MIS by logging
office Id
• Some other sections
mostly used are
knowledge
base,Appraisal
management and
Birthdays
• Use MIS multiple times
in a day, mostly for
Employee Directory and
Working Hours
• Check sections of
dashboard , mostly Log
IN and Log OUT timings,
Employee directory,
Holidays, Leaves,LNSA
and Timesheet
Limitation of
Technology
• Present design is
developed on a pre
defined template
which has some
limitations in terms
of elements such as
card design, Button,
Grid structure and
many more
Behaviours &
Motivation
• Users never share
feedback and adapt
to the present
design, find other
ways to tackle the
issues they are
facing while using
MIS
• To save time they
never bother to
focus on the time
they are spending
on any section
which can be
reduced if sections
are designed by
focussing on UX and
usablity of elements
Goals & Needs
• Minimum time
should spend on
accessing of any
section
• Number of clicks
should be reduced
to save efforts and
time of the user
• Similar sections
present in the
current design
should merged or
should be relatable
to process task or
information easily
• Design should be
easy for every user
belongs any
department
Frustations
• MIS Log in is two
step process where
verification
increases time
sometimes
• To get contact
information, user
has to click multiple
times and also has
to type
• Knowledge base
section doen’t
display files on the
first screen and it is
quite difficult for
new users to find
the tutorial
files(specially
trainees)
• For layout,
everything is bold
and user cannot stay
on the dashboard
for long time
• Filling timesheet is
very hectic as user
has to perform
similar steps again
and again which can
be reduced
Empathize
8. Define
Problem Identification1
1. The current MIS system is very basic, lack functionality, visual representation and smooth user
interaction with any task flow.
2. To perform any task, a user has to refer multiple modules as there is no proper flow to perform any
task independently.
3. Due to lack of consistency and ambiguity in the differentiation of primary and secondary tasks,
users are facing bad user experience which is affecting the usablity of the system.
In this case study, we are focussing on the three parts of MIS system’s current problem which are
- Usablility
- Consistency
- Remove ambiguity between Primary and Secondary tasks
9. Define
Primary and Secondary Needs2
User Role3
Secondary need of the system to provide a customisable interface to the user to organize the sections
based on their needs. Modules which counts under secondary information are policy information,
knowledge base, organization structure, forms, feedback, assest allocation.
Primary needs of system is to give easily access to any section of the system and user can perform any
task in short interval of time with an ease. The primary information user will get can be Timesheet
completion, Working hours, Leave Information, LNSA, Appraisal Management and other Employee
Contact details.
Employee Manager Admin
10. Ideate
Email id
Side Panel
User Info
Employee Directory
Timesheet
Leave
LNSA
Asset Allocation
Management
- Project Mgmt
- Team Mgmt
- Appraisal Mgmt
Others
- Forms
- Policy
- Knowledge Base
- Feedback
- Organisation
structure
Today’s Hrs
- In Time
- Out Time
Yesterday’s Hrs
- In Time
- Out Time
Average Hrs
Current
Updates
Birthdays
Work
Anniversaries
Leave Counter
Apply Leave
LWP Tracker
Name
In Time
Out Time
Total Hrs
Name
Date
Total Days
Search
Notification
User Profile
Working Hrs All Updates Leaves Team Attendance Team Leaves Header
Log In
Dashboard
Password User Verification Wall
Information Flow1
11. Prototype
Concept Generation1
From all the findings, We’ve tried to make the system user-centric design, which will give a better user
experience and easy interaction with the system. In the design, We’ve improved the tasks flow and
made their execution independent and also minimize the task completion time.
All the sections of the design are designed on the basis of Visual ergonomics where we focussed on
these factors -
1. Visually demanding work tasks and leisure activities
2.Cognitive load on the user while performing any task or simple checking the dashboard for basic
information
3. Design the work system such that employees can perform a variety of different tasks
4. Readability and Legibility of every module
12. Prototype
Showing some primary low fidelity wireframes below :
Log In Screen
Employee Directory Appraisal Management
Dashboard Leave
User Interface - Guidelines
13. Prototype
User Interface - Guidelines
Color Pallete
#5D38DB
R 93
G 56
B 219
#CA7ACA
R 202
G 122
B 202
#00C48C
R 0
G 196
B 140
#1F2536
R 31
G 37
B 54
#31394F
R 49
G 57
B 79
#016177
R 1
G 97
B 119
#0AA0C2
R 10
G 160
B 194
#0084F4
R 0
G 132
B 244
#FFCF5C
R 255
G 207
B 92
#FF647C
R 255
G 100
B 124
#00C48C
R 0
G 196
B 140
Primary Colors
Secondary Colors
14. Prototype
User Interface - Guidelines
Typography
Text Colors
Heading #2C2B2B R 44 G 43 B 43
Sub -Heading #727373 R 114 G 115 B 115
Text #A5A5A5 R 165 G 165 B 165
A AAa AaLatoMontserrat
Semibold
Heading 14pt
Sub -Heading 12pt
Bold Regular Bold
Sub -Heading 12pt
Text 12pt
17. Prototype
Concept Validation2
In our new MIS design, We followed diiferent types of validation to make the design more user
friendly. Some UX laws used for validation are -
Hick’s Law Law of Similarity Gestalt Law