REAL Portal Redesign

Overview

The outdated UI and disorganized information hierarchy made it difficult for our end users to navigate the site and accomplish the REAL's goal of helping students find experiential learning opportunities.

This redesign was a collaboration between two hubs at the Teaching + Learning Commons at UC San Diego—Digital Learning Hub and Engaged Learning Tools (ELT). It was a student-led project that communicated with multiple parties (supervisors, students, professors, and a vendor) to rework and re-envision a site that was not originally intuitive for its users (students and faculty). I was the sole UX Designer while my coworker Jessie was the expert on the site.

Timeline

Sep 2019 - Mar 2020

SKILLS

Focus Groups
Usability Testing
Prototyping
Vendor Presentation

Tools

Figma
UCSD CMS -
Hannon Hill Cascade

initial site review

We outlined pathways students and faculty may take to see how the site was functioning and what content and resources existed there.

We then outlined what we perceived to be current student needs and how the site addressed those needs.

The navigation focused on separate users, but both users had similar actions.

Students had difficulty distinguishing the difference of purpose between the REAL and Handshake (a job-seeking platform within UC San Diego)
They lacked an easy-access pathway to find experiential learning opportunities
Furthermore, the various information in the site hindered the ease of use, especially from the student perspective, where there seemed to be information that did not directly relate to finding opportunities in the REAL.

redesign proposal

After further discussion with our supervisors, we decided that a site redesign that focused on improving information architecture through an overhaul of the main navigation to address and separate user-action was more straight-forward and applicable.

The current navigation suggested that there were separate actions for each type of user. This created unnecessary clicks and confusion because actions between both groups could be combined and therefore reduce the pathway taken.

The main navigation was updated to contain “Opportunities, Profiles, and Resources.” By taking this approach, we were able to combine both the student and faculty perspectives and effectively streamlined the information presented on the site. As a result, we were able to eliminate irrelevant information and make the site more consistent with fulfilling users’ needs of finding opportunities and interacting with profiles.

mockups

Redesigned information architecture - navigation is based on user actions

Filters moved to the left and filter language better reflects student experience.

Posts are separated by timeframe posted.

Profile details are sorted by cards to avoid overload of information.

Skills and interests can be populated.

Reworked "Profile Status" to improve user's understanding of profile visibility.

Streamlined Resources to only contain information relevant to the REAL. Previously, it contained outside resources that overall confused users.

Focus groups

After creating mockups, we conducted student focus groups to ensure that our view on the original site aligned with users' perception of the site. The focus groups each consisted of four UC San Diego undergraduate students from various majors for a total of 8 students. Some had previous experience with the REAL, while others had never heard of it before. The questions we asked pertained to the current site and tackled the main pathways a student may take—managing a profile, finding opportunities, and finding other resources.

results

We then presented them with the mockups, asking them of their initial thoughts about the revised navigation. From the focus groups, we gathered that the students we interviewed had similar views to what we had predicted from our initial review of the site. Students were enthusiastic about using the site for its intended purpose as an opportunity database but found it difficult to get to useful pages and information due to the cluttered design and overwhelming amount of irrelevant content that lived on the site.

Prototype + Usability testing

Test our Prototype!

We conducted usability tests to decide whether our high-fidelity prototype was intuitive, easy to use, and fits the student’s mental model of the site.

We created user tasks that encompass the main actions a student will take (edit/view student or faculty profiles, find opportunities, and find more information related to REAL) and tested them on four, individual students.

Overall, tasks were executed well and we found that a lot of our changes streamlined user pathways and reduced confusion while using the site. There were discrepancies with what information was located in the "Resources" vs "About" tabs.

Vendor presentation

After doing research and testing, we prepared a presentation to our vendor, Notch8. Notch8’s main role is handling the data of the site—user logins and opportunities. The rest of the site is controlled by ELT through Cascade, provided by UC San Diego. The main data changes we proposed were to streamline the login to one entry rather than separate ones for students and faculty. In terms of UI, we proposed the display of cards for the Profile page and moving Opportunities Filters to the left. For each proposed change, we followed with data and findings from our focus groups and usability testing. Notch8 was very impressed and expressed their appreciation for the prior UX research we've done.

next steps

Currently, we have updated what we could through Cascade, while Notch8 is in the process of updating the data-driven pages. You can view the live site! The first phase has been deployed, but Notch8 will continue to update the data-driven pages in the coming months.

takeaways

This was my first time seeing a design project end-to-end while interacting with multiple important parties. It showed me the importance of research and how well to present the research. Presenting our findings to our supervisors weekly, interacting with our end users, and meeting with Notch8 has been so rewarding as it has shown me how much impact a UX designer has in a development process.