Intro

Project   Web Design, UX & UI

Project   Web Design, UX & UI

Project   Web Design, UX & UI

Date   Spring 2017

Date   Spring 2017

Date   Spring 2017

Date   Spring 2017

Client  Rochester Institute of Technology

Client  Rochester Institute of Technology

Client  Rochester Institute of Technology

Client  Rochester Institute of Technology

Intro2

Project

MyCourses is a digital course management system used by many colleges and universities, such as Rochester Institute of Technology, to allow students to access their course content online. Faculty can create, upload, and share information with students. Alternatively, students can access files, participate in class discussions, submit homework via the dropbox, access grades, and see upcoming deadlines for projects.

Original MyCourses

Here are a few screen shots of the original MyCourses before the redesign. The original website has potential, but there are a number of pain points for the target user, aka the student, that I have pointed out below.

OrigMy1@3x

1. Current Courses

This is how a student’s courses appear to them. Instead of class names, the class code appears, making it difficult for the student to quickly find classes. Additionally, the image is often unrelated to the course subject and can only be changed by the professor.

OrigMy2@3x

2. The Calendar

Hidden away, the calendar only shows due dates of upcoming assignments. Furthermore, students can not add their own assignments to the calendar. The responability falls entirely on the professor to add due dates.

OrigMy3@3x

3. Progress Bar

One positive about this page is the topic completion bar. This allows students to visually see the progress they are making throughout the semester.

4. Course View

This is how a folder within the Course Content might appear. This is customized entirely by the professor. When a student has viewed the content, it is automatically marked as completed whether the student really completed the assignment or not. This gives a false sense of completion and ultimately unhelpful to evaluating the student’s true progress.

Research

RESEARCH

I surveyed over twenty students who interacted with MyCourses, so I could understand what the typical user encounters when navigating the system. From their responses, I began to understand what may have been a source of difficulty for them, as well as features students liked, which informed my decisions on the redesign. What I came to realize was that students were having a difficult time managing their due dates and deadlines for projects.

Graph1

More than 70% of students have admitted they have missed due dates.

Graph2

About 82% of students wished professors utilized the calendar for assignments.

Furthermore, students wanted more control over their submitted dropbox assignments. As well as having their current courses readily accessible, and a way to quickly email their professors. With this in mind, I formulated my goals. Given the overwhelming feedback from students, my main focus was on solving the issue students had with managing their time.

Goals

GoalA

1. Emphasize the calendar and upcoming events, due dates, and classes.

GoalB

2. Provide and prioritize a list of the students' current courses.

Style

For the color, I wanted the overall feel to be professional and modern, but with a few fun accent colors to grab the attention of the user. Furthermore, I wanted to incorporate orange, to be consistent with RIT's branding. However, orange tends to be quite intense, thus I decided to use blues and blue-greens to compliment the orange colors. Additionally, the darker blues gave it a neutral, professional tone without overpowering the eye.

For typography, I decided to use Roboto. I knew I wanted the font to be a san-serif that was professional, modern, and friendly. Furthermore, Roboto is versatile, coming in a variety of weights and styles so creating a hierarchy with the type was much more manageable.

Style

Process

I began sketching out how I envisioned the various components of the redesign. After I had an idea of how I wanted the end result, I began to wireframe out my solutions. Ultimately, I had refined the components that would end up in the final redesign.

Process

Final Designs

1. The Login Screen

FinalDesign1

1. The Greetings

Returning users are greeted before being prompted to login their info.

2. Minimal Style

Straightforward and professional design. Users are not bombarded or overwelmed with prompts or tasks.

2. The Home Screen

FinalDesign2

1. Courses

Students have their courses readily accessable on the home page.

2. Quick Access Links

These links will take users to the course page, the course dropbox, grades, and a prompt to message their professor.

3. To-Do List

Students can check-off tasks as they finish them.

4. Schedule

Students have their schedule front and center to help them manage their week.

3. To-Do List

FinalDesign3

1. Checking Off Tasks

When checking off tasks, students have the satisfaction of crossing out items on their list. Additionally, students can see their progress at they power through their to-do list, thus maintaining a sense of accomplishment.

4. Changing Calender Views

FinalDesign4

1. Changing the Calendar View

Students can change between calendar views. Ranging from taking on each day, or looking at their entire academic year.

2. Day View

With a day view, students can focus on the day, and take on the challenge day by day.

3. Month View

Users can change to a monthly view to properly prepare for the upcoming weeks.

5. Creating an Event

FinalDesign5

1. Creating an Event

Students can click anywhere on the calendar to begin creating an event. They can even assign a color and tag to further organize their schedule.

2. New Event

New events will show up on the student's calendar so they can continue to plan out their day.

6. Emailing Professors

FinalDesign6

1. Emailing Professors

Students can quickly email their professors by clicking on the email button on the home page.

2. Drafting the Message

Students can write a quick email, this is especially important when time is of the essence.

3. Reassurance

Students are reassured that their email has been sent to their professor.

7. Adding an Item to the Dropbox

FinalDesign7

1. Uploading a Document

Students can add a file to the dropbox by selecting the upload document.

2. Loading Bar

The loading bar provides the user reassurance that their content is being processed.

3. A Job Well Done

Finally, a prompt displays showing the user their job well done. Reassuring student of their success.

8. Deleting an Item From Dropbox

FinalDesign8

1. Deleting an Item

Students can delete the item they wish to delete by selecting the trash can next to the item.

2. Prompt

A prompt pops up and users are asked if this is the item they wish to delete.

3. Restore

People make mistakes. If the student wants to undo their deletion they can restore the file back to the dropbox, if they wish.

Thank You