Management Information System UX Case study
- 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
- 15. Prototype User Interface Log In Apply Leave Apply LNSA Timesheet Dashboard Employee Directory
- 16. Prototype User Interface Work From Home Appraisal Management Appraisal Form Policies Out Duty Comp Off
- 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