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
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.
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.
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.
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.
More than 70% of students have admitted they have missed due dates.
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
1. Emphasize the calendar and upcoming events, due dates, and classes.
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.
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.
Final Designs
1. The Login Screen
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
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
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
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
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
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
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
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.