ScottylabsSpread.png

Scottylabs Course Tool

The ScottyLabs Course Tool uses API course data from Carnegie Mellon University for college students to easily search, compare, and view the student reported course hours of courses. The project is a redesign of the interface with new features implemented.

Role
UX/UI Design
Prototyping

Timeline
Fall 2021

Tools
Figma

Individual

 

Problem Space

The ScottyLabs course tool requires the users to do their own research on courses since the website only allows course IDs as input. If students wish to repeatedly view course data of a specific course, it must be inputed each time the website is opened, causing frustration.
 

Solution

Iterating upon the previous model, new features such as searching ability through key terms, filtering, and bookmarking courses are being implemented to alleviate these issues and increase usability.
 

Impact

Increased student usage and website traffic of the course tool and positive feedback from students about new UI and feature additions.

Before
 

Screen Shot 2022-01-05 at 11.13.54 PM.png
Screen Shot 2022-01-05 at 11.14.09 PM.png

After
 

course search — course displayed.png
Bookmarked courses page.png

Social Media

IMG_5912.jpg
IMG_5913.jpg
IMG_5915.jpg
IMG_5914.jpg
IMG_5916.jpg

Design Process

User Personas

To understand the needs and experiences of potential users, I created two personas based on inputs from current users.

persona1.png
persona2.png

Wireframe

Understanding and creating the user flow helped decrease potential issues in experience before creating more developed prototypes. Here, there are two main paths that the user can take: logged in and not logged in. When the user is logged in, they can access course detail data (hours and ratings) as well as bookmarking courses. Users not logged in can still search for courses and look at course descriptions.
 

wireframe.jpg

Sketches

Because most of the users identified that they use the website in a utilitarian way, which essentially means that the purpose of the website would be to deliver information rather than be the main focus, I created a set of criteria I had to achieve for the interface.

1) Focus on intuitive, usable features and styles
2) Clean and simple in both look and experience
3) Not an overload of information and not intimidating

Untitled_Artwork 178.jpg
Untitled_Artwork 176.jpg
Untitled_Artwork 177.jpg
 

First Iteration

Since the experience of the website is dependent on if the student is logged in or not, I made logging in the landing page of the website. Moreover, since there are two main types of information being presented: course description and FCE data (course data), I decided to keep these as two buttons that the user can toggle between depending on which information they want. However, I included course hours on the course description page for easy comparison between courses.
 

Screen Shot 2022-01-01 at 5.56.57 PM.png

User Testing

I tested this prototype with potential users, some who have used the pervious version of the website and some users who have never used the website before.

Positive: Overall the users were able to navigate smoothly through the website, and commented that the flow and main interactions felt natural and intuitive.

Negative: Some users got mixed signals from interface buttons and had difficulties on the landing page.

usertesting1.png
usertesting2.png

Design Alterations

changedusertesting1.png
changedusertesting2.png

Final Design

Desktop Version

Screen Shot 2022-01-10 at 9.24.10 PM.png

01. Landing Page

Login through the school portal or continue to search for courses without certain features upon website launch.

02. Search for Courses

Use keywords and filters to display suitable courses.

Screen Shot 2022-01-10 at 9.23.37 PM.png

03. Check Student Reported Course Data

Gain access to student reported course hours, course rate, and teaching rate for easy comparison.

Select options to filter by average course hours with varying semester data.

04. Bookmark Courses

Save courses of interest and determine total average hours per week estimated by student reports.

Screen Shot 2022-01-10 at 9.23.15 PM.png

Mobile Version

Screen Shot 2022-01-11 at 6.11.27 PM.png

01. Landing Page
 

Screen Shot 2022-01-11 at 6.11.41 PM.png

02. Search Courses
 

Screen Shot 2022-01-11 at 6.11.56 PM.png

03. Filter Results
 

Screen Shot 2022-01-11 at 6.12.12 PM.png

04. View Course Data
 

 

Feedback from Students

“The website used to be very bland and unusable"

“The course tool looks a lot nicer and I like the toggles for more FCE and courseload"

“They added a straightforward color coding system to make getting information about my courses easier and more fun”

"I'm so glad I found this tool since it makes planning courses so much easier"