SLATE

UX and UI redesign for the
student portal

Overview

This project, a collaboration with 3 other interaction designers, focused on improving the usability of the SLATE academic platform for post-secondary students through heuristic assessment and UI redesign.

Challenge

While being a student, I and many other students found that SLATE had a variety of usability problems such as difficult navigation, a lack of mobile options for accessing the site on-the-go, and an abundance of redundant content overtaking the primary content.

How might we create an experience for SLATE that focuses on accessibility to content and navigation for both the desktop and mobile sites.

This goal would serve as an anchor for design decisions, ensuring the right solutions using the assigned constraints.

The solution

Desktop

The UI redesign for SLATE centred around maintaining a scannable and accessible layout, creating a simple yet effective site that makes it easier for users to quickly find and digest the information they want.

Dashboard

We addressed the landing page dashboard by removing unnecessary information keeping only relevant announcements and titles. In addition, the course list would now be tiled and colour coded to improve scannability on the course material.

Calendar

A built-in calendar tool for students to schedule upcoming deadlines and reminders. Accessible from anywhere and enabling colour coded entries for students to stay up to date

Users

Since our project team consisted of current college students and SLATE is centred around student usage, we already had the main target audience. While it is for students, this still consists of a wide range of users, such as teachers and administrators, while these are equally as important, due to scope and time constraints our team decided to focus on the student portal.

During this research, to properly encompass all of the different types of the student section of users, we took a sample size for testing ranging from users that had ranging levels of experience with SLATE and users that were familiar with a similar service.

Roles

This was a group project consisting of myself and three other UX designers, Alex Thompson, Christina Weng, and Duaa Zaheer. My role consisted of collaborating with the rest of the group as we carried out the user research, testing, and as a group, we used diverging and converging methods to redesign the UX and UI of the SLATE service. In addition, I took over the mobile version of SLATE designing it’s UI and redesigning certain features for a better mobile experience.

Constraints

The two main constraints for the project consisted of time and scope.

1

As it was a school project there was a short deadline. To accommodate this we decided to maximize our time during the user research stage by prioritizing quality over quantity with our research and testing participants.

2

Since SLATE is a huge service and we had a time constraint, we decided to focus only on the student side of the portal, while the service has other equally important users like teachers and administrators, this would allow us to fit within our timeline while still redesigning a significant portion of SLATE.

The Process:

User Research

In order to identify pain points and assess which parts of the product needed to be reworked, task-based user tests were done with students who had varying levels of familiarity with the system.

Using recording and observational notes we were able to get important insights into pain points and key interactions that our testers were having difficulty with, naturally were attracted to or were able to carry out with no problems.

UX Design

In order to identify pain points and assess which parts of the product needed to be reworked, task-based user tests were done with students who had varying levels of familiarity with the system.

Using recording and observational notes we were able to get important insights into pain points and key interactions that our testers were having difficulty with, naturally were attracted to or were able to carry out with no problems.

UI Redesign

The UI redesign for SLATE centred around maintaining a scannable and accessible layout and accessible layout, creating a simple yet effective site that makes it easier for users to quickly find and digest the information they want.

Using highlight colours like the orange was reserved for important notifications like upcoming deadlines, new course content added, and recent announcements.

I was responsible for  refining the UI for the mobile version of the site to enhance for an on-the-go experience.

Our research showed us that students expect mobile options and are increasingly accessing school-related information on-the-go.

We weren't just trying to enhance the on-the-go experience - we realized that it was critical for the success of SLATE as a product.


Focusing on quick access to view deadlines, new course content and other announcements and communications with the course professor. As our research proved, students accessing SLATE on their phones consisted of mostly checking up on information and reminders, and they need access to them quickly.

Outcome

Learning:

Our testing group was limited to only two programs at the same school, which likely biased our results. Getting opinions from a wider variety of participants would broaden our understanding of the problem space and lead to stronger solutions.

Success:

The same participants found the re-designed UI much more scannable, completing tasks in roughly 30-40% less time.

Growth area:

Not all participants found the updated calendar to be useful*. This means we would need to revisit our decision to focus on that feature, either by broadening our understanding to make a better calendar or by deciding if time would be better spent focusing on other, more impactful elements.