UKG's Ideology
Saiyyam Kochar
UX Designer and Developer
MSEG-UKG Inbox Service
a tailored and customizable unified communication platform for UKG employees.
Find out more about MSEG-UKG Inbox Service
Click on the button below to visit the Github repository for the project.
My Role
UI/UX Designer, Front-end Developer (React) for all aspects of the project.
Tools used : Figma
Technologies used : MERN Stack (MongoDB, Express.js, React.js, Node.js), Jest
Team
Jeff Boutotte : Project sponsor
Professor Gordon Anderson (CompSci 320) : Project liaison
Victor Santana : Project manager
Aryan Dang : Back-end developer
Kevin Chiu : Back-end developer
Shreyans Babel : Back-end developer
Steven Pham : Back-end developer
Amin Pourgol : Back-end developer
Greg Garber : UI/UX Designer, Front-end Developer
Dane Santos : UI/UX Designer, Front-end Developer
Ali Rabea : UI/UX Designer, Front-end Developer
Saiyyam Kochar : UI/UX Designer, Front-end Developer
Benjamin Riseman : Front-end Developer
Platform
Desktop
Timeline
January 2022 - May 2022
4 Months
Overview
What is MSEG-UKG Inbox Service?
MSEG (Manning Software Engineering Group) - UKG (Ultimate Kronos Group) Inbox Service is a tailored and customizable unified inbox service for integration within the human capital management (HCM) suite of UKG. This project was undertaken under the supervision of Professor Gordon Anderson in my Software Engineering class.
The Problem
"Unlock the power of the workforce"
- UKG
Inspiration
UKG is a multinational technology company that provides workforce management and human resource management services. While its software suites are industry acknowledged, they are looking for ways to break their offered solutions into more microservice-based solutions that are easily scalable to make way for future extensions and technologies. UKG assigned us a charter to create a unified inbox service as an addition to their workforce management suite.
Within this inbox service, UKG would like us to provide functionalities like PTO approval, performance review requests, and required training. They also wanted us to provide a way for employees to track their HR requests or tasks, thus making a platform that is a one-stop platform for all employees and administrators to manage the human capital management needs of the organization.
Our Solution
Try scrolling down!
What does our software do?
MSEG comprised of 11 people, with 5 people on front-end development. We designed an interface through which employees can view unified, personal inboxes and mark items as completed for a variety of human resource solutions like vacation time approval, administrator-assigned training, and performance reviews.
We implemented a list of tasks with due dates in varying states so that the inbox could serve not only for purposeful communication but also for better time management. We also tried to provide as many avenues of possible future integration as we could.
As a UX developer in the front-end team, I used Figma, and React.js to develop an adaptive and seamless user interface for the use cases outlined in the project requirements. My focus was to keep the interface clean and efficient, but with a modern look and feel to it.
Additional features to be implemented
Users must change the initial login ID and password after first successful login for security purposes.
Employees should not be able to add/remove tasks from the to-do list before manager’s approval.
The web application should be able to handle at least 50 users at a time without crashing.
Privacy of users’ information and export of restricted technologies should be taken care of.
Web application should be adapted to work on different browsers.
Tools and technologies used
Open source, low cost, Model view (MVC) for seamless web development.
MongoDB : Better for web-apps and handling large amounts of data, easier to incorporate into.
Express and Node : Express and Node work well together, lightweight and easy to create robust and seamless web apps with.
React : Because of its data binding feature, components (saves time), ability to work on virtual DOM - helps front end developers.
Development Process
Brainstorming as a part of Team MSEG
Brainstorm
Our team began by outlining the required features of our project. We then branched out to think of the dependencies of each requirement - for example, the quintessential 'Sign Up' or 'Forgot Password' options on the Login Page. We continued to think through features that a corporation might need in its HCM solution. We then went through several software development stacks and tools, deciding what suite would fit the needs of the project timeline best. We also evaluated several 3rd-party APIs to understand which one would allow for the most avenues of future integration.
User flow sketch for MSEG-UKG Inbox Service
Over the course of 12 weeks, our team's priority was to come up with most efficient and effective solution which met all the requirements of the charter.
Low fidelity prototypes
Below are present some of our initial deliberations about the project's functionalities, requirements, and design. This stage took the team about 7 days, at the end of which the team had technical know-how and roadmap about starting off with the development.
Edge scenarios
a compilation of questions our team asked the project manager and professor Gordon before we came up with the high-fidelity prototype
Color palette chosen for our project
Color Palette
We modeled our color palette after UKG’s existing palette, with modifications to provide users an impression of completeness, success and progession.
In engineering psychology, green is calming, motivating and optimistic - all qualities that we wanted our interface to provide.
We also chose a cooler shade of green to keep the interface professional and easy on the eyes.
High-fidelity prototypes
Compilation of some significant screens of MSEG-UKG Inbox Service
Conclusion
A group photograph 😁
Final Presentation 🎉
We presented this project to multiple UKG sponsors, our class professor, and other teams. Below is present the link to our final presentation which includes our final product, milestones along various stages of development, and a demo of the application. Personally, I was fully responsible for presenting the developed non-functional requirements of the application.
Additionally, as it was my first time working in a scrum environment, I got to learn valuable soft-skills such as effective team communication, keeping track of deadlines with respect to features!
Also had opportunity to work with real world client requirements, thus providing me with a first look at the professional life of a UI/UX Developer!