Skip to content
Isaac Mayernik edited this page Oct 18, 2024 · 31 revisions

Phone Home Screen / App Icon

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.

Image of home screen of iphone Logo

Navigation:

  • 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)

Map Page

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.

Image of default map page

Navigation:

  • 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 filter pins button to change what pins will appear on the map
  • 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

Map Page w/ Pin Selected

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.

Image of Map w/ Pin Selected

Navigation:

  • 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

Map Page w/ Route Started

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.

Image of Map w/ Take me There Started

Navigation:

  • 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

Staff Directory

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.

Image of Staff Directory Page

Navigation:

  • 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

Professor's Information

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.

Image of professor information Page

Navigation:

  • 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

Schedule Page

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, the assigned professor 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 "trash icon" 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 "trash icon" button will open up a small menu, allowing users to delete the class whose trash icon 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.

Image of main schedule page

Navigation:

  • Click the "trash icon" button on any class block in order to bring up a dialog to confirm whether or not to 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

Main Schedule Page w/ Delete Dialog

When clicking on the "trash icon" button, 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.

Image of main schedule page with delete dialog

Navigation

  • 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

Add Class Form

The add class form page brings up a form in order to add a class to a student's schedule. The form contains fields to refine a search for specific classes, such as the current semester, the class's subject and optionally the class's course number. Once a user has filled out an entire form, they can click the search button and a search is done on the API provided by classes.sc.edu in order to bring up a list of classes based on the search queries given.

Image of add class form page

Navigation

  • Click the Search button in order to search for classes with the given values 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
  • Click any icon on the main menu bar at the very bottom of the screen to move to a new main screen

Add Class Search Results

The add class search results page brings up the resulting list of classes based on the search query specified by the values given in the add search form. Each class comes with the class code and section, along with the professor assigned to that class and the time periods that the class is offered. Once finding the matching class, a student can click the plus button by the class desired in order to add that class to their schedule.

Image of add class search results page

Navigation

  • Click the add button on any class in order to return to the main schedule page with the freshly added class being added to the schedule
  • 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 add class form page
  • Click any icon on the main menu bar at the very bottom of the screen to move to a new main screen

Login Prompt 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.

Image of login/register prompt page

Navigation

  • 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)

Login Page

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.

Image of login page

Navigation

  • 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
  • Click any icon on the main menu bar at the very bottom of the screen to move to a new main screen

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.

Image of register page

Navigation

  • 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
  • Click any icon on the main menu bar at the very bottom of the screen to move to a new main screen

Forgot Password

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.

Image of forgot password page

Navigation

  • 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
  • Click any icon on the main menu bar at the very bottom of the screen to move to a new main screen

Reset Password

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.

Image of reset password page

Navigation

  • 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
  • Click any icon on the main menu bar at the very bottom of the screen to move to a new main screen

Settings Page

When the user clicks the "Settings" icon on the bottom navigation bar, they are presented with the page shown here. The settings page allows the user to navigate to sub-pages where they are able to edit their settings to their preferences. The settings menu includes options for: privacy and security, favorite locations, notifications, accessibility, and account settings. The settings for notifications and accessibility are toggle-actuated. The My Account option will take users to the Login page, where they will be able to change their password if they are already logged in.

Image of settings landing page

Navigation

  • Click any of the settings buttons to edit their respective settings.
  • Click any icon on the main menu bar at the very bottom of the screen to move to a new main screen

Privacy and Security Page

The privacy and security page allows the user to disable location services via a toggle switch. This will disable GPS and internet-based location tracking for the app. The page also allows the user to delete their data (history, cookies, and the like) without completely erasing their account.

Image of Privacy and Security page

Navigation

  • Click the back arrow in the upper left corner to return to the settings landing page
  • Click any icon on the main menu bar at the very bottom of the screen to move to a new main screen

Favorite Locations Page

This page allows the easy addition and removal of a location in the "Favorites" category. In order to remove a favorite location, the user will click the ellipsis on the right side of the favorite location box. Doing so will open a small interactive box with the word "Remove" in the center. Clicking the box will remove the location from the favorites list, but not from the map. Clicking the circular button with overlaid plus sign will allow the user to add a location of their choosing to the Favorite Locations list.

Image of Favorite Locations page

Navigation

  • Click the back arrow in the upper left corner to return to the settings landing page
  • Click any icon on the main menu bar at the very bottom of the screen to move to a new main screen

Favorite Location Removal Page

This page displays the Favorite Locations page after the removal of a location. The "Removed" notification will remain for 5 seconds, then slowly fade away to confirm to the user that the location was, in fact, removed. After the notification has faded, the page will return to its normal status of displaying the favorited locations.

Image of Favorite Removal page

Navigation

  • Click the back arrow in the upper left corner to return to the settings landing page
  • Click any icon on the main menu bar at the very bottom of the screen to move to a new main screen

Hex Codes

Garnet: 73000A Dark Gray: 666666 Medium Gray: B5B5B5 Light Gray: D9D9D9

Clone this wiki locally