Employee Service Portal
One application for all employee needs
Team
Product design lead
User research
UI/UX design
Interaction design
Branding
User Testing
Team
Project Manager
3 Designers
2 Developers
Ledership
Team
Solving critical issues effectively
Initiating conversations about the need to socialize
Assisting users with their hobbies
Monitoring stress levels
Providing self-care resources
Problem Statement
IT employees cannot access tasks like leaves, timesheet, etc through their mobiles, leading to missed deadlines when desktop access is limited. This results in increased stress and a rise in ticket generation. A unified mobile platform is needed to alleviate these issues.
User Role and Audience
International students (ages 18-35) struggling to fit in
Individuals dealing with anxiety
Professionals finding it hard to network
People looking for groups to pursue hobbies
Overview
This application caters to the basic needs of IT employees, where most of their daily tasks such as timesheets, claims, company transport, internal social media, leaves, and more are operated through desktop sites. The issue arises in situations where an employee, under certain circumstances, cannot operate their desktop or laptop. They should not be prevented from completing their basic tasks and should be able to accomplish them using the mobile application.
Outcomes
54%
Adoption rate in the first
3 months
60%
Reduction in average task completion time
75%
Improvement in mobile access to IT systems
Process
UAT
User Testing
Amazing the developed designs
Design
Design Guidelines
Visual Library
High fidelity wireframes
Ideation
Information Architecture
Task Flow
Paper Prototyping
Low and mid fidelity wireframes
Discover
Self Exploration
Heuristic Evaluation
Contextual Enquiry
Persona
Card Sorting
Thematic Analysis
01 Discover
The solution in this case already existed; the major issue was that the site was not compatible with mobile devices. For mobile, there were different applications, each catering specifically to one task, leading users to end up downloading all of them. To start, we needed to better understand the users, along with the existing web product.
To understand users and the website better, conduct interviews and heuristic evaluations
We conducted a thorough heuristic evaluation to explore the website comprehensively. This evaluation assessed the website across various parameters, identifying issues based on their priority. It provided us with a better understanding of the services offered.
Additionally, user interviews involving individuals from different verticals and departments revealed the frequency of feature usage, pain points, daily routines, and crucial needs. This insight will serve as the foundation for our design.
Ramesh Kapoor
28 years | New Delhi
Frustration
Skip transport costs.
Trouble updating info on leave.
Issues with updates while traveling.
Frustration
Ramesh waits for office transport.
He wants bus tracking online.
User Profile
Categorizing research with Card Sorting and Thematic Analysis
The above steps provided us with valuable insights, especially regarding what users are looking for and where they are facing issues. The existing website had multiple features, and through user interviews, we gained an understanding of the frequency with which these features were used. We then analyzed what could be incorporated into the mobile version for easier access.
Using tools like MoSCoW prioritization and card sorting, we identified six categories of main and important features and grouped the less frequently used ones under them. This was followed by thematic analysis, aimed at addressing the issues identified in the heuristic evaluation—essentially mapping which main categories require attention in the project's first phase.
Card Sorting
Profile
Leaves
Timesheet
Role Management
My Profile
Claims
Home
Announcements
Search Bar
Newsfeed
Notifications
Chatbot
Infrastructure
Sports Facility
Conference Room
Benefits
Travel
Expenses
02 Ideation
Up to this stage, we had a basic understanding of user needs and pain points. We also categorized these understandings based on user frequency. Our goal at this stage was to begin structuring the content, which would lead to creating wireframes for the mobile application.
Forming the application structure with information architecture
We had the main categories based on the user needs, aiming to keep them accessible with minimal clicks. We then placed features with lower usage under these main categories. Using this approach, we created an IA, labeling each component of the application. This will serve as the foundation for all the stages ahead.
Mapping the user clicks with user flows
Before jumping into the wireframes, we wanted to map the number of clicks users have to make to complete each task. This was done with the motive of helping them achieve task accomplishment with minimal clicks. We compared these with the clicks on the website, and the results were amazing as we were able to streamline the process.
Task Flow
Filling in the timesheet efforts
Structuring the application with wireframe visualizations
With the information architecture in hand, we planned to execute the wireframes considering the approaching timelines. We began by sketching our thoughts based on the IA onto paper wireframes. This approach followed best practices, as within a few minutes, we had the first actual draft of our application. This increased our visibility by providing something tangible.
03 Design
Considering this was a pilot project, we planned to create the design guidelines from scratch. We decided on the colors with the target group—IT professionals—in mind. The idea was to use blue as the primary color to align with the IT ecosystem and introduce bright colors as secondary and accent colors to add contrast and make the UI more engaging.
The user interface was kept simple to highlight the main elements, with plenty of white space to help users focus on one thing at a time and navigate the application freely. Visual cues were added to minimize the cognitive effort required from users.
Retrospective
-
Gained valuable insights into working with a larger target audience, adapting to diverse needs.
-
User interviews were highly engaging, revealing key areas for improvement and new feature ideas.
-
UAT (User Acceptance Testing) provided a clearer understanding of product functionality and user expectations.
-
Collaboration with cross-functional teams improved communication and streamlined the development process.
-
Iterative feedback loops enabled quick adjustments, ensuring the final product aligned closely with user needs.
04 UAT
We conducted the User Acceptance Testing (UAT) to ensure that the mobile app met the specific needs and expectations of IT employees before a full-scale release. This step was essential to validate that the product functioned as intended in real-world scenarios. We involved end users in testing the app’s core features and workflows, simulating actual tasks they would perform. By gathering their feedback, we were able to identify potential usability issues, bugs, and areas for improvement. This process allowed us to refine the app, ensuring it was both intuitive and fully aligned with user requirements before final deployment.