CALS DUST mid-fidelity wireframes
Problem space
Current situation
The CALS Office of Student Services at Cornell uses the Distributed Undergraduate Student Tracking (DUST) website to display completed credits for CALS and Dyson School of Business students. As an online portal with links to important resources, administrative forms, faculty contact information, and degree audits, DUST is essential for student success.
Although each student's site is updated daily with data from Cornell's PeopleSoft Campus Solutions system, DUST's outdated legacy interface and disorganized structure makes it incredibly difficult to navigate, especially for new Cornellians.
User research
I've wanted to redesign the DUST website since my freshman year. I had some extra time over winter break and got started after a friend transferred into CALS (as a fellow communication major!) and had no idea how to navigate her DUST portal.
Note: At the time of this project, I was a Cornell student and wanted to explore this visual design solution to potentially improve the student experience. I was not hired by the university to pursue this work.
Objective
DUST is an enormous website, so my goal was to identify key pain points in the navigation process by answering these questions:
• What navigation tools do users find helpful or enjoy using?
• What barriers do users face when searching for what they need on the website?
• What information do users need in order to do this?
• What navigation tools do users find helpful or enjoy using?
• What barriers do users face when searching for what they need on the website?
• What information do users need in order to do this?
Research synthesis
Key points
Key points
• Participants consistently look for a search bar when asked to locate specific information.
• Participants want access to a full navigation menu upon entering a website.
• Participants want "back" buttons to be clearly visible while exploring.
• Participants want access to a full navigation menu upon entering a website.
• Participants want "back" buttons to be clearly visible while exploring.
Information architecture
To simplify the site to its essential pages, I reorganized its content structure and created a diagram of a more logical hierarchy.
Notable changes include:
• Omitting anonymously published course evaluations - students don't read them
• Omitting the link to Student Center, a separate academic portal for enrolling in classes
• Relocating online forms from the miscellaneous "Forms and Policies" tab to their relevant pages
• Omitting the link to Student Center, a separate academic portal for enrolling in classes
• Relocating online forms from the miscellaneous "Forms and Policies" tab to their relevant pages
CALS DUST new information hierarchy
Design decisions
I modeled the site layout after Canvas, a learning management platform Cornell students use to keep track of course assignments, and Cornell Chatter, an online student community.
Some borrowed elements include:
• A fixed vertical navigation sidebar displaying all main site pages
• Content displayed within a bounded, scrollable container
• A horizontal navigation using tabs for sections within each page
• Content displayed within a bounded, scrollable container
• A horizontal navigation using tabs for sections within each page
Canvas uses a vertical navigation and an anchor link menu for page content.
Chatter uses a vertical global navigation and page-level tabs along the top of the screen.
Below are my redesigns for the DUST features most frequently accessed by students.
DUST homepage
The current homepage is a kitchen sink with links everywhere and no clear information hierarchy, resulting in (massive) cognitive overload for the user.
The key features of the new homepage are:
A. A sidebar with dropdown menus for nested pages
B. Key student information separated by section
C. A search bar for pulling up relevant areas of the site
D. A footer housing the site details and Student Services contact information
B. Key student information separated by section
C. A search bar for pulling up relevant areas of the site
D. A footer housing the site details and Student Services contact information
Degree progress: Degree audit
Aside from looking outdated, the skeletal black and white tables are impede readability and show little consistency. Text is off-centered or justified oddly, and colored text confuses the user about interactivity.
My new Student Summary has:
A. An overview bar with quick access to student stats and highlights along the top of the page
B. Tables with rounded corners to section off requirement cards and checkmark icons to indicate completed requirements
C. A secondary bar with other academic stats along the bottom of the page
D. Courses taken, organized by semester and displayed in tables with banded rows for increased readability
B. Tables with rounded corners to section off requirement cards and checkmark icons to indicate completed requirements
C. A secondary bar with other academic stats along the bottom of the page
D. Courses taken, organized by semester and displayed in tables with banded rows for increased readability
Enrollment Tools: CALS Course equivalency database
The current course equivalency database doesn't follow Cornell University branding guidelines and leaves users confused about where they are within the student portal. The absence of back buttons or navigation elements like breadcrumbs only adds to this confusion and makes it virtually impossible to return to the previous page, forcing users to reload the site and sign in again.
Transfer credit landing page
In the current experience, the user is taken directly to the Transfer Course Database through the link on their DUST homepage. This flow provides no background context about what capabilities they can expect ahead. As part of reworking the information architecture and navigation schema, I added this landing page to bridge that gap.
This net new landing page for transfer credit within Enrollment Tools has:
A. An overview explaining the purpose of the database site they're about to visit.
B. Headings to indicate hierarchy and facilitate scanning for specific information.
B. Headings to indicate hierarchy and facilitate scanning for specific information.
Transfer course database landing page - step 1
I learned from the CALS administration office that the transfer course database is hosted on a separate site with no plans to integrate it with the DUST student portal. To make the user's transition through this avenue less abrupt, I wanted this landing page to still feel like a natural part of the main experience through on-brand styling.
The redesigned transfer course database landing page has:
A. A button to return to the previous page in the main student portal
B. The university seal in the lower left corner to reinforce this is still associated with the school
C. Significantly larger selection buttons with brief explanations of each type of user
B. The university seal in the lower left corner to reinforce this is still associated with the school
C. Significantly larger selection buttons with brief explanations of each type of user
Transfer course database landing page - step 2
The current experience uses a single page to house all the information explaining what site features each user type can access. Adding headings and type hierarchy felt like a bandaid solution to me, and this seemed like a good opportunity to define identity access management policies so users are presented with only the features they can use.
This second step of the transfer course database landing page with IAM features includes:
A. A button to return to the main student portal experience
B. The university seal in the lower corner to reinforce that this is still associated with Cornell
C. Instructional text informing the user of their selected role and entitlements
D. Prominent selection buttons with the database features this particular user has access to
E. A back button to return to the previous screen where the user can select their role
B. The university seal in the lower corner to reinforce that this is still associated with Cornell
C. Instructional text informing the user of their selected role and entitlements
D. Prominent selection buttons with the database features this particular user has access to
E. A back button to return to the previous screen where the user can select their role
Databases
There are a number of styling issues in the database screens displaying distribution requirements and course equivalency information. Unintuitive text hierarchy, inaccessible use of color, cramped selection components, and seemingly infinite scroll for search results create pages with low readability and a frustrating user experience.
Distribution Requirements Database
CALS Course Equivalency Database
The redesigned database pages have:
A. A button to return to the main student portal
B. The page title displayed more prominently along the top of the screen
C. Instructional text providing context and supplementary information
D. A smaller heading denoting the database feature being used
E. Larger and more readable dropdown menus displaying the user's selections
F. note informing the user of how many search results their query yielded and their selected filters
G. A compact table with banded rows for increased readability - the course day and time information were omitted since the purpose of this database is for students to check if a course counts towards a requirement
B. The page title displayed more prominently along the top of the screen
C. Instructional text providing context and supplementary information
D. A smaller heading denoting the database feature being used
E. Larger and more readable dropdown menus displaying the user's selections
F. note informing the user of how many search results their query yielded and their selected filters
G. A compact table with banded rows for increased readability - the course day and time information were omitted since the purpose of this database is for students to check if a course counts towards a requirement
Form to submit course information for evaluation
The form for users to submit information about a course they can't find in the transfer course equivalency database does a decent job of using negative space to apply what I hope the original site builders recognized as the law of proximity. However, it still looks dated and is difficult for readers to quickly scan.
The redesigned form to submit course information for evaluation has:
A. A button to return to the main student portal experience
B. Instructions explaining conditions or requirements involved by filling out this form
C. Form section headings for easy visual scanning
D. Input fields reflecting the expected length of responses (e.g., wider, multi-line input fields for longer entries)
E. A primary action button styled with the brand accent color
B. Instructions explaining conditions or requirements involved by filling out this form
C. Form section headings for easy visual scanning
D. Input fields reflecting the expected length of responses (e.g., wider, multi-line input fields for longer entries)
E. A primary action button styled with the brand accent color
Academic advising: Interdisciplinary Studies Major form
The current form uses skeletal, black and white text fields and tables for the user to fill out. It's difficult to distinguish between where one input field ends and the next one starts, and the random underlined text makes it difficult to know what's interactive.
The redesigned form has:
A. Form section headings for easy visual scanning
B. Narrower, single-line input fields to indicate shorter responses
C. Wider, multi-line input fields for longer responses
D. Separate rows of input fields for individual tasks mentioned in that section's instructions
E. Discrete input fields to limit the user to a maximum number of input responses
F. A new "Save Draft" button as the secondary action with the primary action styled in the accent color for contrast
B. Narrower, single-line input fields to indicate shorter responses
C. Wider, multi-line input fields for longer responses
D. Separate rows of input fields for individual tasks mentioned in that section's instructions
E. Discrete input fields to limit the user to a maximum number of input responses
F. A new "Save Draft" button as the secondary action with the primary action styled in the accent color for contrast
UI kit
The following kit contains key elements of the new visual identity for Cornell University's College of Agriculture and Life Sciences degree progress tracker.
The following kit contains key elements of the new visual identity for Cornell University's College of Agriculture and Life Sciences degree progress tracker.
CALS DUST UI Kit
Takeaways
I've always wanted to take on a redesign challenge, particularly because of how many times I've gotten lost in rabbit holes on the current DUST site. I've worked with designs where I needed to follow certain branding guidelines, so this was my first project where I wasn't limited by a content management system and had creative license to build my vision.
I was pleased to hear that my friend found the new version of DUST much easier to navigate, and I hope to recruit many more participants, both familiar and unfamiliar with the site, for user testing in the future. Unlike past projects, this one was primarily an exercise in UI design. Now that the semester has started, I have better access to my user group and will shift my focus to UX research this spring. Thanks for reading, and check out my full walk-through below!