Design
This page is the default ios home screen showing the app icon in the lower left corner. Users will be able to click on this icon to access the app.
- Click the app icon to launch the app (the icon has been blown up next to the image of the homescreen to be easier to see)
The map page is the default page which is the main feature of the app. The page features a moveable map of the entire UofSC campus for locating classroom buildings, parking lots and garages, and housing, among other things. At the top, there is a search bar, a button to add custom pins, a routes button to view previous routes, and a button to view obstacles, such as construction. Users are able to click on any pin on the map.
- Click the search bar to bring up the keyboard
- Click on a pin to have a menu pop-up
- Click the routes button to view routes the user has made
- Click the add pin button to place a custom pin on the map
- Click the view obstacles button to enable and disable construction, traffic congestion, and closed roads
- Click any icon on the main menu bar at the very bottom of the screen to move to a new main screen
The menu displaying information about a location pops up when a user clicks on a pin on the map. The pin will enlarge and a menu displaying an image, information, an 'Add to favorites', and a 'Take me there' button will pop up. Here, the user has clicked on the Close-Hipp building's pin. Clicking on the 'Take me there' button will display the fastest route to the location.
- Click off the menu to have it go away
- Click on 'add to favorites' to have it as a saved location
- Click on 'take me there' for the fastest route to the location pop-up
The fastest route to a destination will display when a user has clicked on a pin and then click the 'Take me there' button. It will show the estimated time to get to the location, and the user can click the 'Start' button to start the route for directions to take.
- Click the back button at the top-left to go back to the default map page
- Click the start button to start getting directions to the destination
- Select the 'your location' or 'current building' text fields to change these options
Main Staff Directory Page The staff directory page will be used by all users (although most prominently by students). This page features a complete list of all of the professors at UofSC. In addition to a search feature at the top, there is a sidebar to quickly navigate the list of professors in alphabetical order. Once the user finds the professor that they want to learn more about, all they have to do is click on them and it will bring them to the professor's 'information' page.
- Click the search bar to bring up the keyboard
- Click the sidebar to search professors by their last name (in alphabetical order)
- Click on any professor's name to learn more about them by navigating to the information page
- Click on the user icon in the top-right corner of the screen to login to your account and access stored information
- Click on a tab in the tab bar to go to any other page
The professor's information page is used to inform users all about a certain professor that they have selected from the Staff Directory page. On this page, pertinent information is displayed such as their name, a photo so that the individual can recognize the professor, contact information, the professor's college, and office hours. In addition to the times that the professor hosts office hours, there is also an easy-to-see icon that will show green or red depending on if the current time correlates with the professors office hours. If the professor is currently hosting office hours, the icon will be green. If not, the icon will be red.
- Back button (chevron) in the upper-left corner to return to the Staff Directory page
- The "Let's Connect" section hsa all of the social media handles of the professor (email, linkedin, etc.) that will be links to the platform. Click on them to go to their profile
The main schedule page displays the list of a student's current class schedule. Each block represents a class, displayed with the class code, the name of the class, and the time period(s) of that class, specified with the respective abbreviated days, as well as the starting and ending times.
Each block is also accompanied with two buttons--a notification toggle, and a "more" button. The notification toggle is represented by a bell icon, and when toggled on, will send a notification to remind students that their class is starting soon. The time for the notification to appear will be specified within the "Notifications" tab within the settings. If the notification toggle is toggled off, it will display as a crossed out bell, and will not send any notifications to students.
The "more" button will open up a small menu, allowing users to either edit or delete the class whose "more" button was selected.
Lastly, the main schedule is also accompanied with an add class button at the very bottom of the screen, represented by a plus icon. When selected, this will bring students to a new screen with a form to add a class to their main schedule page.
- Click the "more" button on any class block in order to bring up a small menu with two options to either edit or delete a class
- Click the add class button (plus icon at the bottom of screen) in order to move to the "Add Class" screen with a form
- Click any icon on the main menu bar at the very bottom of the screen to move to a new main screen
- Click on the user icon in the top-right corner of the screen to login to your account and access stored information
When the "more" menu is clicked on a particular class block, a small menu is displayed with two options: edit and delete. Clicking edit brings up an edit form that is filled with the particular class's respective info, allowing students to edit the properties of that class. Clicking delete allows a student to delete a class from their schedule.
- Click the edit button to move to the edit class screen where you can edit a class's properties
- Click the delete button in order to proceed with deleting a class
- Click anywhere outside of the menu to close the menu
When clicking delete on the "more" menu, a modal dialog is brought up to the user's screen. It asks to confirm whether or not a student is sure to delete a class from their class schedule, using a yes or a no buton. This is to ensure a student is ready to delete a class to prevent any accidential deletion resulting from events such as a misclick.
- Click the yes button in order to delete the selected class and return to the main schedule page
- Click the no button OR click outside of the dialog in order to return to the main schedule page without deleting the selected class
The add class page brings up a form in order to add a class to a student's schedule. The form contains fields that represent the makeup of a class and its properties, such as the class code, the class name, the time period of the class, and the days at which the class occurs. It is possible that some classes have different time periods at different days of the week, to accomodate this, there is a button at the bottom labeled "Add Time Period" which spawns a new fieldset to add a new time period for the added class. Once a student has filled out the entire form, they can add the class to their class schedule by clicking the "Add Class" button at the bottom of the screen.
- Click the Add Class button to return to the main schedule page with the added class as specified in the form
- Click on the user icon in the top-right corner of the screen to login to your account and access stored information
- Click the back button (chevron) in the upper-left corner to return to the main schedule page
When clicking edit on the "more" menu from the main schedule page, the user is brought to the edit class screen. It contains a form that is identical to the add class screen, however all of the fields are filled out with the selected class's properties. From here, a user is able to change a class's properties. Once finished, the user is able to save their changes by clicking the "Save Class" button at the bottom of the screen.
- Click the Save Class button to return to the main schedule page with the updated class as specified in the form
- Click on the user icon in the top-right corner of the screen to login to your account and access stored information
- Click the back button (chevron) in the upper-left corner to return to the main schedule page
Some features on the Cocky's Way app requires that a user be logged in so that their data can be save. The features that require this are primarily the schedule page, and the favorites feature where locations can be saved to their account as favorites for quick access. In the event that a user navigates to one of the pages/features, they will be met with this screen to prompt them to either login or register for the app.
- Click the Login button to go to the login page
- Click the Register button to go to the register page
- Click any of the tabs in the tab bar to go to a different page (that doesn't require login)
The login page is the first page that a user is greeted with once opening up the app. It displays a very simple form, with two fields to type in an existing user's email and password, which they then can login with using the "Login" button below the fields. Under the "Login" button is a "Forgot Password" option that users can use if they forget the password to their account, which will lead them to an account recovery screen. If a student does not currently possess an account, on the bottom of the page there is a "Register" option that brings students to a registration form, which when completed would allow them access to the full functionality of the app.
- Click the Login button to be brought to the Map page (assuming the email and password given belongs to a valid account)
- Click the Forgot Password option to be brought to the Forgot Password screen
- Click the Register option at the bottom of the page to be brought to the Register page
When the user clicks the Register option on the Login page, they are brought to the Register page, which displays a form that users can fill out in order to create an account to use the application. It contains an email field to be associated with the account well as two password fields, one to set the initial password and one more to confirm the password. Directly under the form sits a register button, which when clicked (assuming the values for the form fields are valid) will create a user account and will allow the user to possess full functionality of the app. If a user does already possess a valid account, a "Login" option is displayed at the bottom of the screen to switch to the Login page.
- Click the Register button to be brought to the Map page (assuming all fields within the form are valid)
- Click the Login option at the bottom of the page to be brought to the Login page
When the user clicks the "Forgot Password" option on the Login page, they are brought to the Forgot Password page, which provides a short description of instructions for the user in order to allow them to regain access to their acccount. Under the description sits a form with a single field, asking the user to input their email for their account, and directly under this sits a "Send Email" button to continue the account recovery process. Assuming the email provided within the form is valid, an email with a link is sent to that student's email in order to reset their password. When that link is clicked, they are brought to the Reset Password page in order to finish the account recovery process.
- Click the Send Email button to be brought to the Reset Password page (assuming the email provided belongs to a valid account)
- Click the back button (chevron) in the upper-left corner to return to the Login page
When the user clicks the "Send Email" option in the Forgot Password page, and subsequently clicks the link in the sent email (assuming the email belonged to a valid account), they are brought to the final stage of the account recovery process, the Reset Password page. It contains a short form to enter a new password for an existing user account. The first field is to set a new password, and the second field is to confirm the new password. Once the user is satisfied with their new password, they can hit confirm to be brought back to the Login page, where they can log into their account with the new account credentials.
- Click the Confirm button to be brought to the Login page
- Click the back button (chevron) in the upper-left corner to return to the Forgot Password page