College Portal Redesign

College Portal Redesign

OVERVIEW

I redesigned the web portal for a local college after administrators decided previous changes had hurt the portal's usability. The project was fairly straight-forward with a simple directive to improve the UX for a single screen. I soon realized, however, there were issues outside of the portal effecting it's usability. Primarily, the college's website used unclear categories and link labels like "myServices" and "myResources" in the main navigation. So the challenge for me became to not only solve the usability issues within the portal, but to also convince administrators to address what, in my mind, was the equally and possibly bigger problems with the main navigation.

Role: UX/UI Designer

My Contribution:

  • User Research
  • Task Analyses
  • Wireframes
  • Usability Testing
  • Interactive Prototypes

PROCESS

In order to discover the full scope of the problem, I interviewed several students and faculty members to discuss their past experience with the portal. Not surprising, most users found the navigation to be unclear and many had no idea where some fo the links led. The results of a survey I sent out further reinforced this idea with users declaring that they considered "easy to navigate" to be the most important characteristic of the new portal design.

Student Survey
Surveys aren't the best tools, but they can be helpful for gathering general info, especially with large user groups.

In order to furtherdefine the solution for the problem, I ran several card-sorting exercises with different groups of students and faculty. Although I had my own ideas for clearer category types and labels in the navigation, I knew getting the users directly involved would ensure the new navigation tracked with their way of thinking. The users also helped brainstorm different sub-categories, which allowed for greater specificity when classifying links.

Card Sorting Exercise
Card sorting is a wonderful way to give users a voice and get them directly involved in the design process.

During the design phase of the project, I took every chance to present the wireframes to both students and faculty. This included multiple ideas for the structure of the portal, as well, as the main navigation. I then blended and iterated on the various aspects that appealed most to users, such as displaying relevant info in the menu dropdown when the user hovered over a link to provide context for that link.

Web Portal Wireframes
Circling back to users, no matter where you are in the design process, helps to keep their needs front and center.

DESIGN

College Web Portal - Laptop

My task was to organize and present the enormous amount of information and resources the college provides to students in a way that makes the information easy to find, understand, and take any necessary actions if needed.

Solutions:

  • Restructured primary navigation with add'l info
  • Clarified IA to provide better readability
  • Integrated "micro" apps for added functionality
  • Offered "Favorites" section for often-used links

College Web Portal - Mobile

The new functionality added many new components and forced me to prioritize which elements would be near the top of the screen on mobile. By using a progressive web app approach and borrowing from mobile design patterns, I was able to make the most of the limited space and present more items on screen without the need to scroll.

Solutions:

  • Borrow patterns from mobile app designs
  • Leverage users familiarity with mobile apps
  • Bottom nav bar helps with reduced space
  • Accordion pattern minimizes scrolling
  • Clarified IA for better readability on mobile

College Web Portal - Expanded Menu

The main navigation for the portal contained numerous links and used unclear terminology to describe the different categories. Many users were surprised to find links for pages they visited every day were in the navigation and I assured them the problem was the design, not them.

Solutions:

  • Images and add'l info provides context for links
  • User-created categories for clarity
  • More categories allows greater label specificity
  • Showing related topics increases the chances users will find what they need

TAKEAWAYS

Although I understood in theory, this project made it clear getting users involved early and often is necessary to create useful products users will enjoy. Even their feedback on a rough sketch can yield valuable information, which just might prompt your next breakthrough. Also, time spent learning more about users' everyday life can provide a clearer understanding of where and why they use your product. Not only does it help you get to know your users better, but it helps foster an open rapport between you and the user, ensuring you get clear, honest feedback.