Home Page Design Expansion

[rajmeet2001]

Overview

The homepage has been expanding in terms of functionality. Feel free to use this discussion as a way to add your ideas to this discussion.

[syl15]

Identified Existing Features

In terms of existing features, Tirzah and I identified the following after reviewing mockups on Figma:

1. Name of the student
2. Classification (Freshman, Sophomore, etc)
3. Majors and minors
4. Honors and scholarships
5. Current GPA
6. Number of hours completed
7. Number of hours left to take
8. Estimated graduation date
9. Overview of student plan by semester

Possible Features/Corrections

After brainstorming/creating mockups, these are the features we suggest implementing:

1. Adding a progress bar or percent completion circle graphic to illustrate completed credit hours. More visual components make the design more eye-catching and stimulating for the user.
2. Displaying any action items (ex. holds) or important dates (ex. Census day)
3. Adjusting colors to differentiate disparate functionalities. More colors are better for branding and less mind-numbing per se to look at
4. Having the option to import grades for each class taken on the student's plans. This is more of a stretch feature but this could later be used to suggest courses/plans for students. (Ex. You struggled with course X last semester and course Y is similar in difficulty).

Note: If choosing to display GPA and or grades, it would also be beneficial to include an option to hide it. Not all students associate mastery of the material with grades earned. (This might fit better with the message that Nebula is striving for but on the other hand, a lot of students DO like seeing GPA/grades).

5. Have the option to click into the classes on your degree plan and have a tab/bubble pop up that shows more information (Ex. section name, number, location, meeting dates, and professor contact information. Maybe even a map). This would be pretty helpful as a mobile app, especially for those who are unaccustomed to UTD (i.e. Freshmen, transfers, international students).
6. Adjusting overall formatting & simplifying designs

• Mutual agreement that vertical layouts are preferred over horizontal layouts.
• Account for split-screen functionality
• If going for mobile functionality, perhaps displaying plans as a vertical recycler view/infinite scroll
• Differentiation between majors and minors (ex. display classes related to my major only or my minor only; hours to complete each, etc)

Mockups

Tirzah's mockups:

Degree "bubbles" similar to Discord tags. A simplified and more colorful version of the current degree search functionality. Can still retain the original navigation bar.

Landing page for the individual student. Again, more colors and the tags/bubbles associated with the student. Percent completion circle for more color/visual appeal.

Alternative landing page for an individual student.

[ZzRanger]

I like the ideas mentioned above! I think 4 and 5 might be a stretch for the Beta release, but they would be cool features to add down the line. I have a couple of questions about the Home Page Design.

1. How will the user navigate between different screens of the application? The previous mockups had a navigation drawer, but I don't see a way to navigate on the mockups above.
2. I assume the user can create multiple plans. Which plan will be shown to the user on the Home Page (if any), and how will the user go about selecting a plan to be displayed on the Home Page?

[syl15]

Tirzah and I met today to go over the home page and profile page designs. The meeting notes are also available on Notion.

Landing or Overview Pages

• Keep the progress circle but ensure the user is clear on what it actually means or represents
• Progress graphics are visually appealing but the user probably won't know what it stands for upon first glance. Could potentially have a hover feature that reveals what its function is.

Displaying Degree Plans

• Retain the current design but have rounded edges and more square than rectangular
• In terms of displaying the plans, the user should be able to favorite or pin plans of choice at the top; otherwise display in order of most recently accessed (or created)
• Retain feature allowing the user to name plans
  
• Simplify the preview by having only course numbers. Users could hover to view the class name.
• Allow the user to select what they want to see. Have a drop-down menu or checkboxes (i.e. Google Calendar's option to display multiple views) to allow users to filter (ex. by semester or by year, include or exclude winter/summer, etc) .
• Keep the display of credit hours. May appear more slightly cluttered but is useful information for a student planning their degree.

Profile Page

• We thought that the current profile page mockup by Rajmeet didn't necessarily have enough information to necessitate a whole other screen without being redundant (ex. Credit hours completed already exists)
• Given current information, there would be a lot of white space. We liked Caleb's Constellation Idea from Discussion Degree Validation & Visualization Blog #88 but believe a display like that would actually be better on the landing page because it's customizable to each user and just a unique/aesthetic feature.
• Could add some other data visualization feature (ex. a map, a bar chart)
• When editing their profile pages, users should be able to edit the name, email, displayed major, and be able to delete their accounts
• Need to find more relevant information to display such as biographical information, career plans after graduation, expected graduation year, etc.

Questions/Considerations

• Is there a concrete need for a separate Profile Page? (Currently seems pretty redundant)
• Where is the GPA information coming from? Can we even import GPAs or will students just have to add or calculate their own?

Navigation

• We thought that the transparent navigation bar from the Landing Page mockup would be fine implemented for the home page.

[ZzRanger]

Overall

The ideas mentioned here are great. I like the ideas for the progress circle and displaying degree plans.

Degree Plan Display

The degree visualization could be one of the "filters" when displaying a degree plan.

Profile Page

You do bring up a good point about the profile page. There is information about the user that we would want to display:

• major
• graduation date
• courses taken
• honors / fast track programs
• scholarship info

However, instead of a profile page, we could put this info inside a Settings page underneath a "User Information" category.

Questions/Considerations

I wrote out my thoughts on the profile page above.

Regarding GPA, there will be a place for users to add the courses they've already taken at UTD and AP/Transfer Credits. That information will be used to calculate GPA. The original plan was to put that inside the profile. However, I'm torn between putting it inside Settings or creating a separate screen solely for adding courses/credits.

Please let me know what you guys think.

[ZzRanger]

The team met yesterday to finalize the designs for the Home Page, which can be found below:

https://www.figma.com/file/cycV0bxP6vTJJYUONFoBr0/Planner-Mockups?node-id=24929%3A31445