A redesign of Rochester Institute of Technology's management system. myCourses allows students and professors to manage grades, course content, and assignment submissions. The current website presented numerous design problems. After conducting a user study, a new interface was designed focusing in their primary needs: dropbox due dates and class information.
3. myCourses DECK DOCUMENT
KEY POINTS
BETTER ACCESS,
AMAZING EXPERIENCE
• Easy to use;
• Easy to understand;
• Intituive.
1
MORE TIME ON
myCOURSES,
BETTER GRADES
• Add usefull features;
• Notification
• More interation.
2
FUN TO USE
• Improve engagement;
• Gamification;
• Customization.
3
BEAUTIFUL TO SEE
• Powerful aesthetic
• Consistenty
• Pleasantness
4
4. MAIN PAGE
• Too much content;
• Hard to find information;
• Lack of hierarchy.
1
myCourses DECK DOCUMENT
RESEARCH / PROBLEMS
CALENDAR
• Useful, but it's not attractive;
• There isn’t much interation or
notification;
• Personal tasks aren’t add in
he calendar.
2 CLASSES
DROPDOWN
• List of classes aren't
organized by semesters;
• You see all classes that
you had at RIT.
3 DROPBOX
SUBMISSION
• It should be more visible;
• Quick and easy
access in the homepage;
4
5. myCourses DECK DOCUMENT
DEFINE USER
WHO
IS THE
USER?
• 18 -21 years old
• Significantly male - based
on RIT gender number 68%
male
• Undergraduate
• North west students
• Single
WHAT
DOES HE
WANTS?
• Improve access to
myCourses website
• Promote a better
experience in the system
• Raise grades
6. myCourses DECK DOCUMENT
PERSONA
CHARLES DOE
Sophomore student of Computer
Science at RIT
20 years old | Long Island, NY
Pursue: to work at Apple
Personality: Intelligent, shy
fast-leaner, desorganized, geek.
REFERENTS & INFLUENCES
BRAND & PRODUCT RELATIONSHIP
USER EXPERIENCE GOALS
As a Computer Science student, Charles felt frustrated each time
that he needed to use RIT’s website. On myCourses, for
example, Charles frequently had problems to organize his
assignments and online discussions. Their goal is to be able to
use myCourses as a tool to support him to organize himself.
TECHNOLOGY EXPERTISE
Charles is an expert in technology. He started to study code and
programming when he was 11 years old. Nowadays, he is always
trying learn a new programming language or applying his
knowledge to develop system and website. He has a part-time
job where he works developing apps for Mac platform.
MUST DO // MUST NEVER
Charles must do a better organization of his time. He tried to
use a notebook and a physical agenda, but it didn't work: he
always forgot those stuff in his house.
He must never miss an assignment on myCourses. Charlie
accesses the website several times a day, carefully paying
attention to the deadline.
USED DEVICE AND PLATFORMS
APPLE FANBOY! Macbook Pro Retina, Ipad, and Iphone 6.
“Hello word! I don’t know
where I should start.”
7. myCourses DECK DOCUMENT
SURVEY: INTERESTING FACTS
4
66.7% 78.8%
55.6%
55.6%
of the users use
myCourses
3-6 times per day
of the professors
require the use of
myCourses
of the users spend
10-20m per visit on
myCourses
of the users visit
myCourses everyday
8. myCourses DECK DOCUMENT
SURVEYSUMMARY
78.8%
55.6%
55.6%
BASED ON
USER'S RESEARCH,
MYCOURSES
SHOULD BE
REDESIGN IN A
FRIENDLY WAY.
• Homepage could have more relevant
information (Dropbox due date, Class
schedule, Courses news);
• Courses landing page could have more
info about grades and due dates;
• Incorporate some gamification on the
website;
• Improve dropbox landing page, make it
simple;
• Add feed with information about latest
updates.
10. myCourses
WIREFRAMES HI-FI
myCourses LANDING PAGE
PROFILE
Edit, inbox, messages, storage, alerts,
setting.
AGENDA
Due dates, project description, quick link to
upload file on Dropbox.
BOX NEXT CLASS
Information about the class and course
content browzer.
NEWS
System info.
ACTIVITY
Latest materials and info updated by
professors.
BOOKMARKS
Quick access to relevant materials and info.
COURSES
Courses of the semester, notification about
content not visualized.
11. myCourses
WIREFRAMES HI-FI
COURSES LANDING PAGE
SUBMENU
Agenda (home of the section), content,
dropbox, activities, perfomance, classlist.
CALENDAR
Shows tasks and assignments of the week.
TASKS COMPLETED
Gamification/motivation for the students
finish their assignments.
CONTENT
Latest content upload by professor.
QUIZ* (Customizable)
Shows information about the present quiz.
DISCUSSION* (Customizable)
Shows latest discussion.
LAST COLUMN
Information about the class; professor info.
13. myCourses
WIREFRAMES HI-FI
COURSES > DROPBOX > UPLOAD FILE
When you select a folder, a new box will
appear.
Two options to upload a file: drag or upload
using the button.
14. myCourses
WIREFRAMES HI-FI
COURSES > DROPBOX >
UPLOAD FILE > UPLOADING
Green bar shows the progress to upload the
files.
A green popup shows the success
message. Option to review the file.
15. myCourses
WIREFRAMES HI-FI
COURSES > DROPBOX > UPLOAD FILE >
EDIT
Options to delete or move the file to other
folder.
Option to upload more file.
Info about the file: type, size, date.
17. INITIAL DESIGN DIRECTIONS
myCourses DECK DOCUMENT
The MyCourses was redesigned based on old website
style colors guide and features. Simple, fresh, and flat
were some of the visual concepts incorporated in this
visual guide. However, after some researches and
new references were noticed that this design was not
the best to reflect the new features and
communication of the new website.
In the initial design directions, there is not a pattern of
colors or styles. The primary colors - gray and orange
- reflected directly the actual MyCourses design and I
was looking for something more fresh and clean.
However, the page organization, as well as the content
were the same used in the final design.
Some sections - next class, news, feeds, and courses
- were changed to incorporated more content.
Overall, the most relevant changes in this first design
were colors and visual guide of some boxes.
18. FINAL DESIGN DIRECTION
myCourses DECK DOCUMENT
After the Frankenstein design, new colors and
features were added. Some boxes had their titles
changed to something more intuitive for the user.
Top bar: A new bar was added in the top including
data, hour, and welcome message to the user.
Your next class: Images, colors, icons were added to
this box making it more pleasant.
News: Image and icon were added.
Courses: New colors and style in the notification
boxes.
Latest Activities: New information were added. Now
you can mark your favorite feed.
Bookmarks: New style and information.
1
3
5
6
4
2
1
2
3
4
5
6
21. SUMMARY
FINAL DESIGN
myCourses DECK DOCUMENT
In the new MyCourses, users have an interface focused in
their primary needs: dropbox due dates and class
information:
• Friendly homepage: top bar shows data, hour, and
welcome message to users.
• Home page focused on Dropbox due dates to make the
user to find easy all information about uploads of files.
• Users can see information related to their next class, as
well as grades and progress bar progress of tasks in the
box "your next class."
• Users asked for more notification about courses, now they
can see it in the homepage.
• Gamification: Courses landing page shows the percentage
of tasks completed, a graphic of academic performance,
and a ranking or GPA in an attempt to stimulate users to
raise their grades.
• Dropbox submission: Users can just click and drag to
upload their file. They also can edit, remove, or move their
files.