myCourses 

myCourses 

myCourses 

myCourses 

myCourses 

System design for students

System design for students

System design for students

System design for students

System design for students

Mockup_

myCourses is a crucial management platform for students to view course content, communicate with peers and faculty, and stay organized. I aimed at improving the student's side of the platform.

myCourses is a crucial management platform for students to view course content, communicate with peers and faculty, and stay organized. I aimed at improving the student's side of the platform.

myCourses is a crucial management platform for students to view course content, communicate with peers and faculty, and stay organized. I aimed at improving the student's side of the platform.

Currently, students are overwhelmed with the hierarchy of information in regard to their class's content including documents and assignments
Additionally, students are required to go through a lengthy process in order to deliver their own content to their professors.

Currently, students are overwhelmed with the hierarchy of information in regard to their class’s content including documents and assignments. Additionally, students are required to go through a lengthy process in order to deliver their own content to their professors. 

Currently, students are overwhelmed with the hierarchy of information in regard to their class’s content including documents and assignments. Additionally, students are required to go through a lengthy process in order to deliver their own content to their professors. 

Currently, students are overwhelmed with the hierarchy of information in regard to their class’s content including documents and assignments. Additionally, students are required to go through a lengthy process in order to deliver their own content to their professors. 

Currently, students are overwhelmed with the hierarchy of information in regard to their class’s content including documents and assignments. Additionally, students are required to go through a lengthy process in order to deliver their own content to their professors. 

Client
School Project

Focus
Interaction Design
Visual Design
Prototyping

Duration
12 weeks

 

Client
School Project

Focus
Interaction Design
Visual Design
Prototyping

Duration
12 weeks

 

Client
School Project

Focus
Interaction Design
Visual Design
Prototyping

Duration
12 weeks

RESEARCH

RESEARCH

Survey Results

Survey Results

Survey Results

Survey Results

23 undergraduate participants. Average visit to myCourses: 4 to 5 times per day

23 undergraduate participants. 
Average visit to myCourses: 4 to 5 times per day

23 undergraduate participants. Average visit to myCourses: 4 to 5 times per day

23 undergraduate participants. Average visit to myCourses: 4 to 5 times per day

74%

Submit files & links to their professors daily

74%

Submit files & links to their professors daily

74%

Submit files & links to their professors daily

74%

Submit files & links to their professors daily

74%

Submit files & links to their professors daily

70%

View their class grades daily

70%

View their class grades daily

70%

View their class grades daily

70%

View their class grades daily

70%

View their class grades daily

43%

View content posted by their professors daily

43%

View content posted by their professors daily

43%

View content posted by their professors daily

43%

View content posted by their professors daily

43%

View course content documents posted by their professors daily

Research → Mission

Research → Mission

Research → Mission

Research → Mission

Simplify the viewing and interaction processes by pulling forward student's class content to create a better user experience.

Simplify the viewing and interaction processes by pulling forward student's class content to create a better user experience.

Simplify the viewing and interaction processes by pulling forward student's class content to create a better user experience.

Homepage All Classes

MEET THE USERS

FOCUS 01

The Minimalist

Lucia is always on the go. She moves fast and often writes lab reports for class, but once they are done she wants to send them off to the professor ASAP. She needs an easy and fast way to submit documents with as few clicks as possible.

The Perfectionist

Calvin, an upperclassman in the International and Global Studies major needs to read documents regularly provided online by his professors. He cares about succeeding in class and wants to get an A. He takes plenty of notes on the readings to have study resources for exams.

FOCUS 01

FOCUS 01

Upcoming Assignments 

Upcoming Assignments 

Improve student's organization by supplying all upcoming assignments. Easily filter tasks by class, assignment title, due date, and submission status. Users can choose how far in advanced they want to see listed assignments.  

Tasks

FOCUS 02

FOCUS 02

Submit Assignments

Clear Deadlines

Assignments are intuitively color coded. Green for submitted files, orange for future assignments, and red for closely approaching deadlines.

Clear Deadlines

