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
After
Social Media
Design Process
User Personas
To understand the needs and experiences of potential users, I created two personas based on inputs from current users.
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.
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
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.
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.
Design Alterations
Final Design
Desktop Version
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.
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.
Mobile Version
01. Landing Page
02. Search Courses
03. Filter Results
