Abstract
Micron has been looking for a web application that would help new hires and interns get adjusted to working at Micron. This will be accomplished by supplying them with the necessary information for success, allowing them to directly contact supervisors and fellow teammates, build relationships, get familiar with Micron’s policies and ultimately point the new interns and hires in the right direction. In the fall, a team created an initial version of the app in a modular architecture that supports future implementations for interns, new hires, internal transfers and supervisors. Our goal was to extend the existing app to refine and improve the UX, by adding an additional Admin view which will allow for the creation and deployment of modules to users. On top of this we will also add the ability for supervisors to monitor their teams progression through the individual modules.
Besides providing a centralized method of onboarding, the application also provides a tracking system which keeps track of how far along a user is in the onboarding process. This is especially beneficial to supervisors who want to keep their new employees on track.
Project Description
Tech Stack:
This application is built on top of a .NET core 3.1 backend with Angular 12 / bootstrap for the front end. We inherited this project from the fall semester group and they picked these technologies because they are supported by Micron and so their development team will be able to seamlessly continue development and maintenance. The application is connected via the backend to a MongoDB database. MongoDB was selected for its ease of use and its ability to store JSON objects.
Project State at the Beginning:
The team before us had a very good starting point of an application that was only capable of onboarding new hires and interns. Most of the backend was built and was functional but still needed to be extended to support the new features. Also, the front end was a good starting point but wasn't completely finished since we added more features to the application.
Here are a couple of screenshots of the application state at the beginning of the project:
As previously mentioned, the project was left at a very good starting point for us to finish what the fall semester group started. The supervisor was page did have a starting point but most of the functionality was still needed. Micron needed a supervisor page with the following features:
- A page that allows the supervisor to create and edit modules that will be assigned to the users
- A page that allows the supervisor to look at all the current users and also allow them to create new users
- Also, within the user page, the ability to look at all users and create new users as well. With the ability to click on the users name to check their module progress and also assign new modules
Creating Modules
Our first step was to add the feature of creating and editing modules within the supervisor dashboard. The previous group were able to create modules but everything had to be manually added to the database. So, it was our job to create a way a module can be created and edited without having to manually add it to the database. To do this, we needed to add more functions and data types within our project to store these modules in our database. From there we were able to start implementing this feature and added some front end functionality to the application in order to make it easier for the supervisor to create and edit modules.
Within the supervisor dashboard we implemented a search bar for quick access to modules, a create module button for module creation, and made a grid layout for all the modules within the site. The create module only gets the main requirements of a title, subtitle, description, and thumbnail out of the way. To create an actual module, the supervisor will need to click on the edit button within the kebab menu.
New Module Layout:
We came to a conclusion that we wanted to change the way the modules appeared to the intern/new hire as it seemed like it could use a little more work to make more visually appealing to the user. To do so, we changed the way the layout and style appeared to the user. We made it easier to keep track of the progress for a certain module, know the total number of submodules that are within the module, how many submodules that user has completed and how much is left to be completed. We also changed the way the progress is being tracked, instead of it being marked as completed as soon as the submodules is clicked on, a submodule won't be marked as completed until there is an interaction with said submodule.
Viewing and creating users
In the supervisor view of the web app, we created a dedicated user view to show the list of users with their names, emails, and roles. We have a search bar to search for the user that we are looking for, and the supervisor can also create users with the button, even though this will rarely be used because when a user logs in with his Microsoft ID the user will be created. We also implemented the functionality of editing the user so we can reassign the roles and even change names and email like the pictures shown below.
User Portfolio
Within the supervisor user view page we added a user portfolio view. This is linked to each user within the list. Once clicked, the supervisor will be able to see the module completed count and the total module count at the top right corner. When the supervisor clicks on a specific module in the table, it will show the total module progress with also the progress of each submodule. There is also a "Assign Modules" button that once clicked will show a list of modules that are currently avaliable and allows the supervisor to assign and unassign modules to that specific user after saving. Pictures below show the process.