Assignments are intuitively color coded. Green for submitted files, orange for future assignments, and red for closely approaching deadlines.

Simple Call To Actions

Larger Dropbox CTAs bring more attention to themselves, reminding the user to upload. Smaller icons confirm the files have been uploaded.

 

Recognizable Interaction 

Drag and drop a file, watch it upload, and click submit. If the user needs to add a comment or link with the file, there is space to do so.

Recognizable Interaction 

Drag and drop a file, watch it upload, and click submit. If the user needs to add a comment or link with the file, there is space to do so.

Mistakes Happen

myCourses asks for confirmation before closing the Dropbox module. It also identifies file errors & informs the user in a subtle yet noticeable statement.

Alert_Dropbox
Error__Dropbox

Feel Accomplished!

Successful submission of an assignment deserves
a huge congratulations which makes the user feel
more confident and reinforces success. 

Successful submission of an assignment deserves a huge congratulations which makes the user feel more confident and reinforces success. 

Successful submission of an assignment deserves a huge congratulations which makes the user feel more confident and reinforces success. 

Finish_Dropbox

FOCUS 03

Details & Documents 

The user can open an assignment’s detail
document right from the landing page. This allows the user to access the content they want fast without any distractions. 

The user can open an assignment’s detail
document right from the landing page. This allows the user to access the content they want fast without any distractions. 

The user can open an assignment’s detail document right from the landing page. This allows the user to access the content they want fast without any distractions. 

Class Documents - Personal Comments

Users can add personalized comments in their class documents. These comments are private to each student, as if everyone has their own individual copy of the text.

If the user wants a comment to be marked as extra important or needs to memorize the note, they can add it to their Study Notes Document.

Users can add personalized comments in their class documents.
These comments are private to each student, as if everyone has their own individual copy of the text.

If the user wants a comment to be marked as extra important or needs to memorize the note, they can add it to their Study Notes Document.

Automatically Generated Study Notes

The note system will provide users with a study guide built automatically from the comments and highlights that the user makes within the current document. 

Traditionally, student’s would take notes on paper or in a separate file. The idea behind this feature is to eliminate a 3rd party, thus helping the user stay focused and free from distractions.

The note system will provide users with a study guide built automatically from the comments and highlights that the user makes within the current document. 

Traditionally, student’s would take notes on paper or in a separate file. The idea behind this feature is to eliminate a 3rd party, thus helping the user stay focused and free from distractions.

Faculty Outreach

Increase Communication

Students and faculty can communicate inline with the assignment details or within a document. 

Quick Messaging

Pre-populated text speeds up the process of writing to faculty with a built in "Hello" & "Thank You" message.  This text is editable. 

 

Response

Faculty responses are sent through the Notification System built into myCourses. Responses are below the original note, and can be replied to or deleted. 

Response

Faculty responses are sent through the Notification System built into myCourses. Responses
are below the original note, and can be replied to or deleted. 

Response

Faculty responses are sent through the Notification System built into myCourses. Responses are below the original note, and can be replied to or deleted. 

Outreach_

Instantly Connect

Document Tools: Faculty Outreach

Students and faculty are always on the go, however, communication doesn't stop. Push notifications allow for quick solutions without being stuck behind the computer. The user can view each individual outreach comment in it's own message thread with the professor and either respond or mark the message thread as resolved.

Document Tools: Faculty Outreach

Students and faculty are always on the go, however, communication doesn't stop. Push notifications allow for quick solutions without being stuck behind the computer. The user can view each individual outreach comment in it's own message thread with the professor and either respond or mark the message thread as resolved.

Step 2 – Dropdown
Step 3 – Faculty Outreach
Step 4.5 – Thibault Chat Cropped
Step 5 – Resolve

Interactive Prototype

Interactive Prototype

DESIGN PROCESS

Current Information Architecture

myCourses IA

Interaction Architecture for Goals 

IA Goals__

Style Board

Style Guide

Moodboard

Moodboard

