|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.
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 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.
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.