Abstract
Our project is a web application with formatting for mobile devices that provides a centralized location and method for onboarding new talent at Micron. The app also provides a method of staying in contact with supervisors as well as a map that would show a layout of the employees local office for ease of navigating around the facility.
Currently, onboarding at Micron is done with pen and paper and the experience will vastly differ depending on the location and department that a new employee is assigned to. There is no centralized way to get in touch with supervisors and finding your way around a Micron facility is a nightmare if you don't know where you're going. Our app is a sort of proof of concept for how these problems could all be solved at one time and how the onboarding process could be universal among all locations and departments.
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 chose these technologies because they are supported by Micron and so the developers there will be able to seamlessly continue development. The application is connected via the backend to a MongoDB database. We chose MongoDB for its ease of use and its ability to store JSON objects.
User Authentication:
For authentication we are using Microsoft's Authentication Library (MSAL) for Angular in order to connect to Azure Active Directory. This makes it really simple for us to be able to restrict access to the users we want and it also allows a simple swapping out of our AzureAD application for Micron's own. This was something specifically requested by our sponsors.
One of the great things about using AzureAD for authentication is that we were able to leverage Microsoft graph endpoints to grab user information specific to each user. This allows us to get the user's name, email, profile picture, etc..
Application Design
The basic framework for the UI design was made by our sponsors Jim and Amanda. The provided us with some mock up wireframes to work off of and we implemented them with some various design choices of our own. Nicholas and Jackson were responsible for creating most of the UI while Jeff and James did some smaller designs here and there as needed.
The welcome page was pretty much built exactly as our sponsors designed it with the exception of a small background for the personalized welcome message for contrast.
From the welcome page a user is presented with a navigation menu that will take them into the main part of the application. In the functional version of this application, this menu will not be neccessary as the user will have the type of employee they are assigned to them.
Once a user selects the type of employee they are, they are brought to their dashboard. The dashboard is the main part of the application and contains the onboarding modules, profile info, a navigation menu, maps, and messaging sections. The selection in the navigation menu is highlighted to indicate which page a user is currently looking at.
For the maps section, we were only able to add a simple placeholder for where the maps would go. This is because for one thing, Micron does not want anyone having access to detailed site maps and without having internal company access, we are unable to get access to these maps. The finished product would have an interactive map here based on the location of the user. They would be able to zoom in and out and easily navigate around (think google maps).
The messaging section was similar in that it would be difficult for us to make anything functional here without internal access. We also discussed this at the beginning of the project with our sponsors as being something that we couldn't implement as a messaging system from scratch, especially a secure one, is a project in and of itself.
We used the Microsoft graph endpoint to grab the profile image associated with user's Microsoft account if it exists, otherwise, we use another API called UI Avatars to get the initials of the user's name as shown below.
We designed the onboarding modules with total modularity in mind. This is mainly because we know that Micron wants to be able to put any kind of data in these such as text, video, slides, etc... To accomidate this, we used MongoDB to store them as JSON objects where each module has a unique module id. Modules can then have sub-modules which is just a JSON array of module ids. We couldn't go super in depth with this idea due to time constraints, but we believe that we ended up with a nice proof of concept for the possibilities. Each module here is expandable when clicked and can be toggled as complete or incomplete to demonstrate the module tracking system.
Lastly, we also had to make these designs work when displayed on a mobile device so here is a screenshot showing how the app looks when viewed on a cell phone.
