Boston University student portal

Redesigning Boston University’s student portal to provide easy access to student information.

Project overview

The Boston University student portal has remained unchanged for a long time. This redesign was an opportunity to improve the portal's information architecture, unresponsive design and unintuitive user interface.

As a graduate student at Boston University, I've had my fair share of pain points using the student portal and naturally, I was tempted to create one-sided user interfaces to improve the look and feel of the portal but as a UX designer, this situation presented an opportunity not only to address the challenges I faced but to also uncover the difficulties other students faced as well.

Role

User research, user interface design and interaction design

Close project
Top

Understanding the user

The audience

Primary target users for this project were BU students. I didn’t want to assume other students faced the same challenges I had, so I reached out to a number of BU students to understand their experience using the portal.

The responses came rushing in.

Conversations with students

While the survey gave me a sense of some pain points to look out for, I took a step further to conduct one-on-one interviews with some BU students to better understand their experiences using the student portal.

Analysing trends

Affinity maps created to analyse trends from the data pulled from the user interviews. Navigation, user interface and user experience were the most prominent trends.

Different users, different wants

Personas created to communicate the wants and frustrations of students using the portal to stakeholders at the university.

Uncovering insights and pain points

User journey maps developed to uncover students’ emotions, frustrations as well as explore opportunities to make improvements to the portal.

Problem

The student portal had several navigational challenges, a lot of redundant content/element and wasn’t optimized for smaller devices. These created several gaps in the user journey and resulted in a poor user experience on the portal.

Solution

Design

Assumptions about information architecture

Taking a deeper dive into the challenge with the student portal’s navigation. My initial assumptions placed the navigational challenges at the root of the site’s information architecture.

Boston's University's current student portal

Current information architecture

Validating my assumptions

I reached out to some BU students to complete a card sorting exercise to validate my assumptions about the site’s information architecture. Results showed my assumptions were correct. I was able to use the data from the card sorting exercise to redesign the site’s information architecture to improve navigation.

Building from the ground up

Restructuring the site’s information architecture, I took out redundant content and moved some content to sections where students thought they should be placed logically.

Redesigned information architecture

Mobile first or desktop?

It’s always a smart choice to design for small screens and then scale but for this project I decided to design for desktop first.

Reason:
During user research, I observed that most students access the portal from their PCs. This was because the site wasn’t responsive, forcing a majority of students to access the portal from a PC. I wanted to solve for what students were familiar with before solving for mobile devices.

Style guide

I incorporated the standard web colors on the current portal as much as I could but also introduced a Neo-Grotesk sans serif typeface combined with other visual elements to improve typography as well as the overall user interface.

Designing for desktop

Highlights of an improved experience

Early iterations

Had some students test the low fidelity wireframes to ensure I was crafting a useful product. Iterating from the usability tests:

Changed language in the “Academic” section to assist the user’s intuition.

Solving for one pain point at a time

Using the flow above, I was able to improve the experience for the following set of use cases

Use case- Class information

Use case- Customize dashboard

Use case- Profile/personal information

Use case- Academic summary

Use case- IT support information

Iteration- Onboarding

Further user tests on the desktop version on the portal revealed that the dashboard customization feature wasn't intuitive, so I created a tour feature to highlight new features of the redesigned portal.

Designing mobile experience

Laying down the groundwork for the desktop view of the product

Mobile view use case- Class information

Mobile view use case- Profile information

Learnings

This project particularly had a lot of card UI designs. I knew I had to work fast and smart by creating reusable components in figma and I found Meng To’s course very useful. I also learned how to create design systems and style guides which were two skillsets I was hoping to add.

This was also my first time designing a product for both mobile and desktop and I thought it was a great learning experience. If I would have done anything differently, it would be exploring a dark mode version of the dashboard.

Reflection

Although my design solves the primary challenge with the portal, utilizing web analytics to inform design decisions would take the user experience to another level. A good example of this would be using recent analytics of the most visited pages to prioritize items on the dashboard homepage. I believe that would go a long way in improving navigation on the portal.

Despite the fact that I was able to solve for students' needs, I felt like this project was lacking on the business side of things. Over the course of this project, I always felt like I did not have the full “behind the scenes” picture of the reason why the school has not made design changes to the portal in such a long time. I think having some behind the scenes context would help me better balance user needs with business needs. 

I plan to present this case study to Boston University and work with them to bring this project to life.

Thanks for reading!

I'd like to hear about your project

Next project

Learning management system