Design
Our screens were created using the Figma design tool. The color palette that we used is pictured below:
The login page allows users to login to the dashboard or create a new account. If an account has been made, typing the username and password and clicking “Login” will redirect the user to the Main screen. Clicking “Create an Account” will redirect the user to the New Account screen.
The password reset screens are accessed when a user selects the "Forgot Password" link on the login screen. These screens will be used to verify the identity of the user and allow them to set a new password. The last screen will redirect the user back to the login screen.
This is the initial screen that the user will be redirected to when they first click the link on the login screen. The user will verify their information before being able to answer their security question.
This is the security question screen that will be accessed after the user's initial information is verified. The user will answer their security question to be able to continue to reset their password.
This is the new password screen that will be accessed after providing the correct answer to the security question.
After entering a new password and confirming it, they will be directed to the password reset confirmation screen that will notify the user that their password has been changed. The user will then be prompted to return to the login screen.
This is the form for new accounts that will be accessed from the login screen. This information will allow users to connect to other department members and employees, upload a photo, as well as allowing the users to set their initial login information. The user will then be directed to the log-in screen.
This is the first screen the user sees when they log into the app. Here, the user will be able to easily view which tasks are due soon and any new notifications or messages they have received.
The navigation bar and menu button are accessible on all screens while inside the application in order to navigate through the screens with ease. The most important functionalities are displayed in the bar, including messages, the calendar, and the user profile. When the "hamburger" icon is selected, a side menu is displayed with more screen options as well as settings. Selecting the respective buttons on the side menu will bring the user to the respective screens.
This is the discussion board that will allow users to communicate both one-on-one or as part of a group discussion. This screen will be accessible from the side menu and the navigation bar available to users after they login.
The new message page can be accessed from the Message/Discussion board and the user profile page. This page will allow employees to select more users to add to the new discussion, or leave it as a message sent to one person. The user creating the discussion will also have an option to name it.
After the user sends the first message, they will be redirected to the discussion/message page. This page can be accessed from the main discussion page as either a message or discussion.
The User Profile screen displays all of the information associated with a user such as: Name, Title, Office location, etc. It is displayed when a user profile is selected. It also provides contact information that may be helpful for other users. A user can edit their own user profile by clicking on the edit button in the top right of the screen. Buttons for scheduling a meeting with the specific user or messaging the user directly are also included on this screen; upon selection, the user will be directed to the calendar and messages screens respectively.
Selecting the calendar icon on the navigation menu or side menu will take the user to the calendar screen, where users can create, delete, and view meetings and deadlines that have been saved to the calendar. The calendar is unique for each user and depends on the events that were either created by the user themselves or the events that the user was added to.
Selecting an event from the event menu will allow the user to view the event description.
Selecting the trash bin icon on the event description will prompt the user to cancel the selected event.
Selecting the add button from the event menu will prompt the user to create an event. The user can then choose between creating a meeting or a deadline. Once the event is created, it will display on the calendar. The user also has the option to set an event to a specific theme or color for organization/cosmetic purposes.
Selecting the Tasks button from the side menu will take you to the Tasks screen, which displays a list of pending and completed tasks within projects, facilitating efficient task management and tracking within the organization. The user can edit, add, or delete tasks as well as search for a specific task.
Clicking the "New Project" button will add an empty project tab and give the user the option to edit the due date and add tasks.
Selecting the Performance button on the side menu will bring the user to the Performance & Statistics screen. This screen provides the user with a gauge chart and percentage that measures them and their team's on-time task completions and meeting attendance.
Selecting the Performance Summary button on the Performance & Statistics screen will take the user to the Performance Summary, where the screen displays a line chart that plots the user's team's expected tasks completed over time versus their actual tasks completed over time. The user will also see a 3-sentence summary that highlights their team's number of tasks completed compared to what is expected, and the percentage of those tasks done that were completed on time. The user also has the option of going to the Attendance screen through this screen.
Selecting the Attendance button on either the Performance & Statistics screen or the Performance Summary screen will take the user to the Attendance screen, which displays each employee in a list, along with the employee's percentage of meetings attended. Clicking on an employee will display the list of meetings and will highlight the meetings that the employee did not attend.
The employee attendance overview page is accessed by selecting an employee from the attendance page. This page will display the number of tasks both completed and uncompleted, number of tasks completed late and on-time, and number of meetings attended and missed.
Selecting the Analysis button on the Performance & Statistics screen will take the user to the Analysis screen, which will first prompt the user to upload a .csv or Excel file. Clicking on the Upload icon will open the user's file menu so that they can select one to perform analysis on.
Once the user uploads a file, the data contained in it will be displayed to the screen, which the user can scroll through if the file is large enough. The user also has four options:
- Summarize
- Model
- Upload New, which allows the user to upload a new .csv or Excel data file to analyze instead and direct the user back to the initial Analysis screen.
The Summarize screen will allow you to select the category from the analysis screen that the user would like statistics for. These categories correspond to the columns in the .csv or Excel file that the user has uploaded. The user can access this screen from the analysis menu and will be able to return to the analysis screen or continue to a category.
The Summarize category screen will display the statistics for the user selected category. This screen is accessed from the summarize screen, and the user will be able to return to the initial summarize screen using the back arrow button.
The Model screen prompts the user to select one or more columns to be used as independent variables and one column to be used as a dependent variable. These columns correspond to those in the .csv or Excel file that the user has uploaded. If the user wants to go back, clicking the arrow in the top left will take the user back to the Analysis screen.
Once the user clicks the "Create Model" button, the screen will display a summary of the model, including the coefficients for the line of best fit and the model's R^2 value. If the user wants to go back, clicking the arrow in the top left will take the user back to the "Create Model" screen.
Upon selecting the Settings button in the side menu, the user will be directed to the Settings screen. The settings menu allows users to find and change many different types of settings such as: Account settings, Notification settings, and Appearance settings. It also allows users to find resources for help, read the privacy policy for our application, learn about the developers, and sign out of the application.
When the account section on the Settings screen is selected, the Account Settings screen will appear; this is where you can edit your user profile, username, or password. Clicking "Edit User Profile" will take you to the user profile screen. Clicking "Change Username" will pop up a screen allowing the user to edit their username. Clicking "Password Reset" will take the user to the Password Reset screen respectively. The user can click the Settings button to return to the Settings screen.
This is the screen that pops up upon clicking "Change Username." After inputting the current and new usernames and confirming the password, the user may click "Confirm" to update their username.
When the notifications section on the Settings screen is selected, the Notification Settings screen will appear; this allows users to customize their notifications for their specific preferences. Users can choose where they would like to be notified (email or phone) as well as what types of notifications they will receive. The user can click the Settings button to return to the Settings screen.
When the appearance section on the Settings screen is selected, the Appearance Settings screen will appear; thi allows users to choose whether they would like to see the traditional color scheme or a "dark" scheme. The user can click the Settings button to return to the Settings screen.
When the Help and Support section on the Settings screen is selected, the Help and Support screen will appear; this gives users the contact information to get in touch with the application's support team. The user can click the Settings button to return to the Settings screen.
When the Privacy Policy section on the Settings screen is selected, the Privacy Policy screen will appear; this allows users to easily access the Privacy policy document. The user can click the Settings button to return to the Settings screen.
When the About Us section on the Settings screen is selected, the About Us screen will appear; this provides an overview of team and web applications, offering information about the developers, vision, and values. The user can click the Settings button to return to the Settings screen.
Selecting the Sign-Out Button within the Side Menu Button or Settings menu will sign the user out of the application and direct them to the log-in screen.