| Project Summary | |
| Role | UI/UX Designer and Researcher |
| Course | INFO 3450: Human-Computer Interaction |
| Project | HCI Concept for web deliverable |
| Technologies | Illustrator, Photoshop, Keynote, Paper Prototypes |
For a Human Computer Interaction team project, we decided to reinvision enrolling in classes and managing course information & materials. In contrast to the current enrollment system, the goal of this web application is to integrate the functionality of the existing Blackboard service with the student management software called "Student Center." Our goal was to create a simple, unified UI that combines these extremely related tasks.
Download High-Fidelity PDF Protoype
Akin to Blackboard, the goal of the Courses & Calendar section is to allow students to view their assignments, exams, and classes in a simple at-a-glance view. The UI went through several iterations to get to its final state. A sketch of a preliminary version appears near the bottom of the page.
We wanted users to be able to see their most important class-related information in a single view, so we eventually settled on a sidebar that lists the most impending HW assignments and exams. A list of courses is also included, so students can have easy access to each course's home page.
Since announcements tend to be short, they can be presented in a feed-like fashion. The most recent announcements are shown on top and go back in chronological order. Plus, clicking on an announcement will take the user directly to the course page, so they can see more information.
When a student enrolls in a course, they automatically gain access to the course's homepage, where the instructor can post the syllabus, homework assignments, exam dates, and other course materials. This is also where students can submit assignments digitally.
The current Blackboard site requires over six intermediary steps from their home page to arrive at an assignment's submission page. Now, the same task requires three steps.
Click on any image to enlarge.
To upload an assignment, the student simply has to navigate to the course homepage and click on the assignment they wish to submit. In this case, it's HW6, highlighted in red.
The detailed view shows the description of the assignment along with an option to download the assignment, if applicable (such as PDF file of the instructions. To the right, an up arrow indicates the ability to submit.
User gets immediate feedback if the upload is successful or not successful. In this case, a check mark indicates that the submission has been successfully received.
The student also sees a permanent indicator (highlighted in red) that shows that this particular homework assignment has been submitted, even if the user logs out and returns.
The current system requires students to go through upwards of 10 steps and/or pages to be able to add a class. In Compass, this has been reduced to just three.
Click on any image to enlarge.
The first step is to search for a class to add it to one's schedule. To help the user, a bar at the top of the screen indicates how many courses have been added so far, and to the left, a prominent search bar with live results are displayed. Clicking on the Add Course button will begin the adding sequence.
Users will receive visualized feedback as to whether the class can fit in their schedule. If there are multiple options, the user can simply click on the desired timeslots and enroll in the course.
After adding a course, feedback is provided by solidifying the outlined boxes, and a green success alert will be presented at the top.
After a course has been added, the course page will have the corresponding "add" button grayed out and the course will appear in the enrolled courses list at the top of the page.
Switching to course pre-enrollment for the next semester is easy. Just click the Semester title to switch. After that, creating the perfect schedule for next semester is the same.
Our idea was to create a unified tool to organize academic life. We wanted students to to see a visible and useful calendar of their classes, exams, and homework, while also being able to discover, browse, and enroll in courses easily. We also address the issue of fragmentation by providing ways to plan a complete schedule in the most effortless way possible. The goal is always to get technology out of the way so that students can worry less about how to make sure their academics are organized.
Below are diagrams of how students interact with current course management services such as Oracle's Peoplesoft Student Center for course enrollment and Blackboard for course management and information. We wanted to combine these into one system, so students wouldn't have to interact with separate UIs.
The following shows some of the many ideas that were floated in the initial stages of the project. Of course, not everything made it into the final product. In fact, we rejected a lot of the ideas because we wanted to focus on the core essentials of what would make the product have the best experience.
Each team member sketched their own ideas at first, and then as a group we decided on what were the best ideas and morphed the ideas into one. Even still, many ideas were iterated several times until they reached their current form. For instance, the dashboard was changed to be less skeumorphic.
Several storyboards were created: below is one describing a user interacting with the system in order to add a course to their current semester's schedule.