From my goals, I knew I wanted the moodboard to be direct, and organized. However, I didn’t want a student to be overwhelmed, so I kept it focused and airy with a good amount of white space. 

From my goals, I knew I wanted the moodboard to be direct, and organized. However, I didn’t want a student to be overwhelmed, so I kept it focused and airy with a good amount of white space. 

Moodboard

LO-FI WIREFRAMES

Homepage  +  Tasks

Homepage  +  Tasks

I focused on how to deliver upcoming tasks, and how to submit files. The layout is centered around the task module because as my research showed, the content displayed there is what students use myCourses for most often.

I focused on how to deliver upcoming tasks, and how to submit files. The layout is centered around the task module because as my research showed, the content displayed there is what students use myCourses for most often.

Homepage Lo-Fi Wireframe Redesign

Document Viewer  +  Features

Document Viewer  +  Features

Creating a wireframe for this page allowed me to think over the results I received from the survey. Specifically, which features on the document viewer students interact with the most. 

Creating a wireframe for this page allowed me to think over the results I received from the survey. Specifically, which features on the document viewer students interact with the most. 

Document Lo-Fi Wireframe Redesign_

HI-FI WIREFRAMES

HI-FI WIREFRAMES

Explorations of Upcoming Tasks

Explorations of Upcoming Tasks

After creating the general lo-fi wireframes, I spent a majority of my time creating and recreating hi-fi wireframes for each page and feature.

Module V1, I first experimented with a card system for showcasing upcoming tasks. However, this was limiting in regards to content. 

After creating the general lo-fi wireframes, I spent a majority of my time creating and recreating hi-fi wireframes for each page and feature.

Module V1, I first experimented with a card system for showcasing upcoming tasks. However, this was limiting in regards to content. 

Iter. #1

Module V2, I tried an expandable dropdown for upcoming tasks but I questioned how  a student would filter this information. 

Module V2, I tried an expandable dropdown for upcoming tasks but I questioned how  a student would filter this information. 

It. #2

Module V3, I broke down tasks by categories: due date, class title, assignment title, and dropbox submission status. However, this version was limiting in regards to hierarchy of information.

Module V3, I broke down tasks by categories: due date, class title, assignment title, and dropbox submission status. However, this version was limiting in regards to hierarchy of information.

It. #3

Document Viewer  +  Features

Document Viewer  +  Features

When designing the wireframes for the document viewer, I spent a large amount of time thinking about the interactions available through the features offered on the page.  

V1, is a full page document with icons as the navigation. Comments would only appear on hover states to allow students a clear work space free from notes. 

When designing the wireframes for the document viewer, I spent a large amount of time thinking about the interactions available through the features offered on the page.  

V1, is a full page document with icons as the navigation. Comments would only appear on hover states to allow students a clear work space free from notes. 

Document Hi-Fi Wireframe V1

V2, comments could be viewed on the side of the document. Exploring iterations with comments or without comments made me realize the user should decide what they want to view. This lead me to use a toggle in the final design that allowed students to turn their comments on/off.

V2, comments could be viewed on the side of the document. Exploring iterations with comments or without comments made me realize the user should decide what they want to view. This lead me to use a toggle in the final design that allowed students to turn their comments on/off.

Document Hi-Fi Wireframe V2

V3, I experimented with how the tools were displayed, the navigation, and structure of folders and documents within a class.

V3, I experimented with how the tools were displayed, the navigation, and structure of folders and documents within a class.

Document Hi-Fi Wireframe V3

CONCLUSION

CONCLUSION

Breaking down this project into steps - research, inspiration, style, use cases, workflows, wireframes, comps, and prototypes, helped me create a clear picture of how users would benefit from myCourses. It also helped me practice how, as a UX Designer, I would attempt a redesign for a real client.

Breaking down this project into steps - research, inspiration, style, use cases, workflows, wireframes, comps, and prototypes, helped me create a clear picture of how users would benefit from myCourses. It also helped me practice how, as a UX Designer, I would attempt a redesign for a real client.

Mockup_