Redesigning Boston University’s student portal to provide easy access to student information.
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.
User research, user interface design and interaction design
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.
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.
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.
Personas created to communicate the wants and frustrations of students using the portal to stakeholders at the university.
User journey maps developed to uncover students’ emotions, frustrations as well as explore opportunities to make improvements to the portal.
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.
"How might we provide easier access to student information?"
The above statement helped generate ideas to solve the challenges with the student portal.
I prioritized my work to avoid unnecessary design efforts trying to improve every feature of the student portal but at the same time, taking into consideration essential features that’ll ensure an improved user experience for a Minimum Viable Product.
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
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.
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
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.
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.
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.
Had some students test the low fidelity wireframes to ensure I was crafting a useful product. Iterating from the usability tests:
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.
Laying down the groundwork for the desktop view of the product
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.
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!